iOS和Android通用日期选择器:react-native-common-date-picker(如果你觉得还不错,记得给个 ⭐️⭐️⭐️)。
效果
日期选择器截图
Android 1 | Android 2 | Android 3 | Android 4 |
---|---|---|---|
iOS 1 | iOS 2 | iOS 3 | iOS 4 |
---|---|---|---|
日历列表截图
Android 1 | Android 2 | Android 3 | Android 4 |
---|---|---|---|
iOS 1 | iOS 2 | iOS 3 | iOS 4 |
---|---|---|---|
日期选择器GIF | 日历列表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仓库,源码里面也有很全面的注释,非常容易配置和使用。