前端江太公

---

React Native，是一个混合移动应用开发框架，是目前流行的跨平台移动应用开发框架之一。React Native 采用不同的方法进行混合移动应用开发。它不会生成原生 UI 组件，而是基于 React，React Native 是一个用于构建基于 Web 的交互界面的 JavaScript 库，因此会有更丰富的 UI 体验效果，同时也能够很好地调用底层框架的UI使用。

React Native系列导航 01-React Native 基础教程 02-安装ReactNative 03-ReactNative目录结构 04-ReactNative视图View 05-ReactNative组件样式style 06-ReactNative文本组件Text 07-ReactNative组件状态state 08-ReactNative组件属性props 09-ReactNative输入组件TextInput 10-ReactNative图片组件Image 11-ReactNative活动指示器组件 12-ReactNative弹出框Alert 13-ReactNative存储数据组件AsyncStorage 14-ReactNative动画组件Animated 15-ReactNative开关组件Switch 16-状态栏组件StatusBar 17-ReactNative滚动视图ScrollView 18-ReactNative选择器Picker 19-ReactNative网络请求

React Native 选择器 Picker

如果要从多个 已知的选项 中选择一个，那么可以使用 React Native 内置的 选择器 ``。

选择器 `` 类似于 HTML 中的 select 标签 。

选择器 `` 默认显示如下

当被点击时显示如下

引入组件 import { Picker } from 'react-native' 使用语法 <Picker selectedValue = "male" onValueChange = {updateUser} > <Picker.Item label = "男" value = "male" /> <Picker.Item label = "女" value = "female" /> <Picker.Item label = "其它" value = "other" /> </Picker> 属性说明selectedValue用于设置默认的选中项目onValueChange用于设置选中项变更时的触发操作 onValueChange 属性

onValueChange 属性用于设置 `` 中的选项变更时触发的操作。

onValueChange 属性的触发的事件原型如下

function(itemValue,itemPosition) { // 具体的处理逻辑 } 参数说明itemValue选中项 `` 的 value 值itemPosition选中项 `` 的位置，第一个位置为 0 选项 ``

`` 用于设置每一个选项，使用语法如下

<Picker.Item label = "男" value = "male" /> 属性说明label用于设置显示出来的名称value用于设置选项的值 范例

下面的范例，当我们点击 请选择性别 时会弹出一个 `` 用于提供性别选择。

App.js import React, { Component } from 'react'; import { View, Text, Picker, StyleSheet } from 'react-native' class App extends Component { users = [ {label: '请选择性别',value:''}, {label: '男',value:'male'}, {label: '女',value:'female'}, {label: '其它',value:'other'} ] state = {user: ''} updateUser = (user) => { this.setState({ user: user }) } render() { return ( <View style={styles.container}> <Text style = {styles.label}>请选择性别</Text> <Picker selectedValue = {this.state.user} onValueChange = {this.updateUser}> { this.users.map((o,index) => <Picker.Item label={o.label} value = {o.value}/> ) } </Picker> <Text style = {styles.label}>你的选择是</Text> <Text style = {styles.text}>{this.state.user}</Text> </View> ) } } export default App const styles = StyleSheet.create({ container: { margin:50, }, label: { fontSize: 14, color:'#333333' }, text: { fontSize: 30, alignSelf: 'center', color: 'red' } }) color:'#333333' }, text: { fontSize: 30, alignSelf: 'center', color: 'red' } })

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。