rn 选项框组件Picker

选项框组件

<Picker
	selectedValue={选项的value值}  //显示对应的label内容
	onValueChange={回调函数}  //回调函数参数是选项的value值
>
	{通过map等遍历的方式生成选项
		return <Picker.Item label={选项显示内容} value={选择后的value值}>
	}
<Picker/>

代码示例:

import React,{Component} from 'react'
import {View,Text,Picker,StyleSheet} from 'react-native'

export default 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>
                    <Text style={style.label}>请选择性别</Text>

                    <Picker 
                        // 选中的value值,显示对应的label内容
                        selectedValue={this.state.user}
                        //回调函数的参数是选项的value值
                        onValueChange={this.updateUser}
                    >
                        {/* 设置选项 */}
                        {
                            this.users.map((item,index)=>{
                               return <Picker.Item label={item.label} value={item.value}/>
                            })
                        }
                    
                    </Picker>

                    <Text style={style.label}>你的选择是</Text>
                    <Text style={style.text}>{this.state.user}</Text>
                </View>
            </>
        )
    }
}

const style=StyleSheet.create({
    label:{
        fontSize:14,
        color:'#333333'
    },
    text:{
        fontSize:14,
        alignItems:'center',
        color:'red'
    }
})