我可以在 React Native 中的 Picker 项的标签中使用多个或嵌套元素吗？

Posted 2023-02-25

【中文标题】我可以在 React Native 中的 Picker 项的标签中使用多个或嵌套元素吗？

【英文标题】：Can I use multiple or nested elements in the Label of a Picker Item in React Native?

【发布时间】：2017-09-15 12:04:37

【问题描述】：

我正在使用带有 NativeBase 的 React Native，并且希望我的 Picker 的标签比一个纯文本字符串更复杂。

但是是否甚至可以将元素作为标签传递，比如将多个子元素包裹在一个***元素中？

还是 Pickers 只支持纯文本作为标签？

---

应 bennygenel 的要求，这是我尝试过的一个版本：

export default class ThingPicker extends React.Component 

  render() 
    const 
      initialThing,
      things,
      onThingChanged,
     = this.props;

    const orderedThings = things.sort();

    return (
      <Picker
        selectedValue=initialThing
        onValueChange=onThingChanged>
        buildThingItems(orderedThings)
      </Picker>
    );
  


function buildThingItems(orderedThings) 
  let items = orderedThings.map(th => 
    const it = th === "BMD" ? (<Text key=th label="foo" value="bar">Hello</Text>)
    : (<Picker.Item key=th label=th value=th />);

    return it;
  );

【问题讨论】：

我认为您可以将任何组件作为子组件。你为什么不试试看？

您能否添加您尝试过的代码，以便我或其他人可以提供更好的帮助。

尝试将Text 组件作为Picker.Item 的子组件返回，这可能会起作用

@bennygenel：使它成为 Picker.Item 的子项不起作用，但将其分配给标签字段确实有效！我会把它作为答案发布。

太好了！我打算创建一个虚拟项目来测试它，但我想我现在不需要。

【参考方案1】：

是的！有可能，对于 React/JSX 代码来说，它可能看起来不太“正确”。只需创建您需要的元素并将它们分配给标签字段：

function buildThingItems(orderedThings) 
  let items = orderedThings.map(th => 
    const it = (<Picker.Item
      key=th
      label=currency === "BMD" ? (<Text>Hello</Text>) : th
      value=th />);

    return it;
  );