Why we use require() instead of url/path to show the image in react native?

Question

Why we use the require() instead of url or path of the image directly, to show images in react native ? Is there any special reason why we use require()?

Answer 1

Image Component is a basic component of React Native. A component for displaying images. Like the img element of HTML, the Image component provided by React Native can be used to display images in various ways, such as web images, local images, camera images, and so on.

I read the official documentation and found:

React Native provides a unified way of managing images and other media assets in your iOS and Android apps. To add a static image to your app, place it somewhere in your source code tree and reference it like this:

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

The image name in require must be a static string (you can't use variables! Because require is executed at compile time, not during runtime!

The require syntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including .mp3, .wav, .mp4, .mov, .html and .pdf.

If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.

For images included via Xcode asset catalogs or in the Android drawable folder, use the image name without the extension:

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

For images in the Android assets folder, use the asset:/ scheme:

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

These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.

Source: The reference address of the image, the value is {uri:string}. If it is a local static resource, then you need to use the require('string') package.

Official document:React Native Docs

Answer 2

After the ES6 is released, the module becomes the standard. The standard usage is exported by "export" and imported by "import".

But in the nodejs module, we are using CommonJS, using "require" to import modules.

CommonJS is a specification, and NodeJS is an implementation of this specification. CommonJS is an evolving specification, and modules are an important part.

Node uses the CommonJS module specification, and the built-in require command is used to load module files. The modules defined by CommonJS are divided into: {(require)} {(exports)} {(module)} Require() is used to introduce external modules; the exports object is used to export methods or variables of the current module; the module object represents the module itself. The basic function of the require command is to read in and execute a JavaScript file and then return the module's exports object. If the specified module is not found, an error will be reported.

I hope to help you understand "require()".