16

我正在使用 ReactNative 的新 List 组件 - 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 个项目，似乎根据项目的总数调用了“渲染”警告。

我认为 FlatList 类似于 Android 中的 RecycleView 的工作方式，仅在项目即将在屏幕上可见时才呈现项目。

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

4

3 回答 3

15

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

⇓⇓⇓</p>

TDLR; 检查一下，您没有将 FlatList 嵌套在 ScrollList（或其他类型的列表）中。

⇑⇑⇑</p>

详细说明：

问题

与 Thread-Opener 相同，起初，我的 Flatlist 仅渲染我在 中定义的渲染数量initialNumToRender，但在那之后，应用程序立即开始渲染整个列表的其余部分。

环境

我使用native-base.io作为 UI-Library 并用组件封装了屏幕的内容

解决方案

我想通了，本机基础组件<Content>取代了 ScrollList。ScrollList 中的 FlatList 会将您传送到奇怪的结果。当我用 替换给定 Screen 的 -Component 时<View>，所有事情都按预期工作。

于 2019-02-04T08:45:21.987 回答
0

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

链接：https ://github.com/Flipkart/ReactEssentials

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

于 2017-10-05T13:41:13.743 回答
-1

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

为了限制内存并实现平滑滚动，内容在屏幕外异步呈现。这意味着滚动速度可能快于填充率，并且会暂时看到空白内容。这是一种权衡，可以根据每个应用程序的需求进行调整，我们正在努力在幕后对其进行改进。

所以它不会一次渲染所有项目。

此外：

这是一个 PureComponent，这意味着如果 props 保持浅相等，它将不会重新渲染。确保您的 renderItem 函数所依赖的所有内容都作为更新后不 === 的 prop（例如 extraData）传递，否则您的 UI 可能不会在更改时更新。这包括数据道具和父组件状态。

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

于 2017-08-10T11:21:42.777 回答