React Native FlatList 仅渲染 10 个项目答案

【问题标题】：React Native FlatList only renders 10 itemsReact Native FlatList 仅渲染 10 个项目
【发布时间】：2019-01-22 06:14:59
【问题描述】：

我正在尝试显示一个包含 86 个项目的数据集的 FlatList，它只显示 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

【问题讨论】：

如果我没记错的话keyExtractor={(item, index) => item.toString()} 将object 作为第一个参数(item) 和item.toString() 将是'[object Object]'。尝试删除 keyExtractor 道具，因为您已经在 renderItem 中添加了 key 道具
@RamKrish2079 kyeExtractor 似乎还可以，请参阅facebook.github.io/react-native/docs/using-a-listview
反应原生版本？
@SantoshSharma 0.57.8，我编辑了帖子
将视图更改为滚动视图

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

【解决方案1】：

你应该设置以下属性

initialNumToRender={50}

默认为10

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

【讨论】：

你能把源添加到这里吗？
来源已添加。 @Mukeyii
据我所知，文档中没有给出默认值。而且我不认为在初始批次中渲染 50 行对性能有好处。
我这样做了，但现在它只显示 50。仍然不会加载更多。理想情况下，我想先渲染 10，然后根据需要加载其余部分。
@Mukeyii 在这里你可以找到默认值为 10 reactnative.dev/docs/optimizing-flatlist-configuration

【解决方案2】：

将视图更改为滚动视图

更新代码：

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>
);

【讨论】：

【解决方案3】：

使用 initialNumToRender 不是一个合适的解决方案。它会影响处理，因为整个列表由flatList 呈现。如果您在项目中的任何位置使用动画，则可以在 Animated.timing() 中添加 isInteraction: false 参数例如-

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

更多信息，您可以在 react-native 项目的问题中查看this 评论。

希望对您有所帮助！

【讨论】：

这有什么关系？？

【解决方案4】：

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

经过大量的摆弄，结果发现我的代码中缺少的是渲染元素（在本例中为CardImage，在我的情况下为ListItem）只需要一个item 属性：

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

【讨论】：

【解决方案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 解决方案解决了这个问题。

【讨论】：

【解决方案6】：

我以不同的方式解决了我的问题，也许它可以帮助某人......

对我来说，设置initialNumToRender={50} 并没有解决所有问题，反而引发了另一个问题。

要修复它，就我而言，我有：

    renderItem({ item }) {
    return <MyButton 
      key={String(item._id)}
      ... other props
    />

在 MyButton 的样式中，我有作为容器样式：

flex: 1
height: 68px;
padding-right: 10px;
margin-top: 15px;
flex-direction: row;

所以我把它改成了：

height: 68px;
padding-right: 10px;
margin-top: 15px;
flex-direction: row;

它已修复！ flex: 1，导致 FlatList 为未呈现的字段呈现空白空间......奇怪！

【讨论】：