Morioh
Login
React Native Tutorial

React Native Tutorial

3 years ago

A Picker Component used in React Native

react-native-slidepicker

A selector component on React Native, using time, address, and various types of selection scenarios.

Why you choose:

  • Implemented using JavaScript, compatible with Android and iOS.

  • Custom item height, background color, text style, custom selector header

  • Support the use of cascade selection and parallel selection

Usage

Install the library:

npm install react-native-slidepicker

Introduction and use:

//Linkage data 
import  {  CascadePicker  }  from  "react-native-slidepicker" ; 

//Ping-level data 
import  {  ParallelPicker  }  from  "react-native-slidepicker" ;

Example

Examples of use:

import {ParallelPicker} from 'react-native-slidepicker';
import ParaData from './one.json';
export default class PickerTest extends Component {
  ...
  onceChange = data => console.info('once', data);
  confirm = data => console.info('confirm', data);
  render() {
    return (
      <View style={{flex: 1}}>
        {/* <CascadePicker
          dataSource={CasCaData}
          onceChange={this.onceChange}
          confirm={this.confirm}
        /> */}
        <ParallelPicker
          dataSource={ParaData}
          onceChange={this.onceChange}
          confirm={this.confirm}
        />
      </View>
    );
  }
}

props

The following are the various properties of the component

dataSource

The necessary attributes, array type, and data source for selection.

The cascade data selection and parallel data selection should be passed through as follows:

Cascade data:

[
  {
    "name": "Asia",
    "id": 1,
    "list": [
      {
        "name": "China",
        "id": 100,
        "list": [
          {
            "name": "Beijing",
            "id": 1101
          }
          ...
        ]
      },
      {
        "name": "South Korea",
        "id": 200,
        "list": [
          ...
        ]
      }
    ]
  },
  {....}
]

Parallel data:

[
  [
    {
      "name": "2015",
      "id": 11
    }
  ],
  [
    {
      "name": "7月",
      "id": 201
    },
    {
      "name": "8月",
      "id": 202
    }
  ],
  [
    {
      "name": "1日",
      "id": 2101
    }
  ]
]

confirm

(dataArray) => {}, the function type. If the default confirm and cancel buttons are used, this function is necessary and returns the selected data when confirming.

If a custom header is used, and the “select” button and operation are customized, it is not necessary.

onceChange

(dataArray) => {}, function type, non-essential parameter. Each data selection will trigger and return the currently selected real-time data.

cancel

() => {}, function type. If the default confirm and cancel buttons are used, this function is necessary for canceling operations.

pickerStyle

A style object can contain the following attributes:

Key Type Default Value Description
itemHeight number 40 item height
visibleNum number 5 Number of visible rows
activeBgColor string (color) “#ccc” Background color of selected item
activeFontSize Number 18 Font size of selected items
activeFontColor string (color) “#a00” The font color of the selected item
normalBgColor string (color) “#fff” Background color of unselected items
normalBgOpacity number (0-1) 0.4 Transparency of the background color of unselected items (the background color is activeBgColor)
normalFontSize number 16 Font color of unselected items

Method

If you use a custom header and include “Confirm” and “Cancel” buttons, then you need to set ref for the picker component. Then bind the method on ref to your event to get the selection result.

getResult()

Unless you use a custom header, you should use comfrim instead of this method.

By setting ref, the selected data can be obtained in real time, but the trigger timing is not easy to determine, because there are already confirm buttons and event callbacks, the confirm event should be used first.

export default class PickerTest extends Component {
  ...
  setPickerRef=(ref) => this.pickerRef = ref;
	getData=()=>{
    const data = this.pickerRef.getResult();
    console.info('data',data)
  }
  render() {
    const CustomHead=
          <View><Button onPress={this.getData}></Button></View>;
    return (
      <View style={{flex: 1}}>
        <ParallelPicker
          ref={this.setPickerRef}
          dataSource={ParaData}
          ...
        />
      </View>
    );
  }
}

illustration

This component does not deal with the logic of the pop-up box, because the program of the pop-up layer may be different for everyone. It is still difficult to find a solution that most people agree with. Therefore, the logic of this layer is left to the user to handle. If there is a better solution, please issue an issue.

If you need to use it in the pop-up layer, you can use Modaleither absolute positioning and z-Index means,

Such as:

//嵌入Modal
<Modal {...ModalProps}>
	<ParallelPicker
   dataSource={ParaData}
   onceChange={this.onceChange}
   confirm={this.confirm}
   ...
  />
</Modal>

//嵌入View。state控制
<View>
	{this.state.isPicker && <CascadePicker {...props}>}
</View>

Download Details:

Author: lexguy

Source Code: https://github.com/lexguy/react-native-slidepicker

#react #react-native #mobile-apps

A Picker Component used in React Native
2.15 GEEK