react-native-picker 实现省市区 时间日期组件

github示例以及详细参数：https://github.com/beefe/react-native-picker

先 安装 link

npm install react-native-picker

react-native link react-native-picker

然后就可以使用了，具体看文档

例如

import Picker from 'react-native-picker';
let data = [];
for(var i=;i<;i++){
    data.push(i);
}

Picker.init({
    pickerData: data,
    selectedValue: [],
    onPickerConfirm: data => {
        console.log(data);
    },
    onPickerCancel: data => {
        console.log(data);
    },
    onPickerSelect: data => {
        console.log(data);
    }
});
Picker.show();

我自己用这个实现了，省市区3级联动 时间日期 选择组件

如图

使用示例：

<_Picker title='区域'
                        cback={(data)=>this.selectPicker(data)}
                        type="provincialUrbanArea"
                    />

扩展代码

/*该组件只能在 react-native中使用
 * 先安装 yarn add  react-native-picker
 * 然后 链接 react-native link react-native-picker
 * cback -- 选择后的回调方法 返回值
 * type -- 组件类型 看 pickerType() 方法定义

 * 还可以定义其他的，自己传数据，需要进行扩展，但是有缺陷，就是 只能按照这种格式，取到的值也是文字，而不能是id，
 * 如果后端需要id就不能用这个组件
 * */
import React, { Component } from 'react';
import {StyleSheet, Text, TouchableHighlight } from 'react-native';
import Picker from 'react-native-picker';
const _Picker = null;
class Index extends Component{
    constructor(props) {
        super(props);
        this.state = {
                val:this.props.title,
                data:[]
        };
    }
    //组件渲染前
    componentWillMount(){
    }
    //组件渲染后
    componentDidMount() {
    }
    //组件销毁
    componentWillUnmount(){
        _Picker.hide();
    }
    pickerType = () => {
        //根据类型判断 要显示的 组件数据
        switch (this.props.type){
            case 'time'://时间
                this.time();
            break;
            case 'date'://日期
                this.dates();
            break;
            case 'dateMonth'://日期选择年月份
                this.dateMonth();
            break;
            case 'dateYear'://日期选择年份份
                this.dateYear();
            break;
            case 'provincialUrbanArea'://省市区
                this.provincialUrbanArea();
            break;
            case 'provincialUrban'://省市
                this.provincialUrban();
            break;
        }
    }
    //时间
    time = () => {
        let date = new Date();
        let h = date.getHours();
        let m = date.getMinutes();
        let data = [
            [,,,,,,,,,,,,,,,,,,,,,,,],
            []
        ]
        for(let i = ;i< ;i++){
            data[].push(i);
        }
        this.pickerInit(data,[h,m],'时间选择');
    }
    //日期 - 天
    dates = () => {
        let date = new Date();
        let y = date.getFullYear();
        let m = String(date.getMonth() + );
        let d = String(date.getDate());
        let data = [];
        let year = null;
        let month = null;
        let maxY = y + ;
        let minY = y - ;
        for(let i = minY;i <= maxY;i++){
            year = new Object();
            year[i] = [];
            for(let j = ;j<=;j++){
                month = new Object();
                month[j] = [];
                let monthDay = currentMonth(j,i);
                let day = [];
                for(let k = ;k <= monthDay; k++){
                    month[j].push(k);
                }
                year[i].push(month);
            }
            data.push(year);
        }
        this.pickerInit(data,[y,m,d],'日期选择');
    }
    //日期 - 月份
    dateMonth = () => {
        let date = new Date();
        let y = date.getFullYear();
        let m = date.getMonth() + ;
        let maxY = y + ;
        let minY = y - ;
        let data = [
            [],
            [,,,,,,,,,,,],
        ]
        for(let i = minY;i <= maxY;i++){
            data[].push(i);
        }
        this.pickerInit(data,[y,m],'年月选择');
    }
    //日期 - 年份
    dateYear = () => {
        let y = new Date().getFullYear();
        let maxY = y + ;
        let minY = y - ;
        let data = []
        for(let i = minY;i <= maxY;i++){
            data.push(i);
        }
        this.setState({
            data:data
        },function(){
            this.pickerInit([y],'年份选择');
        }.bind(this));

    }
    //省市区
    provincialUrbanArea = () => {
        let jsonData = require('./area.json');
        let data = [];
        for(let i in jsonData){
            let obj = new Object();
            obj[i] = jsonData[i];
            data.push(obj);
        }
        this.pickerInit(data,['北京','北京','东城区'],'省市区');
    }
    //省市
    provincialUrban = () => {
        let jsonData = require('./area.json');
        let data = [];
        for(let i in jsonData){
            let obj = new Object();
            let arr = jsonData[i];
            for(let j in arr){
                obj[i] = [];
                for(let k in arr[j]){
                    obj[i].push(k);
                }
            }
            data.push(obj);
        }
        this.pickerInit(data,['北京','北京'],'省市');
    }
    //显示Picker组件
    onPresss = () => {
        this.pickerType();
    }
    render(){
        return (
          <TouchableHighlight
            underlayColor="#f1f1f1"
            style={styles.picker}
            onPress = {this.onPresss}
            >
            <Text style={styles.txt}>
                {this.state.val}
            </Text>
         </TouchableHighlight>
        );
    }
    //组件初始化
    pickerInit = (data,selectedValue,title) => {
        Picker.init({
            pickerData:data,
            selectedValue: selectedValue,
            pickerTitleText:title,
            pickerConfirmBtnText:'确定',
            pickerCancelBtnText:'取消',
            //确定
            onPickerConfirm: data => {
                    switch (this.props.type){
                    case 'time'://时间
                        data = data.join(':');
                    break;
                    case 'date'://日期
                        data = data.join('-');
                    break;
                    case 'dateMonth'://日期选择年月份
                        data = data.join('-');
                    break;
                    case 'dateYear'://日期选择年份
                        this.dateYear();
                    break;
                    case 'provincialUrbanArea'://省市区
                        data = data.join(' ');
                    break;
                    case 'provincialUrban'://省市
                        data = data.join(' ');
                    break;
                }
                this.setState({
                        val:data
                });
                this.props.cback(data);
            },
            //取消
            onPickerCancel: data => {
                console.log(data);
            },
            //选择
            onPickerSelect: data => {
                console.log(data);
            }
        });
        _Picker = Picker;
        _Picker.show();
    }
}
const styles = StyleSheet.create({
    picker:{
        height:,
        borderWidth:,
        borderRadius:,
        borderColor:'#ccc'
    },
    txt:{
        flex:,
        lineHeight:,
        textAlign:'center',
        color:'#444',
        fontSize:,
    }
});
//计算当月天数
currentMonth = (m,y) => {
        var monthDay  = ;
        switch(m){
            case :
            case :
            case :
            case :
            case :
            case :
            case :monthDay = ;break;
            case :
            case :
            case :
            case :monthDay = ;break;
            case :
                if(y %  ==  && y %  !=  || y %  == ){
                    monthDay = ;

                }else{
                    monthDay = ;
                }
        }
        return monthDay ;
}
export default Index;

代码地址 https://pan.baidu.com/s/1Qj-fxnDcnWNPlneQy-King

其中 省市区的 json 数据也在里面，可以更换，但是 需要修改数据格式，详细去看github上面的文档