iOS和Android通用日期選擇器：react-native-common-date-picker（如果你覺(jué)得還不錯(cuò)桌肴，記得給個(gè) ??????）涯曲。
效果
日期選擇器截圖
| 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
|
前言
一直以來(lái)第美，都會(huì)因?yàn)?code>RN的日期選擇器使用而浪費(fèi)時(shí)間和精力虎韵。首先雁佳，RN官方提供的日期選擇器在iOS和Android上并不統(tǒng)一涨享，尤其是在Android上筋搏，展示的是鐘表的形式，作為一個(gè)iOS開發(fā)者來(lái)說(shuō)厕隧，簡(jiǎn)直難以接受奔脐。
因此，對(duì)于RN開發(fā)來(lái)說(shuō)吁讨，RN官方 - DatePickerIOS 和 RN官方 - DatePickerAndroid 的不統(tǒng)一髓迎，這點(diǎn)就讓很多人棄用官方提供的組件和API，那有沒(méi)有現(xiàn)成的可以使用的日期選擇器呢建丧？
注：上面官方提供的日期選擇器目前已經(jīng)由RN社區(qū)統(tǒng)一維護(hù)排龄，鏈接：@react-native-community/datetimepicker。
現(xiàn)成的日期選擇器自然是有的翎朱，比如react-native-modal-datetime-picker和官方提供的類似橄维，可以說(shuō)只是一層封裝尺铣。再比如另一個(gè)較為符合需求的react-native-date-picker。然而争舞，這些庫(kù)要么基于官方做了一層封裝迄埃，要么就是不能靈活地調(diào)整一些必要的配置，比如我們希望只顯示年-月或者調(diào)整順序的月-日-年兑障、日-月-年等等侄非。
筆者的目的就是為了要讓需求無(wú)處遁形，無(wú)論你怎么調(diào)整順序流译、需要調(diào)整顏色逞怨、距離、字體大小等福澡，我只需要配置一下參數(shù)就可以滿足產(chǎn)品經(jīng)理的“無(wú)理要求”叠赦，也因此才有了本文的重復(fù)造輪子。
為什么要推薦react-native-common-date-picker
主要有以下幾點(diǎn)：
- 支持
iOS和Android革砸，樣式統(tǒng)一 - 安裝和使用方便除秀，純JavaScript實(shí)現(xiàn)，無(wú)需
link - 靈活性高算利，參數(shù)配置豐富册踩，無(wú)論你只想顯示年-月-日還是月-日-年、日-月-年效拭、年-月等都可以
- 支持日期選擇器和日歷??兩種不同類型的日期選擇
- 性能高暂吉，使用最基礎(chǔ)最原始的“看似笨拙”的方法來(lái)提升性能（可以看源碼里面有注釋）
安裝
本庫(kù)是純JS實(shí)現(xiàn)，因此安裝依賴非常簡(jiǎn)單缎患，一步到位：
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倉(cāng)庫(kù)，源碼里面也有很全面的注釋挤渔，非常容易配置和使用肮街。
