react native 中DataPickerAndroid的用法和一些注意注意点

例：

const Button = React.createClass({
render(){
return (
<TouchableHighlight
style={styles.button}
underlayColor={'#a5a5a5'}
onPress={this.props.onPress}>
<Text style={styles.buttonText}>{this.props.text}</Text>
</TouchableHighlight>
)
}
})

const ToggleAnimatingActivityIndicator = React.createClass({

getInitialState() {
return {
anim:[1,2,3].map(() => new Animated.Value(0)), //初始化3个值
pressDate:new Date(2016, 3, 11),
allDate: new Date(2017, 1, 1),
simpleText:'选择日期，默认今天',
minText:'选择日期，不能比今日再早',
maxText:'选择日期，不能比今日再晚',
presetText:'选择日期，指定2015/3/5'
};
},
//进行创建时间日期选择器,创建一个'openDataPicker'（名字自定义）
async openDataPicker(stateKey,options){
try{
var newState = {};
const {action,year,month,day} = await DatePickerAndroid.open(options);
if(action === DatePickerAndroid.dismissedAction){
newState[stateKey + 'Text'] = 'dismissed';
}else{
var date = new Date(year,month,day);
newState[stateKey+'Text'] = date.toLocaleDateString();
newState[stateKey+'Date'] = date;
}
this.setState(newState);
}catch({code,message}){
console.warn("Error in example '${stateKey}': ",message)
}
},
componentDidMount() {
var timing =Animated.timing;
Animated.sequence([
Animated.stagger(200,this.state.anim.map((left) =>{
return timing(left,{
toValue:1,
});
}).concat(
this.state.anim.map((left) => {
return timing(left,{
toValue:0,
})
})
)), //三个view滚到右边在还原，每个动作间隔200ms
Animated.delay(400), //延迟400ms，配合sequence使用
timing(this.state.anim[0],{
toValue:1
}),
timing(this.state.anim[0],{
toValue:-1
}),
timing(this.state.anim[0],{
toValue:0.5
}),
Animated.parallel(this.state.anim.map((anim) => timing(anim,{
toValue:0
}))) //同时回到原位置
]).start();
},
render() {
var views = this.state.anim.map(function(value,i){
return (
<Animated.View
key={i}
style={[styles.demo, {
left:value.interpolate({
inputRange:[0,1],
outputRange:[0,200]
})
}]}>
<Text style={styles.text}>我是第{i+1}个View</Text>
</Animated.View>
);
});
return(
<View>
<View style={styles.container}>
<Text>sequence/delay/stagger/parallel演示</Text>
{views}
</View>
<Text style={styles.welcome}>日期选择器组件实例</Text>
<TouchableHighlight
style={styles.button}
underlayColor="#a5a5a5"
onPress={this.openDataPicker.bind(this,'simple',{data:this.state.pressDate})}//'{data:this.state.pressDate}设置了个默认的时间'
>
<Text style={styles.buttonText}>点击弹出基本日期选择器</Text>
</TouchableHighlight>
<Button text={this.state.presetText}
onPress={this.openDataPicker.bind(this, 'preset', {date: this.state.allDate})}/>
<Button text={this.state.minText}
onPress={this.openDataPicker.bind(this, 'min', {date: this.state.minDate,minDate:new Date()})}/>
<Button text={this.state.maxText}
onPress={this.openDataPicker.bind(this, 'max', {date: this.state.maxDate,maxDate:new Date()})}/>
</View>
)
}
})

var styles = StyleSheet.create({
demo: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white',
},
text: {
fontSize: 30
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
button: {
margin:5,
backgroundColor: 'white',
padding: 15,
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: '#cdcdcd',
}
});

AppRegistry.registerComponent('AwesomeProject',() => ToggleAnimatingActivityIndicator)

这里有几个点有疑问：

为什么openDataPicker前面加个async

为什么用await

这里使用

await

的原因是：如果不使用

await

，就会在还没有设定日期就开开处理结果，得到的结果是

undefined

，所以必须使用await。但是

await

是异步执行的，如果只用

await

，会报错：

unexpected token

，所以，在

openDataPicker

前面必须加

async