React Native学习----选择器组件react-native-picker

1. 准备，地址：https://github.com/beefe/react-native-picker

2. 日期选择：

_showTimePicker() {
        let hours = [],
            minutes = [];

        for(let i=1;i<13;i++){
            hours.push(i + '点');
        }
        for(let i=0;i<60;i++){
            minutes.push(i + '分');
        }

        let now = new Date();
        let cdate = [];
        let daySum = Util.isLeapYear(now.getFullYear()) ? 366 : 365 ;
        let week = ['周日','周一','周二','周三','周四','周五','周六']
        for(let i=0;i<daySum;i++){
            var d=new Date();
            d.setDate(now.getDate() + i);
            cdate.push((d.getMonth()+1) + '月' + d.getDate() + '日  ' + week[d.getDay()]);
        }
        let pickerData = [cdate, ['上午', '下午'], hours, minutes];
        let date = new Date();
        let selectedValue = [
            d[0],
            now.getHours() > 11 ? '下午' : '上午',
            now.getHours() === 12 ? '12点' : date.getHours()%12 + '点',
            now.getMinutes() + '分'
        ];
        Picker.init({
            pickerData,
            selectedValue,
            pickerConfirmBtnText:'确认',
            pickerCancelBtnText:'取消',
            pickerTitleText: '选择日期',
            wheelFlex: [2, 1, 1, 2, 1, 1],
            onPickerConfirm: pickedValue => {
                this.setState({
                    pickedDate:pickedValue,
                    choosed:'#111',
                });
                console.log('area', pickedValue);
            },
            onPickerCancel: pickedValue => {
                console.log('area', pickedValue);
            },
            onPickerSelect: pickedValue => {
                let targetValue = [...pickedValue];
                if(JSON.stringify(targetValue) !== JSON.stringify(pickedValue)){
                    // android will return String all the time，but we put Number into picker at first
                    // so we need to convert them to Number again
                    targetValue.map((v, k) => {
                        if(k !== 3){
                            targetValue[k] = parseInt(v);
                        }
                    });
                    Picker.select(targetValue);
                    pickedValue = targetValue;
                }
            }
        });
        Picker.show();
    }

                    <View style={{flexDirection:'row', justifyContent:'flex-start'}}>
                        <Text style={styles.rowText}>时间:</Text>
                        <TouchableHighlight underlayColor='#fff' onPress={this._showTimePicker.bind(this)}>
                            <Text style={[styles.conText,{color:this.state.choosed}]}>{this.state.pickedDate}</Text>
                        </TouchableHighlight>
                    </View>