PickerView 选择器视图

PickerView 选择器视图

简介

PickerView是一个多选一的容器视图.

请务必给PickerView指定一个宽高,否则无法渲染.

何时使用

PickerView常用在时间选择,日期选择等组件里, 例如硬件定时设置界面

代码演示

基础选择器

1个PickerView即代表一个选择器

PickerView中, selectedValue代表当前选中的值,onValueChange是值滑动改变后的回调函数

import _ from 'lodash';
import React, { Component } from 'react';
import {
View,
StyleSheet,
Text,
} from 'react-native';
import { PickerView } 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>
<PickerView
style={[styles.picker]}
itemStyle={styles.pickerItem}
selectedValue={this.state.value}
onValueChange={this._handleChange}
>
{this.state.languages.map(value => (
<PickerView.Item key={value} value={value} label={value} />
))}
</PickerView>
</View>
);
}

renderPlayground = () => {
return (
<View />
);
}

render() {
return (
<ExplorerLayout
renderContent={this.renderContent}
renderPlayground={this.renderPlayground}
/>
);
}
}

效果图:

时间选择器

最常用的就是时间选择器,每个选择都是一个PickerView, 这里实现的是一个12小时制的时间选择器, 所以需要3个PickerView

import _ from 'lodash';
import React, { Component } from 'react';
import {
View,
StyleSheet,
} from 'react-native';
import { PickerView } 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}>
<PickerView
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} />
))}
</PickerView>
<PickerView
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} />
))}
</PickerView>
<PickerView
style={[styles.picker, styles.pickerRight]}
itemStyle={styles.pickerItem}
selectedValue={this.state.minute}
onValueChange={this._handleChange('minute')}
>
{this.minutes.map(value => (
<PickerView.Item key={value} value={value} label={value} />
))}
</PickerView>
</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}
/>
);
}
}

效果图:

PickerView API

iOSPickerView使用的是PickerIOS, PickerIOS文档

安卓上的API继承自ViewProptypes, ViewProptypes文档

itemTextColor

Picker选项的文字颜色

类型(Type) 必传(Required) 默认值(Default) 平台(OS)
ColorPropType '#cccccc' Android

selectedItemTextColor

Picker选项选中的文字颜色

类型(Type) 必传(Required) 默认值(Default) 平台(OS)
ColorPropType 'black' Android

dividerColor

Picker选项分割线颜色

类型(Type) 必传(Required) 默认值(Default) 平台(OS)
ColorPropType '#cccccc' Android

visibleItemCount

Picker可视区域项目个数

类型(Type) 必传(Required) 默认值(Default) 平台(OS)
number 8 Android

itemAlign

Picker项目对齐方式

类型(Type) 必传(Required) 默认值(Default) 平台(OS)
string 'center' Android

textSize

Picker项目文字大小

类型(Type) 必传(Required) 默认值(Default) 平台(OS)
number 20 Android

children

PickerView的子元素

类型(Type) 必传(Required) 默认值(Default) 平台(OS)
PropTypes.node undefined all

PickerView.Item API

value

Picker Item的值

类型(Type) 必传(Required) 默认值(Default) 平台(OS)
string, number undefined all

label

Picker Item的标签说明, 也就是展示给用户看的

类型(Type) 必传(Required) 默认值(Default) 平台(OS)
string undefined all
400-881-8611