在React Native中，是否将所有图像分组到一个对性能不利的对象上？

Question

我的文件中包含大量此类图片

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} />);

Answer 1

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

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

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

我通过这种策略取得了不错的成绩。您也可以给react-native-image-zoom-viewer或react-native-fast-image一个机会。