Question

我想使用像lib这样的多轮选择器。

https://github.com/beefe/react-native-picker

但是，所有这些库都使用react-native link。

有什么解决办法吗？

Answer 1

您对“ react-native-picker”是正确的。它使用本机库，因此您不能在expo.io中使用它。

但是，您可以做的是创建一个函数（或模块或组件），给定一个数组数组，它将使拾取器并排呈现。这将产生单轮选择器的效果。

这里是一个例子。

const Pickers = {
  /**
 * data: Array of Arrays. Each inner array will contains the values for each picker i.e: [[1,2,3],[:], [1,2,3,4]]
 * preselectedValue: Array with value for each column i.e: [2, :, 2]
 * confirmFunction: the function that you will do something with the alternated values in picker.
 */
  multiColumnPicker: (data, preselectedValue, confirmFunction) => {
    let _bindArray = preselectedValue;

    return (
      <View style={{
        flex: 1,
        flexDirection: 'row'
      }}>{/* Use FLEX to position columns side-by-side*/}

        {data.map((column, columnIndex) => {
          {/* Iterate data. For each inner array we create a <Picker> */}
          {/*note: indexOf works only with the same type of elements. So, ensure that the element you are looking for
            has the same type inside the array. In this example I wanted a String.*/}
          let _innerIndex = column.indexOf('' + _bindArray[columnIndex]);
          {/* Return the <Picker>. onValueChange we handle the changes accordingly and call the confirmation function. */}
          return <Picker
            key={columnIndex}
            selectedValue={column[_innerIndex]}
            style={{
            flex: 1
          }}
            onValueChange={(itemValue, itemIndex) => {
            _innerIndex = itemIndex;
            _bindArray[columnIndex] = itemValue;
            confirmFunction(_bindArray);
          }}>
            {/* Creates the list of options */}
            {column.map((item, idx) => <Picker.Item key={idx} label={item} value={item}/>)}
          </Picker>
        })}
      </View>
    )
  }
}

module.exports = Pickers;

然后在您的View组件中的render（）中添加 {Pickers.multiColumnPicker :(数据，preselectedValue，confirmFunction）}

希望它会有所帮助:)

Answer 2

我最近创建了一个适用于Expo的iOS Wheel Picker的纯JavaScript实现。

它称为react-native-segmented-picker，您可以从这里获取它：https://www.npmjs.com/package/react-native-segmented-picker

如何在React Native Expo上使用多轮选择器

2 个答案: