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

Question

我正在将 React Native 与 NativeBase 结合使用，我想让我的 Picker 的标签比只有一个纯文本字符串更复杂。

但是是否可以将元素作为标签传递，比如包含在单个顶级元素中的多个子元素？

或者选择器是否只支持纯文本作为标签？

应 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;
  });
}

Answer 1

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

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;
  });
}

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

Can I use multiple or nested elements in the Label of a Picker Item in React Native?

picker

react-native

native-base