时间戳

首页 > 解决方案 > 在 React Native 中，将所有图像分组到一个对象中对性能不利吗？

performance - 在 React Native 中，将所有图像分组到一个对象中对性能不利吗？

问题描述

我有一个包含一长串像这样的图像的文件

const images = {
  cities: {
    amsterdam: require('../assets/images/amsterdam.jpg'),
    ashford: require('../assets/images/ashford.jpg'),
    avignon: require('../assets/images/avignon.jpg'),
    brussels: require('../assets/images/brussels.jpg'),
    ...
  },
};

export default images;

然后我像这样在我的组件中导入一个

import images from './images';

const MyComp = () => (<Image source={images.city.amsterdam} />);

我想知道 React Native 将如何处理require以及它是否会影响应用程序的性能？

使用这样的东西会更好吗？：

const amsterdam = require('../assets/images/amsterdam.jpg')
const MyComp = () => (<Image source={amsterdam} />);

标签： performancereact-nativerequire

解决方案

我建议在需要时加载图像（如果您有很多图像，如您所说），而不是在组件加载时加载（意味着需要）所有图像。

为此，请保留一个带有文件名（和路径）的数组或对象。如果您使用 flatlist 来管理图像，它会为您完成大部分工作（在正确的时间加载正确的图像），因为您可以配置 flatlist 有多少项目（除了您在屏幕上看到的当前项目之外）加载。

然后创建一个加载所需图像的组件 - 为了获得最佳效果，将仍然加载的图像保留在缓存中。

我用这个策略得到了很好的结果。你也可以给予react-native-image-zoom-viewer或react-native-fast-image机会。

推荐阅读