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>