rn 选项框组件Picker

￡神魔★判官ぃ 2021-07-24 14:26 661阅读 0赞

选项框组件
    
    <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'
        }
    })