ReactNative FlatList 一次渲染所有项目？

Question

我正在使用 ReactNative 的新列表组件 - FlatList。

似乎 FlatList 一次呈现所有项目，即使单元格在屏幕上实际上不可见。

<FlatList data={this.props.items} 
          keyExtractor={(item, index) => generateKey()}
         renderItem={this.renderStrip}/>

 renderItem = ({item}) => { 
   console.warn('rendered!');
   return <View style={{height:200, height: 100}} />
}

设置了30个项目，好像'rendered'根据项目的总数调用了警告。

我认为 FlatList 类似于 Android 中 RecycleView 的工作方式，只有当项目即将在屏幕上可见时才渲染项目。

我错过了什么吗？它不会降低性能吗？
我希望它只在项目即将显示时才渲染它。

Answer 1

一样。在文档中，您可以找到以下内容：

In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate ands momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application, and we are working on improving it behind the scenes.

所以它不会一次呈现所有项目。

此外：

This is a PureComponent which means that it will not re-render if props remain shallow- equal. Make sure that everything your renderItem function depends on is passed as a prop (e.g. extraData) that is not === after updates, otherwise your UI may not update on changes. This includes the data prop and parent component state.

如果您需要更多详细信息，请告诉我。

Answer 2

FlatList 提前呈现太多项目以获得更好的填充率。我们有类似的问题。我们构建 RecyclerListView 来解决此类问题。与 RecyclerView 非常相似，但它只是 JS。它比 FlatList 更快，并且在 Flipkart 上经过了实战测试。你可以试试。

Link: https://github.com/Flipkart/ReactEssentials

您可以在此处阅读更多相关信息：https://medium.com/@naqvitalha/recyclerlistview-high-performance-listview-for-react-native-and-web-e368d6f0d7ef

Answer 3

我的一个应用程序遇到了同样的问题。我花了几个小时才解决这个问题。

⇓⇓⇓

TDLR; Check out, that you don't nest your FlatList in a ScrollList (or other kind of lists).

⇑⇑⇑

详细说明：

问题

与 Thread-Opener 一样，起初，我的 Flatlist 只渲染我在 initialNumToRender 中定义的渲染数量，但紧接着，应用程序开始渲染整个列表的其余部分。

环境

我使用 native-base.io 作为 UI-Library 并用组件

封装了屏幕的内容

解决方案

我发现，基于本机的组件 <Content> 取代了 ScrollList。 ScrollList 中的 FlatList 会让你得到奇怪的结果。当我用 <View> 替换给定屏幕的 -Component 时，所有事情都按预期进行。

ReactNative FlatList 一次渲染所有项目？

ReactNative FlatList render all items at once?

react-native

react-native-flatlist