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上面的文档
标签:picker,case,react,let,break,data,native From: https://www.cnblogs.com/sexintercourse/p/16954024.html