如何使 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

將它包裹在<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>

輸出將如下所示

雖然我沒有專注於設計，但您可以根據需要進行設計。

Answer 2

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