Как создать горизонтальный список выбора в React Native, какой-нибудь лучший пакет для этого?

Question

Я занимаюсь разработкой мобильного приложения на реагирующем языке. Требуется горизонтальный список выбора на экране (извините, я не могу найти название компонента).

Дизайн страницы:

На изображении, после цены, в слоте «Единица» и «Время» есть поле выбора, например, пользователь может выбрать только один блок с этим дизайном по горизонтали. Как этого добиться.

Я не имею ни малейшего представления, как этого достичь, сообщите мне, если есть какой-то пакет для этого, или есть ли способ, которым я могу этого достичь?

Обновление: Я достиг макета, используя FlatList в реагировать нативно. Теперь, как добиться единственной функции выбора. Это мой Flatlist

<FlatList
                        horizontal={true}
                        data={this.qtyList}
                        keyExtractor={item => item.id.toString()}
                        showsHorizontalScrollIndicator={false}
                        renderItem={({ item }) => (
                                <TouchableHighlight 
                                onPress={() => {
                                    this.props.qtyListSelector(item.id)
                                }}
                                >
                                <Card
                                containerStyle={{  borderRadius: 5 }}
                                >
                                <Text>
                                {item.qty}
                                </Text>
                                </Card>
                            </TouchableHighlight>
                        )}
                    />

Я использую Redux для получения значения карты, к которой прикоснулись. Теперь мне нужно изменить цвет и выделить выбранную пользователем карту, как на приведенном выше примере изображения. Я думаю, что это можно сделать, используя состояние уровня компонента. Пожалуйста, руководствуйтесь, не могу понять, как я начинаю

Answer 1

Если горизонтальное решение Flatlist у вас не работает, у меня был хороший опыт использования https://www.npmjs.com/package/swiper.

Answer 2

Это может быть достигнуто без какой-либо внешней библиотеки, или вы можете использовать реагировать родной swiper, но эта библиотека имеет некоторые проблемы, когда дело доходит до выбора. Подход, который вы можете использовать без какой-либо библиотеки:

state = {
   data: [
     { key: '1', name: 'mark', selected: false },
     { key: '2', name: 'john', selected: false }
   ],
   selectedItem: null
}

...

<FlatList 
   horizontal={true}
   data={this.state.data} 
   extraData={this.state.selectedItem}
   renderItem={this.renderItem}
/>

Вам нужны дополнительные данные, чтобы ваш FlatList повторно отображался при нажатии на отдельный элемент. Теперь внутри вашего метода renderItem вы можете просто использовать что-то вроде

renderItem =({item, index}) => {

  return (
  <TouchableOpacity 
   onPress={() => {
   // I wrote it like this so you could understand.
   // first get your previous array
   const tempArray = this.state.data;
   // If you want single selection, add the code I wrote in the end 
   here.
   // second change the selected value of this item
   tempArray[index].selected = true;
   // update the state
   this.setState({ data: tempArray, selectedItem: item });
   // here selected Item is not used, but you might need it in future purpose.
}}
   style={{ backgroundColor: item.selected ? 'orange' : 'white' }}>
  </TouchableOpacity>
);
}

При таком подходе будут выбраны несколько элементов ... Если вы хотите отменить выбор предыдущего. затем вам нужно отобразить предыдущий массив или использовать состояние selectedItem, чтобы найти элемент с помощью метода findIndex для массивов (вам нужно реализовать его внутри onPress) для карты, простой пример будет

const tempArray = tempArray.map((singleItem) => {...singleItem, selected: false }) );

ПРИМЕЧАНИЕ. Я написал этот код только здесь, поэтому в нем могут быть некоторые ошибки. Пожалуйста, дайте мне знать, если таковые имеются.

Answer 3

Вы можете использовать FlatList с горизонтальным значением true.

<FlatList horizontal={true}/>

А также по этой ссылке вы можете найти горизонтальное использование FlatList. Это может дать вам начальную точку.

https://streetsmartdev.com/create-horizontal-list-react-native/