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