如何在 ES6、React Native、CommonJS 中正确要求图像

Question

我的应用程序中到处都使用了一些图像。想象一下用户的默认头像，例如按钮图标等。

我阅读了 React 文档，但他们没有详细介绍 require 使用很多图像的更好方法。

https://facebook.github.io/react-native/docs/images

我的应用程序结构如下

...
./assets/images/like.png
./assets/images/default-avatar.png
./components/Newsfeed.js
./components/Home.js
...

我在 render() 函数的主体中使用 require 就像这样。但是我注意到图片需要很长时间才能加载。

render() {
  ...
  posts && posts.map(post => <Post likeUrl={require('../assets/images/like.png')}>)
  ...
}

我正在试验，所以我将 require 移到了顶部，然后在我的 Newsfeed.js 和 Home.js 中进行了重构。这些组件加载时确实有明显的改进。

...

const LIKE = require('../assets/images/like.png')

export class Newsfeed extends Component {
  render() {
    ...
    posts && posts.map(post => <Post likeUrl={LIKE}>)
    ...
  }
}

我想知道是否有构建项目的方法，这样我就不必在多个地方require。

奖励积分：

requireing 会像我怀疑的那样更高效吗？还是我只是在想象。
如果是这样，将这些图像导入一个集中的位置，使它们可以导出，然后将它们导入另一个文件以供使用的好方法是什么？

提前致谢！

Answer 1

如果我想在我的应用程序中多次使用一个图像，那么我会这样做。

我创建了一个名为 'image_container.js' 的通用文件并进行如下更改：

export const Likes = require('./assets/images/like.png')
export const DefaultAvatar = require('./assets/images/default-avatar.png')

我将从该文件导入图像以使用它。

import { Likes, DefaultAvatar } from './image_container'

export class Newsfeed extends Component {
  render() {
      ...
      posts && posts.map(post => <Post likeUrl={Likes}>)
      ...
  }
}

通过这样做，我需要一次图像并在我的应用程序中多次使用它。

希望对您有所帮助:)

Answer 2

由于@Thinker 解决方案似乎对您有效，我只是添加了另一个解决方案。我建议你将你的项目图像资源减少到几乎为 0。导入图像总是有问题。它们不仅会大幅增加您的 git 存储库大小，而且在 CSS 中也很难管理。您也不希望移动设备和桌面设备都需要相同的文件。此外，每次您请求与您的代码在同一域中托管的图像时，您还必须传输不是最佳的 cookie。因此，让我们总结一下在代码中导入图像所带来的问题：

Mobile/Desktop 优化很难（你还需要有 1x、2x 和 3x）
与您的代码主机相同的 cookie 和可能的缓存设置
显着增加您的代码库

我的建议是尽快使用 CDN。 Alibaba OSS (china) 提供非常便宜但高质量的服务。您可以使用 CSS 媒体查询通过设置不同的背景图像来处理不同的大小。阿里巴巴还为您提供了一个很好的功能，您只需上传 3x 尺寸并通过传递不同的查询参数获得 2x 和 1x。缓存设置和所有 CDN 问题也已修复。如果你不想买任何东西，你也可以自己做同样的事情，但功能更少，更让人头疼，但我不推荐。

如何在 ES6、React Native、CommonJS 中正确要求图像

How to properly require images in ES6, React Native, CommonJS

commonjs

ecmascript-6

reactjs

react-native