如何使 iOS UIPicker 与多个列和标题反应原生？

Question

Let's pretend my problem is I want a user to be able to select an amount of apples, and an amount of pears, with one control. I see the picker in the "Timer" section of the clock app bundled with iOS, and I like it.

I want exactly that, except instead of three columns, I want two, and instead of "hours" and "min", I want "apples" and "pears".

So far, I'm able to put two pickers next to each other, which, while not curving the items towards each other slightly as if they were on the same wheel, is good enough for me for my columns problem for now. I'm as yet unable to put titles on the rows, though.

Here's what I have:

  render() {
    let PickerIOSItem = PickerIOS.Item
    return (
      <View style={styles.container}>
        <PickerIOS style={styles.column}>
          <PickerIOSItem value={1} label="0" />
          <PickerIOSItem value={2} label="1" />
          <PickerIOSItem value={3} label="2" />
          <PickerIOSItem value={4} label="3" />
          <PickerIOSItem value={5} label="4" />
        </PickerIOS>
        <PickerIOS style={styles.column}>
          <PickerIOSItem value={1} label="0" />
          <PickerIOSItem value={2} label="1" />
          <PickerIOSItem value={3} label="2" />
          <PickerIOSItem value={4} label="3" />
          <PickerIOSItem value={5} label="4" />
        </PickerIOS>
      </View>
    );
  }

styles.container has display: flex and flex-direction: row , and styles.column has width: 49% .

Answer 1

Wrap it in a <View> and use <Text> with flex:1 should work

<View style={{ display: 'flex', flexDirection: "row" }}>
  <View style={{ flex: 1, flexDirection: 'row',alignItems: 'center' }}>
    <PickerIOS style={{ flex: 1 }}>
      <PickerIOSItem value={1} label="0" />
      <PickerIOSItem value={2} label="1" />
      <PickerIOSItem value={3} label="2" />
      <PickerIOSItem value={4} label="3" />
      <PickerIOSItem value={5} label="4" />
    </PickerIOS>
    <Text>Apples</Text>
  </View>
  <View style={{ flex: 1, flexDirection: 'row',alignItems: 'center' }}>
    <PickerIOS style={{ flex: 1 }}>
      <PickerIOSItem value={1} label="0" />
      <PickerIOSItem value={2} label="1" />
      <PickerIOSItem value={3} label="2" />
      <PickerIOSItem value={4} label="3" />
      <PickerIOSItem value={5} label="4" />
    </PickerIOS>
    <Text>pears</Text>
  </View>
</View>

Output will be something like below

Though I have not focused on design, you can make it according to your need.

Answer 2

我最近制作了一个支持多列的跨平台“Wheel Picker”库： https : //www.npmjs.com/package/react-native-segmented-picker