React Native日期选择器

iOS和Android通用日期选择器：react-native-common-date-picker（如果你觉得还不错，记得给个 ⭐️⭐️⭐️）。

效果

日期选择器截图

Android 1	Android 2	Android 3	Android 4
Android 1.png	Android 2.png	Android 3.png	Android 4.png

iOS 1	iOS 2	iOS 3	iOS 4
iOS 1.png	iOS 2.png	iOS 3.png	iOS 4.png

日历列表截图

Android 1	Android 2	Android 3	Android 4
Android1.png	Android2.png	Android3.png	Android4.png

iOS 1	iOS 2	iOS 3	iOS 4
iOS1.png	iOS2.png	iOS3.png	iOS4.png

日期选择器GIF	日历列表GIF
DatePicker.gif	CalendarList.gif

前言

一直以来，都会因为RN的日期选择器使用而浪费时间和精力。首先，RN官方提供的日期选择器在iOS和Android上并不统一，尤其是在Android上，展示的是钟表的形式，作为一个iOS开发者来说，简直难以接受。

因此，对于RN开发来说，RN官方 - DatePickerIOS 和 RN官方 - DatePickerAndroid 的不统一，这点就让很多人弃用官方提供的组件和API，那有没有现成的可以使用的日期选择器呢？

注：上面官方提供的日期选择器目前已经由RN社区统一维护，链接：@react-native-community/datetimepicker。

现成的日期选择器自然是有的，比如react-native-modal-datetime-picker和官方提供的类似，可以说只是一层封装。再比如另一个较为符合需求的react-native-date-picker。然而，这些库要么基于官方做了一层封装，要么就是不能灵活地调整一些必要的配置，比如我们希望只显示年-月或者调整顺序的月-日-年、日-月-年等等。

笔者的目的就是为了要让需求无处遁形，无论你怎么调整顺序、需要调整颜色、距离、字体大小等，我只需要配置一下参数就可以满足产品经理的“无理要求”，也因此才有了本文的重复造轮子。

为什么要推荐react-native-common-date-picker

主要有以下几点：

• 支持iOS和Android，样式统一
• 安装和使用方便，纯JavaScript实现，无需link
• 灵活性高，参数配置丰富，无论你只想显示年-月-日还是月-日-年、日-月-年、年-月等都可以
• 支持日期选择器和日历📆两种不同类型的日期选择
• 性能高，使用最基础最原始的“看似笨拙”的方法来提升性能（可以看源码里面有注释）

安装

本库是纯JS实现，因此安装依赖非常简单，一步到位：

npm install react-native-common-date-picker

使用

日期选择器

import {DatePicker} from "react-native-common-date-picker";

<DatePicker
    confirm={date => {
        console.warn(date)
    }}
/>

日历选择列表📆

import {CalendarList} from "react-native-common-date-picker";

<Modal animationType={'slide'} visible={this.state.visible}>
     <CalendarList
          containerStyle={{flex: 1}}
          cancel={() => this.setState({visible: false})}
          confirm={data => {
              this.setState({
                   selectedDate1: data[0],
                   selectedDate2: data[1],
                   visible: false,
              });
          }}
     />
</Modal>

更多的使用例子，大家自行查看GitHub: react-native-common-date-picker仓库，源码里面也有很全面的注释，非常容易配置和使用。