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