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

Question

让我们假设我的问题是我希望用户能够通过一个控件选择一定数量的苹果和一定数量的梨。我在 iOS 捆绑的时钟应用程序的“计时器”部分看到了选择器，我喜欢它。

我完全想要那个，除了不是三列，我想要两列，而不是“小时”和“分钟”，我想要“苹果”和“梨”。

到目前为止，我能够将两个选择器并排放置，虽然它们不会像在同一个轮子上那样略微弯曲物品，但对于我现在的列问题来说已经足够了。不过，我还无法在行上放置标题。

这是我所拥有的：

  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有display: flex和flex-direction: row，和styles.column了width: 49%。

Answer 1

将其包裹在 a 中并与 一起<View>使用应该可以<Text>flex:1

<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>

输出将类似于下面的内容

虽然我没有专注于设计，但是你可以根据你的需要来制作。