如何制作具有 2 列显示有限项目的 Flatlist 并在轮播中继续？答案

【问题标题】：How can I make Flatlist with 2 column display limited items and continue in a carousel?如何制作具有 2 列显示有限项目的 Flatlist 并在轮播中继续？
【发布时间】：2021-07-01 23:21:14
【问题描述】：

我有一个大约 28 个项目的列表，我将它分成 2 列，它工作正常，但现在我只想显示前 10 个项目，接下来的 10 个将在轮播的第二页中。我试过无济于事。我需要帮助。

这是代码的较短版本。

function CategoriesScreen(props) {
  const CATE = [
    {Item: "1"},
    {Item: "2"},
    ...
    {Item: "28"},

  ];


  return (
    <Screen>
      <View style={{ paddingTop: 30 }}>
        <FlatList
          style={{ margin: 5 }}
          data={CATE}
          numColumns={2}
          initialNumToRender={10}
          maxToRenderPerBatch={10}
          enableEmptySections={true}
          keyExtractor={(item, index) => item.id}
          contentContainerStyle={{ paddingVertical: 20 }}
          renderItem={({ item }) => (
            <View style={styles.card}>
              ...display items
            </View>
          )}
        />
      </View>
    </Screen>
  );
}
export default CategoriesScreen;

【问题讨论】：

标签： reactjs react-native carousel react-native-flatlist

【解决方案1】：

你应该使用

onEndReached={this.retrieveMore}

在这里阅读更多：https://reactnative.dev/docs/flatlist#onendreached

【讨论】：