1、安装
yarn add react-native-picker
yarn add moment
react-native link react-native-picker
2、页面使用
import ModalPicker from 'react-native-picker';
const moment = require('moment')
<Text style={{paddingHorizontal:30}} onPress={()=>this._showPicker(1)}>生日</Text>
//生日选择器
_createDateData() {
let date = [];
let currentYear = Number(moment(new Date()).format('YYYY'))
for(let i=1960;i<currentYear;i++){
let month = [];
for(let j = 1;j<13;j++){
let day = [];
if(j === 2){
for(let k=1;k<29;k++){
day.push(k+'日');
}
//Leap day for years that are divisible by 4, such as 2000, 2004
if(i%4 === 0){
day.push(29+'日');
}
}
else if(j in {1:1, 3:1, 5:1, 7:1, 8:1, 10:1, 12:1}){
for(let k=1;k<32;k++){
day.push(k+'日');
}
}
else{
for(let k=1;k<31;k++){
day.push(k+'日');
}
}
let _month = {};
_month[j+'月'] = day;
month.push(_month);
}
let _date = {};
_date[i+'年'] = month;
date.push(_date);
}
return date;
}
//显示选择器
_showPicker(id) {
switch (id) {
case 1 :
ModalPicker.init({
pickerData: this._createDateData(),
pickerTitleText:'选择生日',
pickerCancelBtnText:'取消',
pickerConfirmBtnText:'完成',
// pickerConfirmBtnColor:[1, 186, 245, 1],
pickerCancelBtnColor:[0, 0, 0, 1],
pickerToolBarBg:[242, 242, 242, 1],
pickerBg:[242, 242, 242, 1],
pickerFontColor: [1, 186, 245, 1],
pickerRowHeight:26,
selectedValue:[],
onPickerConfirm: (pickedValue, pickedIndex) => {
let y = Number(pickedValue[0].slice(0,4))
let m = Number(pickedValue[1].slice(0,pickedValue[1].length-1))
let d = Number(pickedValue[2].slice(0,pickedValue[2].length-1))
let newM = m < 10 ? '0' + m : m
let newD = d < 10 ? '0' + d : d
let finalDay = `${y}-${newM}-${newD}`
console.log('生日Confirm', pickedValue,finalDay);
this.setState({
birthday:finalDay
})
},
onPickerCancel: (pickedValue, pickedIndex) => {
console.log('onPickerCancel', pickedValue, pickedIndex);
},
onPickerSelect: (pickedValue, pickedIndex) => {
console.log('onPickerSelect', pickedValue, pickedIndex);
}
});break;
case 2 :this._showTimePicker();break;
}
ModalPicker.show();
}
3551626857070_.pic.jpg
网友评论