React native：如何进行水平滚动，但数据分为4行

Posted 2021-05-06

我需要水平滚动我的项目，但我的数据被分成4行，每行包含4个项目。我可以水平滚动，以便下一个16项进入屏幕。

当使用numColumns = {4}时，它会起作用

水平= {FALSE}

但随着

水平= {TRUE}

我无法指定numColumns attr。

我应该使用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>}
/>

答案

不幸的是，FlatList在水平时不支持多个列。

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

多列只能使用horizo​​ntal = {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>)
 }