0
点赞
收藏
分享

微信扫一扫

【Kevin Learn React Native】--> Picker

本组件可以在 iOS 和 Android 上渲染原生的选择器(Picker)。

属性

name

type

desc

platform

onValueChange

function

某一项被选中时执行此回调。调用时带有如下参数:itemValue: 被选中项的value属性。 itemPosition: 被选中项在picker中的索引位置

selectedValue

any

默认选中的值。可以是字符串或整数。

style

pickerStyleType

样式风格

enabled

bool

如果设为false,则会禁用此选择器。

Android

mode

enum(‘dialog’, ‘dropdown’)

在Android上,可以指定在用户点击选择器时,以怎样的形式呈现选项:‘dialog’: 显示一个模态对话框。默认选项。‘dropdown’: 以选择器所在位置为锚点展开一个下拉框。

Android

prompt

string

设置选择器的提示字符串。在Android的对话框模式中用作对话框的标题。

Android

itemStyle

​​text styles​​

指定应用在每项标签上的样式。

iOS

实例

逻辑代码:

import React, {Component} from 'react';
import {
StyleSheet,
Picker,
Text,
View
} from 'react-native';

export default class App extends Component {
state = {
sex:' ',
city : ' ',
}

render() {
return (
<View style={styles.container}>
<View style={styles.title_view}>
<Text style={styles.title_text}>
Picker
</Text>
</View>
<View style={styles.item_view}>
<Text>您性别是:</Text>
<Picker
style={styles.picker}
prompt = '性别'
mode = 'dropdown'
selectedValue = {this.state.sex}
onValueChange = {(value)=>{
this.onValueChange(1,value)
}}>
<Picker.Item
label = '男'
value = 'man'
/>

<Picker.Item
label = '女'
value = 'woman'
/>
</Picker>
</View>

<View style={styles.item_view}>
<Text>您所在的城市是:</Text>
<Picker
style={styles.picker}
prompt = 'Picker'
mode = 'dialog'
selectedValue = {this.state.city}
onValueChange = {(value)=>{
this.onValueChange(2,value)
}}>
<Picker.Item
label = '北京'
value = 'bj'
/>
<Picker.Item
label = '上海'
value = 'sh'
/>
<Picker.Item
label = '广州'
value = 'gz'
/>
<Picker.Item
label = '深圳'
value = 'sz'
/>
</Picker>
</View>
</View>
);
}

onValueChange = (flag,value) => {
if(flag ==1){
this.setState({sex:value});
}else{
this.setState({city:value});
}
};
}

const styles = StyleSheet.create({

container: {
flex: 1,
backgroundColor: 'white',
},
title_view:{
flexDirection:'row',
height:50,
justifyContent: 'center',
alignItems: 'center',
backgroundColor:'#27b5ee',
},
title_text: {
fontSize:20,
color:'white'
},
item_view: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
picker: {
width: 100,
},

instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});

效果图:
【Kevin Learn React Native】--> Picker_picker


举报

相关推荐

0 条评论