最近在开发中需要做个选择日期的功能,发现react-native-picker这个组件不错,选择的内容可自定义,可选择日期、时间、城市等,功能强大,因此写了个Demo记录一下。
github地址为:https://github.com/beefe/react-native-picker
step 1:install
npm install react-native-picker --save
step2 :link
react-native link
Demo效果如下:
Demo 源码:
注:更多配置项请前往 github 查看。
import React, {Component} from 'react';
import {AppRegistry,StyleSheet,View,Text,TouchableOpacity} from 'react-native';
import {name as appName} from './app.json';
import Picker from 'react-native-picker';
class Demo extends Component{
constructor(props){
super(props);
this.state = ({
currentDate:this._getCurrentDate(),
})
}
//获取当前日期 格式如 2018-12-15
_getCurrentDate(){
var currDate = new Date()
var year = currDate.getFullYear()
var month = (currDate.getMonth()+1).toString()
month = month.padStart(2,'0')
var dateDay = currDate.getDate().toString()
dateDay = dateDay.padStart(2,'0')
let time = year+'-'+month+'-'+dateDay
return time;
}
//组装日期数据
_createDateData(){
let date = [];
var currDate = new Date()
var year = currDate.getFullYear()
var month = currDate.getMonth()+1
for(let i=1970;i<=year;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;
}
//打开日期选择 视图
_showDatePicker() {
var year = ''
var month = ''
var day = ''
var dateStr = this.state.currentDate
//console.log('dateStr',dateStr)
year = dateStr.substring(0,4)
month = parseInt(dateStr.substring(5,7))
day = parseInt(dateStr.substring(8,10))
Picker.init({
pickerTitleText:'时间选择',
pickerCancelBtnText:'取消',
pickerConfirmBtnText:'确定',
selectedValue:[year+'年',month+'月',day+'日'],
pickerBg:[255,255,255,1],
pickerData: this._createDateData(),
pickerFontColor: [33, 33 ,33, 1],
onPickerConfirm: (pickedValue, pickedIndex) => {
var year = pickedValue[0].substring(0,pickedValue[0].length-1)
var month = pickedValue[1].substring(0,pickedValue[1].length-1)
month = month.padStart(2,'0')
var day = pickedValue[2].substring(0,pickedValue[2].length-1)
day = day.padStart(2,'0')
let str = year+'-'+month+'-'+day
this.setState({
currentDate:str,
})
},
onPickerCancel: (pickedValue, pickedIndex) => {
console.log('date', pickedValue, pickedIndex);
},
onPickerSelect: (pickedValue, pickedIndex) => {
console.log('date', pickedValue, pickedIndex);
}
});
Picker.show();
}
render(){
return(
<View style={styles.container}>
<View style={styles.content}>
<Text style={styles.textStyle}>选择日期</Text>
<TouchableOpacity onPress={()=>this._showDatePicker()}>
<Text style={styles.textStyle}>{this.state.currentDate}</Text>
</TouchableOpacity>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
textStyle:{
fontSize:18,
},
container:{
flex:1,
justifyContent:'center',
alignItems:'center'
},
content:{
width:'100%',
flexDirection:'row',
justifyContent:'space-around'
}
})
AppRegistry.registerComponent(appName, () => Demo);