React native picker Itemsource

Question

我在反应原生中使用React本机选择器。 而不是为每个Item提供Picker.Item。我想将bind数组作为Pource的Itemsource。

我的数组用户 - [“”100-1887-123“，”1231-123-123]

<Picker selectedValue = {this.state.user} onValueChange = {this.updateUser}>
           <Picker.Item label = "Steve" value = "steve" />
           <Picker.Item label = "Ellen" value = "ellen" />
           <Picker.Item label = "Maria" value = "maria" />
</Picker>

在选择/值更改时，我想获取所选项目的值。 请告诉我如何实现此功能。

Answer 1

简单，只需映射数组。

npm

Answer 2

我认为你正在寻找这个：

在itemsource

中定义您的constructor

constructor(props){
    super(props);
    this.state = {
        itemsource: [
            { label: 'Steve', value: 'steve' },
            { label: 'Ellen', value: 'ellen' },
            { label: 'Maria', value: 'maria' }
        ],
        user: 'ellen'
    }
}

循环itemsource和render

renderPicker(){
    let itemsource = this.state.itemsource.map((item, i) =>  <Picker.Item key={i} label={item.label} value={item.value}/>);
    return(
        <Picker selectedValue = {this.state.user} onValueChange = {this.updateUser.bind(this)}>
            {itemsource}
        </Picker>
    );
}

render(){

    return(
        <View>
            {this.renderPicker()}
        </View>
    )
}

并更新

updateUser(user){
    this.setState({user});
}