react-native-wheel-picker

前言

该库最开始基于react-native-wheel-picker，修改和拓展了很多功能

android端基于WheelPicker 1.1.2版本(注意不要手动升级到1.1.3)进行封装

ios端基于RN自带的PickerIOS进行封装

在原库的基础上面，进行了下面的修改:

• 修复几处严重bug，支持RN新版本
• 添加typescript定义文件
• 封装多Wheel支持(支持普通和级联模式)
• 封装常用的DatePicker、RegionPicker、DateRangePicker组件

由于两端均是原生组件，性能较好，所有的其他组件均是单个wheel在js端实现，后面bug修复可以直接修改js，方便热更新。

集成

npm i @yz1311/react-native-wheel-picker  moment --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模式，支持year/month/date/time/datetime)

注意: 不管是哪种模式，回调返回的数据都是一个date对象，具体的数值需要自己去转换

year: 选择年份

month: 选择年月

date: 选择年月日

time: 选择时分

datetime: 选择年月日时分(minDate和maxDate无法影响到时分，只能影响到日期,譬如:minDate设置为2010-01-01 08:00:00,依旧可以选择当天00:00~23:59的时间段)

<DatePicker
        mode={'date'}
        //date值可以不填，默认是当前时间
        date={new Date()}
        />

• 日期段选择

<DateRangePicker

       />

• 地址选择

项目的数据来自于Administrative-divisions-of-China 的 pca-code.json,

项目里面已经自带该数据源，也可以用data={require('pca-code.json')}的方式自定义数据源，但必须符合格式

如果需要二级、四级、五级等其它联动模式，可以直接按照RegionPicker改写一下就行了(或者提issues我加上)

<RegionPicker
        onPickerConfirm={(names, codes)=>{
            //names: ["上海市", "市辖区", "黄浦区"]
            //codes: ["31", "3101", "310101"]
        }}
        selectedValue={['']} />

• 结合Modal使用

大部分情况下Picker都不是只作为view使用，而是底部弹窗选择，下面是react-native-modal为例的代码:

<Modal
                style={{flex:1, justifyContent:'flex-end',margin: 0}}
                isVisible={selectDateVisible}
                onBackdropPress={()=>{
                    setSelectDateVisible(false);
                }}
                onBackButtonPress={()=>{
                    setSelectDateVisible(false);
                }}
                >
                //所有的picker是默认显示header的
                <DatePicker
                    pickerTitle='预约时间'
                    date={ruleForm.appointmentTime}
                    mode={'datetime'}
                    onPickerCancel={()=>{
                        setSelectDateVisible(false);
                    }}
                    onPickerConfirm={date=>{
                        setRuleForm(prevState => ({
                            ...prevState,
                            appointmentTime: date
                        }));
                        setSelectDateVisible(false);
                    }}
                    //大部分情况下不用关注date改变时的数据，下面方法可以删除
                    onDateChange={()=>{}}
                />
            </Modal>

截图(android/iOS)

datePicker

dateRangePicker

regionPicker