react native中利用Picker自定义日期组件(只包含年和月)

因为业务需求,定义只包含年月的日期,react-native自带组件不符合,第三方鸡肋,于是自己写一个,安卓和IOS样式不同,自己体验调用方法示例:

import PickerData from ‘..//Picker‘;

<PickerData  visible={store.visibleReferee}  onCancel={    () => {      store.visibleReferee = false;      return null;    }  }  onRequestClose={    () => {      store.visibleReferee = false;      return null;    }  }  onComfig={(time) => store.comfigTimeReferee(time)}/>

// 传递参数:

visible:　　true   false   控制此组件显示和隐藏

// 回调函数

onCancel():　　点击取消

onRequestClose(): 物理键返回,此属性不设置会报警告

onComfig(): 点击确认,回调带参数选择的日期 time (2018-02-01)

组件代码:

Picker.js

import React, { PureComponent } from ‘react‘;import {  View,  Picker,  StyleSheet,  Dimensions,  Modal,  TouchableOpacity,  Alert,

　　Text 

} from ‘react-native‘;

// 默认获取本地时间const dataObj = new Date();class PickerData extends PureComponent {  constructor(props) {    super(props);// 默认获取显示本地当前时间    this.state = {      datetimeYear: dataObj.getFullYear() + ‘‘,      datetimeMoth: ((dataObj.getMonth() + 1) + ‘‘).length <= 1 ?        (‘0‘ + (dataObj.getMonth() + 1)) : ((dataObj.getMonth() + 1) + ‘‘),    };  }// 生成列表// start 开始时间

// ender 结束时间

// str 日期单位

  _renderDeal = (start, ender, str) => {    const dealRow = [];    for (let i = start; i < ender; i++) {// 月份碰到小于10的加0,例如07月      if ((i + ‘‘).length <= 1) {        dealRow.push(          <Picker.Item label={‘0‘ + i + str} value={‘0‘ + i} key={i} />        );      } else {        dealRow.push(          <Picker.Item label={i + str} value={‘‘ + i} key={i} />        );      }    }    return dealRow;  };

// 格式化日期// 两位数月份  dateFormatting = (temp) => {    const month = (temp.getMonth() + 1) + ‘‘;    if (month.length <= 1) {      return temp.getFullYear() + ‘0‘ + month;    } else {      return temp.getFullYear() + ‘‘ + month;    }  };

// 点击确认回调方法onComfig

  comfig = () => {    const yeartime = this.dateFormatting(dataObj);    const yeartimeer = this.state.datetimeYear + this.state.datetimeMoth;// 用户点错月份      if (yeartime < yeartimeer) {      Alert.alert(‘错误提示‘, ‘当月没有记录，请重新选择日期‘, [{ text: ‘确定‘ }]);    } else {// 回调      this.props.onComfig(yeartimeer);    }  };  render() {    const { visible } = this.props;

return (      <Modal        visible={visible}        transparent={true}        onRequestClose={() => this.props.onRequestClose()}      >        <View style={styles.modelSelect}>          <View style={styles.ViewStyle}>            <View style={{ borderBottomWidth: 1, borderBottomColor: ‘rgb(75,139,249)‘, padding: 20 }}>              <Text style={{ fontSize: 20, color: ‘#000‘ }}>                {this.state.datetimeYear + ‘年‘ + this.state.datetimeMoth + ‘月‘}              </Text>            </View>            <View style={styles.main}>              <Picker                prompt={‘请选择年份‘}                mode="dialog"                selectedValue={this.state.datetimeYear}                onValueChange={(lang) => { this.setState({ datetimeYear: lang }); }}                style={styles.switchStyle}              >                {this._renderDeal(2016, dataObj.getFullYear() + 1, ‘年‘)}              </Picker>              <Picker                prompt={‘请选择月份‘}                mode="dialog"                selectedValue={this.state.datetimeMoth}                onValueChange={(lang) => { this.setState({ datetimeMoth: lang }); }}                style={styles.switchStyle}              >                {this._renderDeal(1, 13, ‘月‘)}              </Picker>            </View>            <View style={{ flexDirection: ‘row‘, borderTopWidth: 1, borderTopColor: ‘rgb(75,139,249)‘ }}>              <TouchableOpacity onPress={() => this.props.onCancel()}>                <View style={[styles.cancelStyle, { borderRightWidth: 1, borderRightColor: ‘rgb(75,139,249)‘ }]}>                  <Text style={{ fontSize: 16 }}>取消</Text>                </View>              </TouchableOpacity>              <TouchableOpacity                onPress={() => { this.comfig(loading); }}              >                <View style={styles.cancelStyle}>                  <Text style={{ fontSize: 16, color: ‘#000‘ }}>确认</Text>                </View>              </TouchableOpacity>            </View>          </View>        </View>      </Modal>

);  }}const styles = StyleSheet.create({  main: {    flex: 1,    flexDirection: ‘row‘,    justifyContent: ‘center‘,    alignItems: ‘center‘,    height: 40,    marginVertical: 20  },  switchStyle: {    width: 140,

},  modelSelect: {    flex: 1,    justifyContent: ‘center‘,    backgroundColor: ‘rgba(0, 0, 0, 0.5)‘,  },  ViewStyle: {    width: Dimensions.get(‘window‘).width - 30,    alignSelf: ‘center‘,    height: __ANDROID__ ? 240 : 300,    justifyContent: ‘center‘,    borderRadius: 10,    marginHorizontal: 15,    backgroundColor: ‘#fff‘  },  cancelStyle: {    justifyContent: ‘center‘,    alignItems: ‘center‘,    height: 60,    width: (Dimensions.get(‘window‘).width - 30) / 2,  }});export default PickerData;

原文地址：https://www.cnblogs.com/zhuyupingit/p/9436471.html