ReactNative中把js编译成bundle后，js引用的图片的去向

标签（空格分隔）： ReactNative

前言

这篇文章我们来讲解，使用react-native bundle 命令将js文件编译成bundle文件后，ReactNative（以下简称RN）对我们的Android工程都做了什么。

正文

首先，假设我们已经在原有的android工程中增加了对RN的支持，RN工程目录结构如下图：

imgs文件夹存放js文件中需要用到的图片，RNDemo就是我们的android工程,我们在index.android.js中的代码很简单

import React, {    Component,} from 'react';import {     AppRegistry,     Image,     Text,     View, } from 'react-native';class DemoProject extends Component {     constructor(props) {         super(props);     }     render() {         return (                              './imgs/mypic.png')} />                     );     } }; AppRegistry.registerComponent('RNDemo', () => DemoProject);

仅仅是展示一个imgs文件夹中名为mypic.png的图片

接下来，我们在命令窗口中cd到我们的RN工程根目录，执行

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output RNDemo/app/src/main/assets/index.android.bundle --assets-dest RNDemo/app/src/main/res/my_floder

接下来解读一下这行命令的意思：

–platform android 意思是编译为android平台所需要的代码，

–entry-file index.android.js 意思是入口文件是RN工程下的index.android.js，因为我们命令是在RN工程目录下执行的，index.android.js也在RN工程根目录，所以不用加相对路径

–bundle-output RNDemo/app/src/main/assets/index.android.bundle 意思是把编译后的bundle输出到哪里，在这里我们和官网要求的一样，输出到我们Android工程的assets目录下，最后定义我们bundle文件的全名称index.android.bundle

–assets-dest RNDemo/app/src/main/res/my_floder 意思是资源文件输出的位置，例如我们最开始提到的RN工程下的imgs文件夹，用于存放图片，就属于资源文件，所有的RN工程需要的资源文件会被copy到RNDemo/app/src/main/res/my_floder这个目录下,需要注意的是，my_floder是我为了看清RN会产生哪些资源文件而故意这样写的。

这个图中我们可以看到RN将我们的js文件编译成了bundle文件，在文件的最末尾，可以看到这样一行代码

不难看出，RN已经将我们的图片资源文件路径编译了进来，那么这个图片到底去了哪里？为什么我们的Android工程可以不依赖RN工程目录下面的imgs资源而独立运行了呢？答案就在my_folder文件夹中，如图：

最终我们在drawable-mdpi中找到了我们的图片资源，图片资源已经被命名为imgs_mypic.png,不难看出，命名规则是按照RN工程目结构来的。

需要注意两点:

1.正确的bundle命令是不能带上最后一个my_folder的，我这样写只是为了方便大家看清楚RN所引用的图片的去向，之前被怀疑图片被编译成了二进制，其实并不是。

2.android工程中已经存在的目录不会被bundle命令删除，同名的文件会被覆盖更新，如果RN工程中不再需要mypic.png，而需要mypic2.png，再次执行bunlde命令后，会在这个目录下生成imgs_mypic2.png，原来的imgs_mypic.png还是存在的，不会被删除。
下图说明上述第2点：

所以在开发过程中，一定要注意编译到android工程中的图片资源，不要产生无用的多余资源。

ReactNative中把js编译成bundle后，js引用的图片的去向

ReactNative中把js编译成bundle后，js引用的图片的去向

前言

正文

更多相关文章

随机推荐