移动跨平台框架ReactNative选择器Picker【18】

​​前端江太公​​

---

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'
   }
})