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
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" ;
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>
);
}
}
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 |
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.
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>
);
}
}
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 Modal
either 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>
Author: lexguy
Source Code: https://github.com/lexguy/react-native-slidepicker
#react #react-native #mobile-apps