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;