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)

这里有几个点有疑问：

1. 为什么openDataPicker前面加个async
2. 为什么用await

这里使用await的原因是：如果不使用await，就会在还没有设定日期就开开处理结果，得到的结果是undefined，所以必须使用await。但是await是异步执行的，如果只用await ，会报错：unexpected token，所以，在openDataPicker 前面必须加async