Question

为什么我们直接使用 require（）而不是图像的url或路径来显示本机图像？我们使用 require（）有什么特殊的原因吗？

Answer 1

在发布ES6之后，该模块成为标准配置。标准用法通过“导出”导出，并通过“导入”导入。

但是在nodejs模块中，我们使用的是CommonJS，使用“ require”导入模块。

CommonJS是一个规范，而NodeJS是该规范的实现。 CommonJS是一个不断发展的规范，模块是重要的组成部分。

Node使用CommonJS模块规范，并且内置的require命令用于加载模块文件。 CommonJS定义的模块分为：{{require}} {{exports}} {{module}} Require（）用于引入外部模块；导出对象用于导出当前模块的方法或变量；模块对象代表模块本身。 require命令的基本功能是读入并执行JavaScript文件，然后返回模块的导出对象。如果找不到指定的模块，则会报告错误。

我希望能帮助您理解“ require（）”。

Answer 2

图像组件是React Native的基本组件。用于显示图像的组件。与HTML的img元素一样，React Native提供的Image组件可用于以各种方式显示图像，例如Web图像，本地图像，相机图像等。

我阅读了官方文档并发现：

React Native提供了一种在iOS和Android应用程序中管理图像和其他媒体资产的统一方法。要将静态图片添加到您的应用中，请将其放置在源代码树中的某个位置，并像这样引用它：

<Image source={require('./my-icon.png')} />

require中的图像名称必须为静态字符串（您不能使用变量！因为require是在编译时而不是在运行时执行的！

上述 require 语法还可用于在项目中静态包含音频，视频或文档文件。支持最常见的文件类型，包括.mp3，.wav，.mp4，.mov，.html和.pdf。

如果您正在构建混合应用程序（React Native中的某些UI，平台代码中的某些UI），您仍然可以使用已经捆绑到该应用程序中的图像。

对于通过Xcode资产目录或Android可绘制文件夹包含的图像，请使用不带扩展名的图像名称：

<Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />

对于Android资产文件夹中的图像，请使用asset：/方案：

<Image source={{uri: 'asset:/app_icon.png'}} style={{width: 40, height: 40}} />

这些方法不提供安全检查。您有责任保证这些图像在应用程序中可用。另外，您还必须手动指定图像尺寸。

来源：图像的参考地址，值为{uri:string}。如果它是本地静态资源，则需要使用require('string')程序包。

正式文件：React Native Docs

为什么我们使用require（）而不是url / path来显示本机图像？

2 个答案: