Как использовать многоколесный подборщик на React Native Expo - PullRequest
Новая
       13

Как использовать многоколесный подборщик на React Native Expo

0 голосов
/ 26 октября 2018

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

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

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

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

1 Ответ

0 голосов
/ 30 декабря 2018

Вы правы по поводу реакции-нативного сборщика. Он использует нативные библиотеки, поэтому вы не можете использовать его с 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: (data, preselectedValue, verifyFunction)}

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

...