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

Question

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

使用 numColumns={4} 时，如果

水平={假}

但与

水平={真}

我无法指定 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>}
/>

Answer 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',
 },

Answer 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>)
 }