React Native将状态中的数组值应用为Picker项

jgl*_*nes 8 react-native react-native-android

我的state名字中有一个数组Categories.

这些是它的价值观:['Food', 'Home', 'Savings'].

我的目标是我需要将它们渲染Picker.items为我的用户选择.

怎么可能?

我尝试ListViewPicker对象内部使用,但是当我导航到该页面时,

AppName停止工作

提示.

Man*_*ngh 21

您不需要在选择器中使用listview

var options ={
    "1": "Home",
    "2": "Food",
    "3": "Car",
    "4": "Bank",
};

<Picker
    style={{your_style}}
    mode="dropdown"
    selectedValue={this.state.selected}
    onValueChange={()=>{}}>
    {Object.keys(options).map((key) => {
        return (<Picker.Item label={this.props.options[key]} value={key} key={key}/>) //if you have a bunch of keys value pair
    })}
</Picker>
Run Code Online (Sandbox Code Playgroud)

2)当你有一个值数组

var options =["Home","Savings","Car","GirlFriend"];

<Picker
    style={{your_style}}
    mode="dropdown"
    selectedValue={this.state.selected}
    onValueChange={()=>{}}> //add your function to handle picker state change
    {options.map((item, index) => {
        return (<Picker.Item label={item} value={index} key={index}/>) 
    })}
</Picker>
Run Code Online (Sandbox Code Playgroud)

  • 没关系,我只是将 &lt;Item/&gt; 更改为 &lt;Picker.Item /&gt;。之后警报就消失了。再次感谢好心先生。 (2认同)
  • 嗨兄弟,我不是“SIR”,只是像你一样的程序员。你可以用 Picker.Item 替换 Item 或检查 https://facebook.github.io/react-native/docs/picker.html 例如 (2认同)

Dmi*_*nal 8

纠正了几个语法错误

{options.map((item, index) => {
   return (< Picker.Item label={item} value={index} key={index} />);
})}   
Run Code Online (Sandbox Code Playgroud)