React Native FlatList只渲染10个项目

Question

我正在尝试使用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。

- Mitch

---

如果我没错的话，keyExtractor={(item, index) => item.toString()} 的第一个参数(item)是获取到的 object，并且 item.toString() 将会是 '[object Object]'。尝试移除 keyExtractor 属性，因为你已经在 renderItem 中添加了 key 属性。 - ramki

@RamKrish2079 kyeExtractor 看起来没问题，参见 https://facebook.github.io/react-native/docs/using-a-listview - Mulli

React Native 版本？ - Santosh Sharma

@SantoshSharma 0.57.8，我编辑了这篇文章。 - Mitch

将视图更改为ScrollView。 - Arjun Jain

如果你将 View 更改为 ScrollView，它会起作用，但你会失去 FlatList 优化渲染的能力（并且会被黄色警告困扰）。看起来你的 CardImage 元素缺少一个 item 属性，请参考我的回答中的示例。 - therightstuff

Answer 1

您应该设置以下属性

initialNumToRender={50}

作为默认值，它是10。

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

- Santosh Sharma

---

你能添加源代码吗？ - Mukeyii

源代码已添加。@Mukeyii - Santosh Sharma

据我所见，文档中没有给出默认值。而且我认为在初始批处理中渲染50行对性能不利。 - Mukeyii

我已经做了这个，但现在它只显示50个。仍无法加载更多。理想情况下，我想一开始渲染10个，然后根据需要加载其余的内容。 - Mitch

@Mukeyii 在这里你可以找到默认值为10 https://reactnative.dev/docs/optimizing-flatlist-configuration - Thidasa Pankaja

这并没有回答问题，而且使FlatList的虚拟化功能完全无用。 - Sharcoux

Answer 2

问题出现在将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的解决方案也修复了这个问题。

- Hasan Hashem

---

太好了！这是正确的答案！ - undefined

Answer 3

将View更改为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>
);

- Arjun Jain

---

这样做将会削弱Flatlist的所有好处。 - shubhamkes

Answer 4

使用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评论。

希望这能帮到你！

- Akhilesh Agrahari

---

这与什么相关？ - Patryk Szylin

Answer 5

我曾经遇到过同样的问题，这些答案中唯一有效的是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>
);

- therightstuff

Answer 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在未渲染的字段处呈现空白... 真奇怪！

- MrMineToons