React Native 选择器 Picker

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

选择器 <Picker> 类似于 HTML 中的 select 标签

选择器 <Picker> 默认显示如下

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 属性用于设置 <Picker> 中的选项变更时触发的操作。

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

function(itemValue,itemPosition) {
// 具体的处理逻辑
}
参数 说明
itemValue 选中项 <Picker.Item>value
itemPosition 选中项 <Picker.Item> 的位置,第一个位置为 0

选项 <Picker.Item>

<Picker.Item> 用于设置每一个选项,使用语法如下

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

范例

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

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

演示效果如下

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.