ReactNative FlatList 一次渲染所有项目? [英] ReactNative FlatList render all items at once?

问题描述

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

I'm using ReactNative's new List component - FlatList.

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

It seems like FlatList renders all items at once even though the cell isn't actually visible on the screen.

<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 个项目，似乎根据项目总数调用了渲染"警告.

Setting 30 items and seems like 'rendered' warning was called according to the total number of the items.

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

I thought FlatList is similar to the way RecycleView in Android works, render an item only when it's about to be visible on the screen.

我错过了什么吗?不会降低性能吗?
我希望它可以仅在项目即将显示时呈现它.

Am I missing something? Won't it decrease performance?
I wished it could render an item only when it's about to be shown.

推荐答案

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

Had the same issue in one of my Apps. It cost me a couple of hours to solve this Issue for me.

⇓⇓⇓

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

⇑⇑⇑

详细说明:

问题

与 Thread-Opener 相同，起初，我的 Flatlist 仅渲染我在 initialNumToRender 中定义的渲染量，但紧接着，应用程序开始渲染列表的其余部分.

Same as the Thread-Opener, at first, my Flatlist render only the amount of renders I defined in initialNumToRender, but immediately after that, the app starts to render the whole rest of the List.

环境

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

I use native-base.io as UI-Library and encapsulated the Content of the Screen with the Component

解决方案

我发现，原生基础组件 替换了 ScrollList.ScrollList 中的 FlatList 会将您带到奇怪的结果.当我用 <View> 替换给定 Screen 的 -Component 时，一切都按预期工作.

I've figured out, that native-base component <Content> replace ScrollList. A FlatList inside of a ScrollList will pipe you to strange results. As I replaced the -Component for the given Screen with an <View>, all things work like expected.

这篇关于ReactNative FlatList 一次渲染所有项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！