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=0;i<100;i++){
    data.push(i);
}
 
Picker.init({
    pickerData: data,
    selectedValue: [59],
    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 = [ [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23], [] ] for(let i = 0;i< 60;i++){ data[1].push(i); } this.pickerInit(data,[h,m],'时间选择'); } //日期 - 天
    dates = () => { let date = new Date(); let y = date.getFullYear(); let m = String(date.getMonth() + 1); let d = String(date.getDate()); let data = []; let year = null; let month = null; let maxY = y + 10; let minY = y - 10; for(let i = minY;i <= maxY;i++){ year = new Object(); year[i] = []; for(let j = 1;j<=12;j++){ month = new Object(); month[j] = []; let monthDay = currentMonth(j,i); let day = []; for(let k = 1;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() + 1; let maxY = y + 10; let minY = y - 10; let data = [ [], [1,2,3,4,5,6,7,8,9,10,11,12], ] for(let i = minY;i <= maxY;i++){ data[0].push(i); } this.pickerInit(data,[y,m],'年月选择'); } //日期 - 年份
    dateYear = () => { let y = new Date().getFullYear(); let maxY = y + 10; let minY = y - 10; 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:40, borderWidth:1, borderRadius:3, borderColor:'#ccc' }, txt:{ flex:1, lineHeight:38, textAlign:'center', color:'#444', fontSize:15, } }); //计算当月天数
currentMonth = (m,y) => { var monthDay  = 0; switch(m){ case 1: case 3: case 5: case 7: case 8: case 10: case 12:monthDay = 31;break; case 4: case 6: case 9: case 11:monthDay = 30;break; case 2: if(y % 4 == 0 && y % 100 != 0 || y % 400 == 0){ monthDay = 29; }else{ monthDay = 28; } } return monthDay ; } export default Index;

 

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

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