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

Posted 2023-02-16

【中文标题】React Native：如何进行水平滚动但数据分为4行

【英文标题】：React native: How to make horizontal scroll but data is divided to 4 rows

【发布时间】：2019-06-05 11:13:21

【问题描述】：

我需要水平滚动我的项目，但我的数据分为 4 行，每行包含 4 个项目。我可以水平滚动，以便接下来的 16 个项目出现在屏幕上。

当使用 numColumns=4 时，如果

水平=假

但有

水平=true

我无法指定 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】：

我在相同的情况下遇到相同的问题。如果您有长数组，则制作组数据是一种非常糟糕的做法。所以我玩了flatlist的风格，我成功了。如果您可以利用它，以下是我的代码：

  <ScrollView showsHorizontalScrollIndicator=false horizontal=true style=styles.flatListContainer>
                  <FlatList
                    showsHorizontalScrollIndicator=false
                    data=item.items
                    numColumns=4
                    renderItem=_showData
                    columnWrapperStyle=styles.flatListColumnWraper
                    keyExtractor=(item) => item.key
                    style=styles.flatListDataContainer
                    scrollEnabled=false
                    contentContainerStyle=
                      styles.flatListContentContainerStyle
                    
                  />
                </ScrollView>


    flatListContainer: 
marginTop: height(2),
height:height(60),
paddingVertical:height(2)
 ,
flatListDataContainer: 
alignSelf: 'center',
,
 flatListContentContainerStyle: 
alignSelf: 'center',
flexDirection: 'row',
justifyContent: 'space-evenly',
,
flatListColumnWraper:
 flexDirection: 'column',
 ,

【参考方案2】：

不幸的是，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>)