PickerView

Last Updated on : 2023-10-12 08:00:21download

Overview

PickerView is a container view that you can choose one from multiple selections. It is usually used in combination with components such as time selection and date selection.

Note: you must specify width and height values for PickerView, otherwise rendering will not work.

Code demo

Note: for more information, see Demo.

Basic selector

One PickerView represents one selector. In the PickerView, selectedValue represents the currently selected value, and onValueChange is the callback function after value changes by sliding.

import _ from "lodash"; import React, { Component } from "react"; import { View, StyleSheet, Text } from "react-native"; import { Picker } from "tuya-panel-kit"; import ExplorerLayout from "../../components/ExplorerLayout"; export default class PickerViewScene extends Component { constructor(props) { super(props); this.state = { languages: ["clojure", "elixir", "haskell", "scala"], value: "elixir", }; } _handleChange = (value) => { this.setState({ value }); console.log(value); }; renderContent = () => { return ( <View style={styles.pickerContainer}> <Text style={styles.tip}>Please Choose Your Favorite Language:</Text> <Picker style={[styles.picker]} itemStyle={styles.pickerItem} selectedValue={this.state.value} onValueChange={this._handleChange} > {this.state.languages.map((value) => ( <Picker.Item key={value} value={value} label={value} /> ))} </Picker> </View> ); }; renderPlayground = () => { return <View />; }; render() { return ( <ExplorerLayout renderContent={this.renderContent} renderPlayground={this.renderPlayground} /> ); } }

Time selector

The time picker is the most commonly used scene of PickerView, and each selection is a PickerView. The example below implements a 12-hour time selector, which requires 3 PickerViews.

import _ from "lodash"; import React, { Component } from "react"; import { View, StyleSheet } from "react-native"; import { Picker } from "tuya-panel-kit"; import ExplorerLayout from "../components/ExplorerLayout"; import ControlNumber from "../components/ControlNumber"; export default class PickerViewScene extends Component { constructor(props) { super(props); this.hours = _.times(12, (n) => _.padStart(n === 0 ? 12 : n, 2, "0")); this.minutes = _.times(60, (n) => _.padStart(n, 2, "0")); this.state = { amPm: "AM", hour: "12", minute: "00", }; } _handleChange = (key) => (value) => { const v = typeof value === "number" ? _.padStart(value, 2, "0") : value; this.setState({ [key]: v }); }; renderContent = () => { return ( <View style={styles.pickerContainer}> <Picker style={[styles.picker, styles.pickerLeft]} itemStyle={styles.pickerItem} selectedValue={this.state.amPm} onValueChange={this._handleChange("amPm")} > {["AM", "PM"].map((value) => ( <PickerView.Item key={value} value={value} label={value} /> ))} </Picker> <Picker style={[styles.picker, styles.pickerMiddle]} itemStyle={styles.pickerItem} selectedValue={this.state.hour} onValueChange={this._handleChange("hour")} > {this.hours.map((value) => ( <PickerView.Item key={value} value={value} label={value} /> ))} </Picker> <Picker style={[styles.picker, styles.pickerRight]} itemStyle={styles.pickerItem} selectedValue={this.state.minute} onValueChange={this._handleChange("minute")} > {this.minutes.map((value) => ( <Picker.Item key={value} value={value} label={value} /> ))} </Picker> </View> ); }; renderPlayground = () => { return ( <View> <ControlNumber min={1} max={12} title="hour" value={+this.state.hour} stepValue={1} onChange={this._handleChange("hour")} onComplete={this._handleChange("hour")} /> <ControlNumber min={0} max={59} title="minute" value={+this.state.minute} stepValue={1} onChange={this._handleChange("minute")} onComplete={this._handleChange("minute")} /> </View> ); }; render() { return ( <ExplorerLayout renderContent={this.renderContent} renderPlayground={this.renderPlayground} /> ); } }

Picker API

  • PickerView uses PickerIOS on iOS system. For more information, see PickerIOS.
  • The API on the Android system inherits from ViewPropTypes. For more information, see ViewPropTypes.

itemTextColor

The text color of the Picker option.

Type Required Default value Operating system
ColorPropType No '#cccccc' Android

selectedItemTextColor

The color of the text selected by the Picker option.

Type Required Default value Operating system
ColorPropType No 'black' Android

dividerColor

Divider color of the Picker option.

Type Required Default value Operating system
ColorPropType No '#cccccc' Android

visibleItemCount

The number of items in the visible area of Picker.

Type Required Default value Operating system
number No 8 Android

itemAlign

Alignment method of items of Picker.

Type Required Default value Operating system
string No 'center' Android

textSize

Text size of items of Picker.

Type Required Default value Operating system
number No 20 Android

loop

Whether to simulate an endless loop of PickerItem.

Type Required Default value Operating system
bool No false all

children

PickerView child element.

Type Required Default value Operating system
PropTypes.node Yes undefined all

Picker.Item API

value

Picker.Item value.

Type Required Default value Operating system
string, number No undefined all

label

Picker.Item label description.

Type Required Default value Operating system
string No undefined all