React Native 选择器 Picker

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

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

选择器 `` 默认显示如下

React Native 选择器 Picker

当被点击时显示如下

React Native 选择器 Picker

引入组件

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

演示

Q.E.D.


悟已往之不谏,知来者之可追

江子辰,读书人,爱文学,软件工程理工男,IP浙江在职,从业五年。主攻前端方向技术研发,副攻Unity 3D、IOS客户端、Python人工智能等。2021年被评为华为云享专家,阿里云专家博主,前端领域优质创作者等,都是虚名。

新网站链接:https://jiangsihan.cn/frontend