# 前言
wheel原本是iOS上面的组件，但是在android上面也有很多仿照实现。目前该组件不管是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)进行封装，iOS使用的RN自带的PickerIOS，根据PickerIOS统一了两端的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组件，可以很方便的进行拓展，但是该库目前存在几个问题
* 作者已不在维护了，存在几个很严重的bug，并且并不支持RN的新版本了
* 只有单wheel，我们一般都需要多wheel的支持，并且需要封装一些常用的功能
所以基于以上原因，根据该库修改和拓展了下面功能:
* <span style="color: #006AB1;">修复几处严重bug，支持RN新版本</span>
* <span style="color: #006AB1;">添加typescript定义文件</span>
* <span style="color: #006AB1;">封装多Wheel支持(支持普通和级联模式)</span>
* <span style="color: #006AB1;">封装常用的DatePicker、RegionPicker、DateRangePicker组件</span>
由于两端均是原生组件，性能较好，所有的其他组件均是单个wheel在js端实现，后面bug修复可以直接修改js，方便热更新。
<span style="color: red;">该库的缺点:</span>
* iOS和android端的UI并不完全一致(原生组件决定,具体效果可以看最下面的效果图)
* PickerIOS不支持的功能，该库均不支持, 譬如修改分隔符的颜色(这个在的暗黑模式下可能需要)，虽然android端可以实现，但为了两端统一并未宝露出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";
```
### 基础Picker
* <font color='#E50F42'>WheelPicker:</font> 单个的wheel，是所有其他picker的基础控件，基于原生封装(iOS是RN自带的PickerIOS，android封装自cn.aigestudio.wheelpicker:WheelPicker)
* <font color='#E50F42'>CommonPicker:</font>
基于`WheelPicker`封装的多Wheel picker组件，支持`parallel`(wheel间不关联)和`cascade`(wheel间关联)两种模式,基本所有单、多wheel组件均可以直接使用
该组件或者在该组件上封装
### 常用Picker
* <font color='#E50F42'>DatePicker:</font> 基于`CommonPicker`封装的日期选择组件，支持日期/时间/日期+时间 三种模式
* <font color='#E50F42'>DateRangePicker:</font> 基于`CommonPicker`封装的日期段选择组件，可以选择一个时间段
* <font color='#E50F42'>RegionPicker:</font> 基于`CommonPicker`封装的地址选择组件，支持选择省市区，封装了2019/01月的省市区数据，支持自定义数据源
各组件的具体属性，请查看[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={['刘备', '张飞', '关羽', '赵云', '黄忠', '马超', '魏延', '诸葛亮']}
selectedValue={['']} />
```
* ### 多wheel(parallel模式)
```
<CommonPicker
pickerData={[['男','女'],['0~20岁','21~40岁','40~60岁','60岁以上']]}
selectedValue={['']} />
```
* ### 多wheel(cascade模式)
```
<CommonPicker
pickerData={{
'男': ['打游戏', '电子产品', '看球'],
'女': ['买衣服', '买鞋子', '美妆', '自拍']
}}
selectedValue={['男','电子产品']} />
```
* ### 日期选择(默认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: ["上海市", "市辖区", "黄浦区"]
//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>
网友评论