React Native之高性能Wheel Picker选择组件(日期、时间段、省市区三级联动)

6,382 阅读3分钟

前言

wheel原本是iOS上面的组件,但是在android上面也有很多仿照实现。目前该组件不管是App还是Web端都是比较常用的组件了。在React Native中,目前有下面几种:

  • 纯js组件

譬如teaset中的wheel组件,如果对性能要求不高或者对UI定制化较高(因为js代码可以随便改),可以使用该组件。

或者使用react-native-picker纯js版本

  • 纯原生组件 - 自带modal

react-native-picker

很长一段时间均使用该组件,两端均是原生封装,但是该库是将底部弹出的效果也封装在原生了,拓展度很低,如果只需要底部弹出效果这种需求,可以使用该组件。

  • 纯原生组件 - 纯wheel组件

react-native-wheel-picker

该库只是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,看后面的需求

如有任何问题,可以去这里反馈

github.com/yz1311/reac…

demo

github.com/yz1311/code…

集成

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

其他

RN之Umeng友盟统计、分享、授权

android全量更新bugly

RN阴影效果

RN手写签名

RN高德地图导航库

RN实现清除本地缓存

RN实现自定义code-push热更新

RN之code-push-server管理App

RN博客园App