ios - 如何制作具有多个列和标题的原生 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 具有宽度:49%。

Answer 1

将其包裹在 <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>

输出如下所示

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