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工程中的图片资源，不要产生无用的多余资源。