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