如何使 iOS UIPicker 与多个列和标题做出本机反应？

Posted 2023-02-25

【中文标题】如何使 iOS UIPicker 与多个列和标题做出本机反应？

【英文标题】：How do I make an iOS UIPicker in react native with multiple columns and titles?

【发布时间】：2019-04-08 21:20:06

【问题描述】：

假设我的问题是我希望用户能够通过一个控件选择一定数量的苹果和一定数量的梨。我在与 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%。

【参考方案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>

输出如下所示

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

【参考方案2】：

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