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上面的文档

巴特西

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

最新文章

热门文章

巴特西

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

最新文章

热门文章

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