React native: как сделать горизонтальную прокрутку, но данные разделены на 4 строки - PullRequest
Новая
       37

React native: как сделать горизонтальную прокрутку, но данные разделены на 4 строки

0 голосов
/ 10 января 2019

Мне нужно прокручивать свои элементы по горизонтали, но мои данные делятся на 4 строки, каждая строка содержит 4 элемента. , и я могу прокручивать по горизонтали, чтобы следующие 16 элементов появлялись на экране.

при использовании numColumns = {4} работает, если

горизонтальный = {ложь}

но с

горизонтальная = {истинно}

Я не могу указать атрибут numColumns.

Должен ли я использовать SectionList вместо FlatList?

и как это можно реализовать? 

let items = [
    { id: 1, title: '1', price: '20' },
    { id: 2, title: '2', price: '16' },
    { id: 3, title: '3', price: '92' },
    { id: 4, title: '4', price: '93' },
    { id: 5, title: '5', price: '20' },
    { id: 6, title: '6', price: '16' },
    { id: 7, title: '7', price: '92' },
    { id: 8, title: '8', price: '93' },
    { id: 9, title: 'Grilled Steak', price: '20' },
    { id: 10, title: 'Pappas', price: '16' },
    { id: 11, title: 'Ciccione', price: '92' },
    { id: 12, title: 'Gyros Melt', price: '93' },
    { id: 13, title: 'Grilled Steak', price: '20' },
    { id: 14, title: 'Pappas', price: '16' },
    { id: 15, title: 'Ciccione', price: '92' },
    { id: 16, title: 'Gyros Melt', price: '93' },
];

<FlatList
    keyExtractor={item => item.id}
    data={items}
    horizontal
    numColumns={4}
    renderItem={({ item }) => <Text>{item.title}</Text>}
/>

1 Ответ

0 голосов
/ 10 января 2019

К сожалению, FlatList не поддерживает количество столбцов в горизонтальном положении.

https://facebook.github.io/react-native/docs/flatlist#numcolumns

Несколько столбцов могут отображаться только при горизонтальном = {false} и будут зигзаг, как макет flexWrap. Все предметы должны быть одинаковой высоты - макеты кладки не поддерживаются.

Однако вы можете сгруппировать свои данные так, чтобы для каждой ячейки в горизонтальном FlatList отображались 4 элемента. 

let items = [
    [ { id: 1, title: '1', price: '20' },
    { id: 2, title: '2', price: '16' },
    { id: 3, title: '3', price: '92' },
    { id: 4, title: '4', price: '93' } ],
    [ { id: 5, title: '5', price: '20' },
    { id: 6, title: '6', price: '16' },
    { id: 7, title: '7', price: '92' },
    { id: 8, title: '8', price: '93' } ],
    [ { id: 9, title: 'Grilled Steak', price: '20' },
    { id: 10, title: 'Pappas', price: '16' },
    { id: 11, title: 'Ciccione', price: '92' },
    { id: 12, title: 'Gyros Melt', price: '93' } ],
    [ { id: 13, title: 'Grilled Steak', price: '20' },
    { id: 14, title: 'Pappas', price: '16' },
    { id: 15, title: 'Ciccione', price: '92' },
    { id: 16, title: 'Gyros Melt', price: '93' } ]
];

Затем обновите ваш renderItem, чтобы он обрабатывал увеличенный ввод, что-то вроде этого. 

 renderItem = ({item}) => {
   return item.map(i => <Text>{i.title}</Text>)
 }
...