# 前言
wheel原本是iOS上面的組件，但是在android上面也有很多仿照實現(xiàn)。目前該組件不管是App還是Web端都是比較常用的組件了。在React Native中，目前有下面幾種:
* ### 純js組件
> 譬如[teaset](https://github.com/rilyu/teaset)中的[wheel](https://github.com/rilyu/teaset/blob/master/docs/cn/Wheel.md)組件，如果對性能要求不高或者對UI定制化較高(因為js代碼可以隨便改),可以使用該組件。
> 或者使用`react-native-picker`的[純js版本](https://github.com/beefe/react-native-picker/tree/pure-javascript-version)
* ### 純原生組件 - 自帶modal
[react-native-picker](https://github.com/beefe/react-native-picker)
> 很長一段時間均使用該組件，兩端均是原生封裝，但是該庫是將底部彈出的效果也封裝在原生了，拓展度很低，如果只需要`底部彈出效果`這種需求，可以使用該組件。
* ### 純原生組件 - 純wheel組件
[react-native-wheel-picker](https://github.com/yatessss/react-native-wheel-picker)
> 該庫只是wheel組件，android端使用[https://github.com/AigeStudio/WheelPicker](https://github.com/AigeStudio/WheelPicker)進(jìn)行封裝，iOS使用的RN自帶的PickerIOS，根據(jù)PickerIOS統(tǒng)一了兩端的api(實際上android端的屬性比iOS多很多)
<figure class="half" style="display:flex;">
? ? <img src="https://user-gold-cdn.xitu.io/2020/1/2/16f644beae093ca7?w=368&h=682&f=jpeg&s=15129" width="45%"/>
? ? <div style="width:10px;"></div>
? ? <img src="https://user-gold-cdn.xitu.io/2020/1/2/16f644beaf6baee7?w=400&h=640&f=jpeg&s=23458" width="45%"/>
</figure>
# 介紹
上面的庫中[https://github.com/AigeStudio/WheelPicker](https://github.com/AigeStudio/WheelPicker)是最符合我的要求的，只是wheel view組件，可以很方便的進(jìn)行拓展，但是該庫目前存在幾個問題
* 作者已不在維護了，存在幾個很嚴(yán)重的bug，并且并不支持RN的新版本了
* 只有單wheel，我們一般都需要多wheel的支持，并且需要封裝一些常用的功能
所以基于以上原因，根據(jù)該庫修改和拓展了下面功能:
* <span style="color: #006AB1;">修復(fù)幾處嚴(yán)重bug，支持RN新版本</span>
* <span style="color: #006AB1;">添加typescript定義文件</span>
* <span style="color: #006AB1;">封裝多Wheel支持(支持普通和級聯(lián)模式)</span>
* <span style="color: #006AB1;">封裝常用的DatePicker、RegionPicker、DateRangePicker組件</span>
由于兩端均是原生組件，性能較好，所有的其他組件均是單個wheel在js端實現(xiàn)，后面bug修復(fù)可以直接修改js，方便熱更新。
<span style="color: red;">該庫的缺點:</span>
* iOS和android端的UI并不完全一致(原生組件決定,具體效果可以看最下面的效果圖)
* PickerIOS不支持的功能，該庫均不支持, 譬如修改分隔符的顏色(這個在的暗黑模式下可能需要)，雖然android端可以實現(xiàn)，但為了兩端統(tǒng)一并未寶露出api，看后面的需求
如有任何問題，可以去這里反饋
[https://github.com/yz1311/react-native-wheel-picker](https://github.com/yz1311/react-native-wheel-picker)
# demo
https://github.com/yz1311/code-push-server-app/blob/dev/src/pages/demo/wheelPickerDemo.tsx
# 集成
該版本api可能會有變更，所以處于測試階段，需要安裝beta版本
```Javascript
npm i @yz1311/react-native-wheel-picker@0.2.0-beta15 --save
```
### 自動集成
RN>=0.60,會自動auto linking，無需操作
RN<0.60
```
react-native link @yz1311/react-native-wheel-picker
```
### 手動集成
Add in settings.gradle
```
include ':react-native-wheel-picker'
project(':react-native-wheel-picker').projectDir = new File(settingsDir, '../node_modules/@yz1311/react-native-wheel-picker/android')
Add in app/build.gradle
compile project(':react-native-wheel-picker')
Modify MainApplication
import com.zyu.ReactNativeWheelPickerPackage;
......
protected List<ReactPackage> getPackages() {
? ? return Arrays.<ReactPackage>asList(
? ? ? ? new MainReactPackage(), new ReactNativeWheelPickerPackage()
? ? );
}
```
# 簡介
該庫(>=0.2.0)提供了多種Picker，全部均是view，相比直接提供Modal+picker的模式，單純的picker view更加靈活,想怎么組合都行
```
import WheelPicker ,{CommonPicker,DateRangePicker,DatePicker,RegionPicker} from "@yz1311/react-native-wheel-picker";
```
### 基礎(chǔ)Picker
* <font color='#E50F42'>WheelPicker:</font> 單個的wheel，是所有其他picker的基礎(chǔ)控件，基于原生封裝(iOS是RN自帶的PickerIOS，android封裝自cn.aigestudio.wheelpicker:WheelPicker)
* <font color='#E50F42'>CommonPicker:</font>
基于`WheelPicker`封裝的多Wheel picker組件，支持`parallel`(wheel間不關(guān)聯(lián))和`cascade`(wheel間關(guān)聯(lián))兩種模式,基本所有單、多wheel組件均可以直接使用
該組件或者在該組件上封裝
### 常用Picker
* <font color='#E50F42'>DatePicker:</font> 基于`CommonPicker`封裝的日期選擇組件，支持日期/時間/日期+時間 三種模式
* <font color='#E50F42'>DateRangePicker:</font> 基于`CommonPicker`封裝的日期段選擇組件，可以選擇一個時間段
* <font color='#E50F42'>RegionPicker:</font> 基于`CommonPicker`封裝的地址選擇組件，支持選擇省市區(qū)，封裝了2019/01月的省市區(qū)數(shù)據(jù)，支持自定義數(shù)據(jù)源
各組件的具體屬性，請查看[index.d.ts](https://juejin.im/post/index.d.ts)
# 例子
### 引用
```
import WheelPicker ,{CommonPicker,DateRangePicker,DatePicker,RegionPicker} from "@yz1311/react-native-wheel-picker";
```
* ### 單wheel
```
<CommonPicker
? ? pickerData={['劉備', '張飛', '關(guān)羽', '趙云', '黃忠', '馬超', '魏延', '諸葛亮']}
? ? selectedValue={['']} />
```
* ### 多wheel(parallel模式)
```
<CommonPicker
? ? pickerData={[['男','女'],['0~20歲','21~40歲','40~60歲','60歲以上']]}
? ? selectedValue={['']} />
```
* ### 多wheel(cascade模式)
```
<CommonPicker
? ? pickerData={{
? ? ? ? '男': ['打游戲', '電子產(chǎn)品', '看球'],
? ? ? ? '女': ['買衣服', '買鞋子', '美妝', '自拍']
? ? ? ? }}
? ? ? ? selectedValue={['男','電子產(chǎn)品']} />
```
* ### 日期選擇(默認(rèn)date模式，支持date/time/datetime)
```
<DatePicker
? ? mode={'date'}
? ? />
```
**<span style='color:#FF4E2E'>date模式:</span>**
**<span style='color:#FF4E2E'>time模式:</span>**
**<span style='color:#FF4E2E'>datetime模式:</span>**
* ### 日期段選擇
```
<DateRangePicker
? ? />
```
* ### 地址選擇
```
<RegionPicker
? ? ? ? onPickerConfirm={(names, codes)=>{
? ? ? ? ? ? //names: ["上海市", "市轄區(qū)", "黃浦區(qū)"]
? ? ? ? ? ? //codes: ["31", "3101", "310101"]
? ? ? ? }}
? ? ? ? selectedValue={['']} />
```
# 截圖(android/iOS)
* ## datePicker
<div>
? ? <img src='https://user-gold-cdn.xitu.io/2020/1/2/16f644bee415c6bc?imageView2/0/w/1280/h/960/format/webp/ignore-error/1' width='45%' />
? ? <img src='https://user-gold-cdn.xitu.io/2020/1/2/16f644befbc4d5ac?imageView2/0/w/1280/h/960/format/webp/ignore-error/1' width='45%' />
</div>
* ## dateRangePicker
<div>
? ? <img src='https://user-gold-cdn.xitu.io/2020/1/2/16f644bf05c3744e?imageView2/0/w/1280/h/960/format/webp/ignore-error/1' width='45%' />
? ? <img src='https://user-gold-cdn.xitu.io/2020/1/2/16f644bf0bb8aaf3?imageView2/0/w/1280/h/960/format/webp/ignore-error/1' width='45%' />
</div>
* ## regionPicker
<div>
? ? <img src='https://user-gold-cdn.xitu.io/2020/1/2/16f644bf0f2f7c0f?imageView2/0/w/1280/h/960/format/webp/ignore-error/1' width='45%' />
? ? <img src='https://user-gold-cdn.xitu.io/2020/1/2/16f644bf0f814241?imageView2/0/w/1280/h/960/format/webp/ignore-error/1' width='45%' />
</div>
