React-native之Picker控件（10）

一. 简介

本组件可以在iOS和Android上渲染原生的选择器（Picker）

二. 属性

• 该控件可以使用View控件的全部属性
• onValueChange function 某一项被选中时执行此回调。调用时带有如下参数：
  itemValue: 被选中项的value属性
  itemPosition: 被选中项在picker中的索引位置
• selectedValue any 可以是一个字符串或者一个数字，item所选中的值
• style pickerStyleType 该传入style样式，设置picker的样式风格
  以下属性只适合Android
• enabled boolean 如果设为false，则会禁用此选择器
• mode enum ('dialog','dropdown') 选择器模式。在Android平台上面，设置mode可以控制用户点击picker弹出的样式风格
  dialog（对话框形式）: 显示一个模态对话框。默认选项
  dropdown（下拉框形式）: 以选择器所在位置为锚点展开一个下拉框
• prompt
  设置选择器的提示字符串。在Android的对话框模式中用作对话框的标题
  以下属性只适合IOS
• itemStyle itemStylePropType 指定应用在每项标签上的样式

三. 示例

弹出框

class PickerDemo extends Component{ constructor(props){ super(props); this.state ={ language:null, }; } render(){ return(<View style={[styles.flex,{marginTop:45}]}> <Picker selectedValue={this.state.language} onValueChange={lang =>{this.setState({language:lang})}} mode='dialog'> <Picker.Item label='java' value='java'/> <Picker.Item label='javaScript' value='javaScript'/> <Picker.Item label='Php' value='Php'/> <Picker.Item label='Android' value='Android'/> <Picker.Item label='React-native' value='React-native'/> </Picker> <Text>您选择的是:{this.state.language}</Text> </View> ); } } const styles = StyleSheet.create({ flex:{ flex:1, } }); AppRegistry.registerComponent('PickerDemo',()=>PickerDemo);

Picker弹出框.png

带标题的弹出框

constructor(props){ super(props); this.state ={ language:null, }; } render(){ return( <View style={[styles.flex,{marginTop:45}]}> <Picker prompt='请选择操作语言' //带标题的弹出框 selectedValue={this.state.language} onValueChange={lang =>{this.setState({language:lang})}} mode="dialog"> //=> ES6语法 返回函数类型 <Picker.Item label='java' value='java'/> <Picker.Item label='javaScript' value='javaScript'/> <Picker.Item label='Php' value='Php'/> <Picker.Item label='Android' value='Android'/> <Picker.Item label='React-native' value='React-native'/> </Picker> <Text>您选择的是:{this.state.language}</Text> </View> );

Picker弹出框标题.png

下拉框

将mode改为'dropdown'

Picker下拉选择框.png

记录自己的RN学习之路，有什么不对的地方，一起讨论进步