ReactNative中js编译成bundle后，js引用的图片的去向
前言
这篇文章我们来讲解，使用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 (
<View>
<Image source={require('./imgs/mypic.png')} />
</View>
);
}
};
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工程中的图片资源，不要产生无用的多余资源。
