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

如何解决如何制作带有 2 列显示有限项目的 Flatlist 并在轮播中继续？

我有一个大约 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;

解决方法

你应该使用

onEndReached={this.retrieveMore}

在此处阅读更多信息：https://reactnative.dev/docs/flatlist#onendreached