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

问题

I'm using React Native with NativeBase and would like to make the labels of my Picker more complicated than just one plain string of text.

But is it even possible to pass elements as the label, say multiple child elements wrapped in a single top-level element?

Or do Pickers only support plain text as labels?

---

As requested by bennygenel, here's a version of what I've tried:

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

回答1:

Yes! It is possible, it just might not look very "right" for React/JSX code. Just create the elements you need and assign them to the label field:

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

来源：https://stackoverflow.com/questions/46239159/can-i-use-multiple-or-nested-elements-in-the-label-of-a-picker-item-in-react-nat