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

例:

const Button = React.createClass({
    render(){
        return (
            '#a5a5a5'}
                onPress={this.props.onPress}>
                {this.props.text}
            
        )
    }
})

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 (
                0,1],
                            outputRange:[0,200]
                        })
                    }]}>
                    我是第{i+1}个View
                
            );
        });
        return(
            
                
                    sequence/delay/stagger/parallel演示
                    {views}
                
                日期选择器组件实例
                "#a5a5a5"
                    onPress={this.openDataPicker.bind(this,'simple',{data:this.state.pressDate})}//'{data:this.state.pressDate}设置了个默认的时间'
                    >
                    点击弹出基本日期选择器
                
                

这里有几个点有疑问:

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

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

你可能感兴趣的:(React-Native)