Question

我正在使用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的工作方式，只有当它在屏幕上可见时才会呈现项目。

我错过了什么吗？它不会降低性能吗？我希望它只能在它即将展示时呈现一个项目。

Answer 1

我的一个应用中出现了相同的问题。为我解决这个问题花了几个小时。

⇓⇓⇓

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

⇑⇑⇑

详细说明：

问题

就像Thread-Opener一样，我的Flatlist首先对我在initialNumToRender中定义的渲染计数，但是立即开始渲染列表的其余部分。

环境

我将 native-base.io 用作UI库，并使用Component封装了屏幕内容

解决方案

我发现，本机基础组件<Content>替换了ScrollList。 ScrollList内的FlatList会将您引导到奇怪的结果。当我用<View>替换给定Screen的-Component时，所有工作都按预期进行。

Answer 2

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

为了限制内存并启用平滑滚动，内容将在屏幕外异步呈现。这意味着可以比填充率更快地滚动，并暂时看到空白内容。这是一个可以调整以适应每个应用程序需求的权衡，我们正在努力在幕后进行改进。

因此它不会立即渲染所有项目。

此外：

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

如果您需要更多详细信息，请与我们联系。

Answer 3

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

ReactNative FlatList一次渲染所有项目？

3 个答案: