Question

我正在尝试使用React Native，并且必须使用多个水平FlatLists图像呈现看似不复杂的页面。

看起来像这样：

render() {
    return (
        <View>
            <CustomImagesFlatListView data={data1} />
            <CustomImagesFlatListView data={data2} />
            <SomeOtherComponent />
            <CustomImagesFlatListView data={data3} />
        </View>
    );
}

但是我注意到，只要该页面（组件）被挂载（或加载），就会有一个非常明显的屏幕冻结，然后才能完全呈现组件并且UI才能正常运行。

我有什么遗漏/做错了或者这是预期的。总共至少有50个图像（从网上加载），但是使用FlatList它应该是延迟加载的，所以这种性能上的滞后很奇怪。

Answer 1

您可以通过不同方式改善表现。

首先，您可以使用缓存图像 https://github.com/kfiroo/react-native-cached-image（别忘了如果图像网址有，则添加一个长ttl和useQueryParamsInCacheKey PARAMS）
如果您知道图片尺寸或者您正在FlatList中显示一些内部带有图像的视图（并且视图的大小始终相同），您可以使用getItemLayout
在FlatLists中使用initialNumToRender
您检查了performance page吗？也许JS线程是“完整的”，应用程序必须执行多个操作。您可以使用InteractionManager和requestAnimationFrame来提高效果。

我在我的React Native应用程序中创建了一个ThreadHelper，性能比之前更好（快90％）。这是代码：

import {InteractionManager } from 'react-native';

export default class ThreadHelper{

    /**
    * Promise resolved as soon as the requestAnimationFrame goes on
    */
    nextFrame(){
        return new Promise((resolve, reject) => {
                requestAnimationFrame(() => {
                LOG.debug("ThreadHelper :: requestAnimationFrame");
                resolve();
            }); 
        })
    }


    runWhenThreadIsReady(callback){
        InteractionManager.runAfterInteractions(async () => {
            LOG.debug("ThreadHelper :: runAfterInteractions...");
            await this.nextFrame();
            callback();
        });
    }
}

您可以在组件中导入ThreadHelper，并在检索图像时调用：

this.threadHelper.runWhenThreadIsReady(() => {
   //your code here
   //For example getImagesFromEndpoint and then this.setState({images:Array});
});

在我的应用程序中，我有多个图像库，每个图像库超过100个图像，我可以快速显示它们。用户可以在不被阻止的情况下与页面进行交互。

对具有大量图像的视图执行本机渲染性能

1 个答案: