react-native-picker自定义年or月组件

前段时间一直在做rn的项目，其中用到react-native-picker，想和大家分享一下

废话少说，直接上代码

import React, { Component, PureComponent } from 'react';
import cloneDeep from 'lodash/cloneDeep';

import {
  Text,
  TouchableOpacity,
  StyleSheet
} from 'react-native';

import Picker from 'react-native-picker';
import createPickerData from '../utils/PickerDataUtil';


export default class DatePicker extends PureComponent {
  constructor(props, context) {
    super(props, context);
    this.date = []  
  }

  _showDatePicker(onPress) {
    const { pickerData = createPickerData() } = this.props;
    Picker.init({
      pickerData,
      pickerTitleText: '日期',
      pickerRowHeight: 42,
      pickerToolBarBg: [255, 255, 255, 1],
      pickerBg: [255, 255, 255, 1],
      pickerFontColor: [51, 51, 51, 1],
      pickerConfirmBtnText: '确定',
      pickerCancelBtnText: '取消',
      onPickerConfirm: (pickedValue, pickedIndex) => {
        this.date = pickedValue
        onPress(pickedValue);
      },
    });
    Picker.show();
  }

  handleHidePicker() {
    Picker.hide()
  }

  componentWillUnmount() {
    Picker.hide();
  }



  render() {
    let { text, onPress,  width,  height } = this.props

    return (
      <TouchableOpacity style={styles.date} onPress={this._showDatePicker.bind(this, onPress)}>
        <Text style={{         
          color: '#999',       
          width: width,
          height: height,       
        }}>
        {text}
       </Text>
      </TouchableOpacity>
    );
  }
};
const styles = StyleSheet.create({
  date: {
    marginRight: 25,
    flexDirection: 'row'
  }
})

自定义： PickerDataUtil （获取年月日 ）

function range(start, end) {
  start = Number(start)
  end = Number(end)

  if (start > end) return []

  return new Array(end - start + 1).fill().map((item, index) => index + start)
}

function dayRange(year, month, startDay = 1, endDay, flag) {
  if(flag){
    endDay = endDay
  }else{
    if (month === 2) {
    if (year % 4 === 0) {
      endDay = endDay || 29
    } else {
      endDay = endDay || 28
    }
  } else if ([1, 3, 5, 7, 8, 10, 12].includes(month)) {
    endDay = 31
  } else {
    endDay = 30
  }
  }
  return range(startDay, endDay)
}
//开始or结束日期可自定义
export default function createPickerData(startDate = '2017-01-01', endDate = '2049-12-31', isSetEndDay=false) {
  const [startYear, startMonth, startDay] = startDate.split('-').map(Number)
  const [endYear, endMonth, endDay] = endDate.split('-').map(Number)

  if (startYear === endYear) {
    if (startMonth === endMonth) {
      return [
        {
          [startYear]: [
            {
              [startMonth]: dayRange(startYear, startMonth, startDay, endDay, isSetEndDay)
            }
          ]
        }
      ]
    }
    return [
      {
        [startYear]: [
          {
            [startMonth]: dayRange(startYear, startMonth, startDay)
          },
          ...range(startMonth + 1, endMonth - 1).map(month => ({
            [month]: dayRange(startYear, month)
          })),
          {
            [endMonth]: dayRange(startYear, startMonth, 1, endDay, isSetEndDay)
          }
        ]
      }
    ]
  }

  return [
    {
      [startYear]: range(startMonth, 12).map(month => ({
        [month]: dayRange(startYear, month, month === startMonth ? startDay : 1)
      }))
    },
    ...range(startYear + 1, endYear - 1).map(year => ({
      [year]: range(1, 12).map(month => ({
        [month]: dayRange(year, month)
      }))
    })),
    {
      [endYear]: range(1, endMonth).map(month => ({
        [month]: dayRange(endYear, month, 1, month === endMonth ? endDay : null, isSetEndDay)
      }))
    }
  ]
}

调用：
 // 如果要只设置到最后一天 就给个true, 不传第三个参数 
 // 例：  createPickerData('2018-11-01', '2018-11-27', true)
render() {
	return (
		<View>
			<DatePicker text={startTime} onPress={this.handlePressStartDate.bind(this)} pickerData={createPickerData(beginDate, endDate)} />
		</View>
	)
}