Как использовать средство выбора с несколькими колесами на react native expo

Я хочу использовать средство выбора нескольких колес, например эту библиотеку.

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

Но все такие библиотеки используют react-native link.

Есть какие-нибудь решения?

не могу понять, что вы хотите? react-native link свяжет всю библиотеку, которую вы добавили в свой пакет. вы должны запустить команду react-native link libraryname, чтобы связать определенную библиотеку. react-native link добавить код несколько раз в android. Поэтому старайтесь избегать общих команд и связывать конкретную библиотеку. вы должны использовать команду react-native link react-native-picker.

ChintaN -Maddy- Ramani 26.10.2018 08:08

Извините, я хочу использовать в приложении Expo, поэтому я не могу использовать react-native link.

tatane 26.10.2018 08:26

в качестве дополнительной заметки ссылка github.com/beefe/react-native-picker/tree/… не требует react-native link

virtualLast 29.03.2019 17:02
0
3
2 617
2

Ответы 2

Вы правы насчет 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)}

Надеюсь, что это поможет :)

Недавно я создал чистую реализацию JavaScript для iOS Wheel Picker, которая работает с Expo.

Он называется react-native-segmented-picker, и вы можете получить его отсюда: https://www.npmjs.com/package/react-native-segmented-picker

Другие вопросы по теме