Question

我正在尝试显示一个FlatList，其中包含86个项目的数据集，它仅显示10个项目，并且不会加载更多内容。

我尝试通过样式弄乱容器的大小，但无济于事。

return (
  <View>
    <Text>{this.state.cards.length}</Text>
    <FlatList
      data={this.state.cards}
      renderItem={(theInfo) => <CardImage key={theInfo.key} info={theInfo}/>}
      keyExtractor={(item, index) => item.toString()}
    />
  </View>
);

我希望它显示86个项目（this.state.cards.length显示86个项目），应用程序仅显示10个项目，并且不会加载更多项目。

编辑：rn版本0.57.8

Answer 1

您应该设置以下属性

EventsObj.OnStartupComplete

默认值为10

来源： https://facebook.github.io/react-native/docs/flatlist#initialnumtorender

Answer 2

使用initialNumToRender并不是解决此问题的合适方法。由于整个列表由flatList呈现，因此会影响处理。如果您要在项目中的任何地方使用动画，则可以在isInteraction: false中添加Animated.timing()参数例如-

Animated.timing(
    this.spinValue,
    {
      toValue: -1,
      duration: 4000,
      easing: Easing.linear,
      isInteraction: false
    }
  ).start( ()=> this.spin() )

有关更多信息，您可以在本机项目问题中看到this条评论。

希望这对您有帮助！

Answer 3

将视图更改为ScrollView

更新代码：

return (
  <ScrollView>
    <Text>{this.state.cards.length}</Text>
    <FlatList
      data={this.state.cards}
      renderItem={(theInfo) => <CardImage key={theInfo.key} info={theInfo}/>}
      keyExtractor={(item, index) => item.toString()}
    />
  </ScrollView>
);

Answer 4

我一直在为同样的问题苦苦挣扎，这些答案中唯一有效的是 Arjun Jain's，但是当您这样做时，FlatList 无法再确定要呈现的正确项目数，并且不再有效（就我而言，项目列表有 2000 多个条目，所以这很重要）。

经过大量的摆弄之后，我的代码中缺少的是渲染元素（在本例中为 CardImage，在我这里为 ListItem）只需要一个 {{1 }} 属性：

item

Answer 5

将 React Native 从版本 62 更新到 64 后出现此问题。我的解决方案是在没有要显示的元素时隐藏 FlatList。

return (
  <View>
   <Text>{this.state.cards.length}</Text>
   {this.state.cards.length > 0 &&
   <FlatList
     data={this.state.cards}
     renderItem={(theInfo) => <CardImage key={theInfo.key} info={theInfo}/>}
     keyExtractor={(item, index) => item.toString()}
   />
   }
  </View>
);

还有 Arjun Jain's 解决方案解决了这个问题。

React Native FlatList仅渲染10个项目

5 个答案: