前言
wheel原本是iOS上面的组件,但是在android上面也有很多仿照实现。目前该组件不管是App还是Web端都是比较常用的组件了。在React Native中,目前有下面几种:
-
纯js组件
或者使用
react-native-picker
的纯js版本
-
纯原生组件 - 自带modal
很长一段时间均使用该组件,两端均是原生封装,但是该库是将底部弹出的效果也封装在原生了,拓展度很低,如果只需要
底部弹出效果
这种需求,可以使用该组件。
-
纯原生组件 - 纯wheel组件
该库只是wheel组件,android端使用github.com/AigeStudio/…进行封装,iOS使用的RN自带的PickerIOS,根据PickerIOS统一了两端的api(实际上android端的属性比iOS多很多)
介绍
上面的库中github.com/AigeStudio/…是最符合我的要求的,只是wheel view组件,可以很方便的进行拓展,但是该库目前存在几个问题
- 作者已不在维护了,存在几个很严重的bug,并且并不支持RN的新版本了
- 只有单wheel,我们一般都需要多wheel的支持,并且需要封装一些常用的功能
所以基于以上原因,根据该库修改和拓展了下面功能:
- 修复几处严重bug,支持RN新版本
- 添加typescript定义文件
- 封装多Wheel支持(支持普通和级联模式)
- 封装常用的DatePicker、RegionPicker、DateRangePicker组件
由于两端均是原生组件,性能较好,所有的其他组件均是单个wheel在js端实现,后面bug修复可以直接修改js,方便热更新。
该库的缺点:
- iOS和android端的UI并不完全一致(原生组件决定,具体效果可以看最下面的效果图)
- PickerIOS不支持的功能,该库均不支持, 譬如修改分隔符的颜色(这个在的暗黑模式下可能需要),虽然android端可以实现,但为了两端统一并未暴露出api,看后面的需求
如有任何问题,可以去这里反馈
demo
集成
npm i @yz1311/react-native-wheel-picker --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
-
WheelPicker: 单个的wheel,是所有其他picker的基础控件,基于原生封装(iOS是RN自带的PickerIOS,android封装自cn.aigestudio.wheelpicker:WheelPicker)
-
CommonPicker: 基于
WheelPicker
封装的多Wheel picker组件,支持parallel
(wheel间不关联)和cascade
(wheel间关联)两种模式,基本所有单、多wheel组件均可以直接使用 该组件或者在该组件上封装
常用Picker
- DatePicker: 基于
CommonPicker
封装的日期选择组件,支持日期/时间/日期+时间 三种模式 - DateRangePicker: 基于
CommonPicker
封装的日期段选择组件,可以选择一个时间段 - RegionPicker: 基于
CommonPicker
封装的地址选择组件,支持选择省市区,封装了2019/01月的省市区数据,支持自定义数据源
各组件的具体属性,请查看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'}
/>
date模式:
time模式:
datetime模式:
-
日期段选择
<DateRangePicker
/>
-
地址选择
<RegionPicker
onPickerConfirm={(names, codes)=>{
//names: ["上海市", "市辖区", "黄浦区"]
//codes: ["31", "3101", "310101"]
}}
selectedValue={['']} />
截图(android/iOS)
-
datePicker
-
dateRangePicker
-
regionPicker