从 React-Native 选择器渲染选择器项目以填充下拉菜单选择

Question

我成功地使用 react-native 选择器在我的一个组件中呈现下拉菜单。现在，在选择器代码中，我正在对用于填充下拉菜单项的值进行硬编码。我最想做的是将它们作为 props 传入，并让它们在 picker 中根据需要动态生成尽可能多的项目。不过，我不确定该怎么做。我尝试使用 for 循环，但我不能运行在组件代码本身中使用那种条件逻辑。这就是硬编码值的样子。

export const DropDownMenu = (props) => {
  const [selectedValue, setSelectedValue] = useState(null);
  return (
    <View style={styles.container}>
      <Picker
        selectedValue={selectedValue}
        style={{ height: 50, width: 150 }}
        onValueChange={(itemValue, itemIndex) => {
          props.onSelectMenuValue(itemValue), 
          setSelectedValue(itemValue)
        }}
      >
        <Picker.Item label="A" value="a" />
        <Picker.Item label="B" value="b" />
        <Picker.Item label="C" value="c" />
      </Picker>
    </View>
  );
}

如何根据传入的 props 渲染 Picker.Item 值？

Answer 1

您可以将 options 道具作为对象数组传递给 label 和 value 属性并像这样使用 map：

<Picker /*whatever you need for picker here*/>
{props.options.map(option => <Picker.Item label={option.label} value={option.value}/>)}
</Picker>

从 React-Native 选择器渲染选择器项目以填充下拉菜单选择

Render Picker Items from React-Native picker to populate drop-menu selections

reactjs

react-native-picker