preface

Wheel was originally an iOS component, but there are many android clones. At present, this component is more commonly used in both App and Web. React Native currently has the following types:

  • Pure js component

For example, the Wheel component in teaset can be used if performance requirements are low or UI customization is high because the JS code can be changed at will.

Or use a pure JS version of the React -native Picker

  • Pure native component – Native Modal

react-native-picker

This component has been used for a long time, both ends are native packaging, but the library is the bottom pop-up effect is also packaged in the native, the expansion is very low, if you only need the bottom pop-up effect this demand, you can use this component.

  • Pure native components – Pure Wheel components

react-native-wheel-picker

The library is just the wheel component, and the Android side uses github.com/AigeStudio/… IOS uses PickerIOS, which comes with RN. PickerIOS has a unified API for both ends (in fact, android has many more properties than iOS).


introduce

In the above library github.com/AigeStudio/… It is the most consistent with my requirements, but the wheel View component can be easily expanded, but there are several problems with the library at present

  • The author is no longer in maintenance, there are several serious bugs, and newer versions of RN are no longer supported
  • Only single wheel, we generally need the support of multiple wheels, and need to encapsulate some common functions

Therefore, based on the above reasons, the following functions are modified and expanded according to the library:

  • Fixed several serious bugs and supported new versions of RN
  • Add the typescript definition file
  • Encapsulating multi-wheel support (common and cascading modes are supported)
  • Encapsulates common DatePicker, RegionPicker, and DateRangePicker components

As both ends are native components with good performance, all other components are realized by a single wheel on the JS side. After bug fixing, JS can be directly modified to facilitate hot update.

Disadvantages of this library:

  • The UI on iOS and Android is not exactly the same (native component decision, see below for details).
  • PickerIOS does not support features that the library does not support, such as changing the color of the delimiter (which may be required in dark mode). Although it can be done on Android, the API is not exposed for the sake of unity

If you have any questions, you can go here to give feedback

Github.com/yz1311/reac…

demo

Github.com/yz1311/code…

integration

npm i @yz1311/react-native-wheel-picker --save
Copy the code

Automatic integration

RN>=0.60, automatically auto linking, no operation required

RN) < 0.60

react-native link @yz1311/react-native-wheel-picker
Copy the code

Manual integration

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() ); }Copy the code

Introduction to the

The library (>=0.2.0) provides a variety of pickers, all are views, compared to directly provide Modal+ Picker mode, pure Picker view is more flexible, how can you want to combine

import WheelPicker ,{CommonPicker,DateRangePicker,DatePicker,RegionPicker} from "@yz1311/react-native-wheel-picker";
Copy the code

Basic Picker

  • WheelPicker: a single wheel, is the foundation of all other picker control, based on the primary packaging (iOS is the PickerIOS RN, android package from cn. Aigestudio. WheelPicker: WheelPicker)

  • CommonPicker:

The multi-wheel picker component based on WheelPicker encapsulation supports PARALLEL (inter-wheel association) and CASCADE (inter-wheel association) modes. Basically, all single and multi-wheel components can be directly used or encapsulated on this component

Commonly used Picker

  • The DatePicker:CommonPickerEncapsulated date selection component, support date/time/date + time three modes
  • DateRangePicker: based on theCommonPickerEncapsulated date segment selection component that can select a time period
  • RegionPicker: based on theCommonPickerEncapsulate the address selection component, supporting the selection of provinces, encapsulate the data of provinces and cities in 2019/01, supporting custom data sources

For details about the attributes of each component, see index.d.ts

example

reference

import WheelPicker ,{CommonPicker,DateRangePicker,DatePicker,RegionPicker} from "@yz1311/react-native-wheel-picker";
Copy the code

  • A single wheel

< CommonPicker pickerData = {[' liu bei, zhang fei, "guan yu", 'zhaoyun', 'huang', 'd', 'wei', 'zhuge liang]} selectedValue = {} ['] / >Copy the code

  • Multi-wheel (Parallel mode)

< CommonPicker pickerData = {[[' male 'and' female '], [' 0 ~ 20 ', '21 ~ 40 years',' 40 ~ 60 years', 'more than 60 years']]} selectedValue = {} ['] / >Copy the code

  • Multiple Wheels (Cascade mode)

< CommonPicker pickerData = {{' male ': [' game', 'electronics',' watch '], 'female' : [' clothes', 'buy shoes',' beauty ', 'take']}} selectedValue = {[' male ', 'electronics']} / >Copy the code

  • Date selection (default date mode, support date/time/datetime)

<DatePicker
    mode={'date'}
    />
Copy the code

The date pattern:

Time mode:

Datetime mode:

  • Date segment selection

<DateRangePicker
    />
Copy the code

  • Address selection

<RegionPicker onPickerConfirm={(names, codes)=>{//names: [" Shanghai ", "district "," Huangpu "] // Codes: ["31", "3101", "310101"] }} selectedValue={['']} />Copy the code

Screenshots (android/iOS)

  • datePicker


  • dateRangePicker


  • regionPicker


other

RN’s Umeng affiliate statistics, sharing, authorization

Bugly has been fully updated for Android

RN shadow effect

RN handwritten signature

RN Autonavi navigation library

RN implements clearing the local cache

RN implements custom code-push hot updates

RN’s code-push-server management App

RN blog park App