ReactNative中js編譯成bundle后，js引用的圖片的去向
前言
這篇文章我們來講解，使用react-native bundle 命令將js文件編譯成bundle文件后，ReactNative（以下簡稱RN）對(duì)我們的Android工程都做了什么。
正文
首先，假設(shè)我們已經(jīng)在原有的android工程中增加了對(duì)RN的支持，RN工程目錄結(jié)構(gòu)如下圖：
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);
僅僅是展示一個(gè)imgs文件夾中名為mypic.png的圖片
接下來，我們在命令窗口中cd到我們的RN工程根目錄，執(zhí)行
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平臺(tái)所需要的代碼，
- --entry-file index.android.js 意思是入口文件是RN工程下的index.android.js，因?yàn)槲覀兠钍窃赗N工程目錄下執(zhí)行的，index.android.js也在RN工程根目錄，所以不用加相對(duì)路徑
- --bundle-output RNDemo/app/src/main/assets/index.android.bundle 意思是把編譯后的bundle輸出到哪里，在這里我們和官網(wǎng)要求的一樣，輸出到我們Android工程的assets目錄下，最后定義我們bundle文件的全名稱
index.android.bundle- --assets-dest RNDemo/app/src/main/res/my_floder 意思是資源文件輸出的位置，例如我們最開始提到的RN工程下的imgs文件夾，用于存放圖片，就屬于資源文件，所有的RN工程需要的資源文件會(huì)被copy到
RNDemo/app/src/main/res/my_floder這個(gè)目錄下,需要注意的是，my_floder是我為了看清RN會(huì)產(chǎn)生哪些資源文件而故意這樣寫的。
這個(gè)圖中我們可以看到RN將我們的js文件編譯成了bundle文件，在文件的最末尾，可以看到這樣一行代碼
不難看出，RN已經(jīng)將我們的圖片資源文件路徑編譯了進(jìn)來，那么這個(gè)圖片到底去了哪里？為什么我們的Android工程可以不依賴RN工程目錄下面的imgs資源而獨(dú)立運(yùn)行了呢？答案就在my_folder文件夾中，如圖：
最終我們在drawable-mdpi中找到了我們的圖片資源，圖片資源已經(jīng)被命名為imgs_mypic.png,不難看出，命名規(guī)則是按照RN工程目結(jié)構(gòu)來的。
需要注意兩點(diǎn):
- 1.正確的bundle命令是不能帶上最后一個(gè)my_folder的，我這樣寫只是為了方便大家看清楚RN所引用的圖片的去向，之前被懷疑圖片被編譯成了二進(jìn)制，其實(shí)并不是。
2.android工程中已經(jīng)存在的目錄不會(huì)被bundle命令刪除，同名的文件會(huì)被覆蓋更新，如果RN工程中不再需要mypic.png，而需要mypic2.png，再次執(zhí)行bunlde命令后，會(huì)在這個(gè)目錄下生成imgs_mypic2.png，原來的imgs_mypic.png還是存在的，不會(huì)被刪除。
下圖說明上述第2點(diǎn)：
所以在開發(fā)過程中，一定要注意編譯到android工程中的圖片資源，不要產(chǎn)生無用的多余資源。
