ReactNative中js編譯成bundle后扒秸，js引用的圖片的去向
前言
這篇文章我們來講解播演，使用react-native bundle 命令將js文件編譯成bundle文件后，ReactNative（以下簡稱RN）對我們的Android工程都做了什么伴奥。
正文
首先写烤，假設(shè)我們已經(jīng)在原有的android工程中增加了對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);
僅僅是展示一個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平臺所需要的代碼尼啡，
- --entry-file index.android.js 意思是入口文件是RN工程下的index.android.js暂衡，因為我們命令是在RN工程目錄下執(zhí)行的，index.android.js也在RN工程根目錄崖瞭，所以不用加相對路徑
- --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工程需要的資源文件會被copy到
RNDemo/app/src/main/res/my_floder這個目錄下,需要注意的是蹦疑，my_floder是我為了看清RN會產(chǎn)生哪些資源文件而故意這樣寫的。
這個圖中我們可以看到RN將我們的js文件編譯成了bundle文件萨驶，在文件的最末尾歉摧，可以看到這樣一行代碼
不難看出，RN已經(jīng)將我們的圖片資源文件路徑編譯了進來腔呜，那么這個圖片到底去了哪里叁温？為什么我們的Android工程可以不依賴RN工程目錄下面的imgs資源而獨立運行了呢？答案就在my_folder文件夾中核畴，如圖：
最終我們在drawable-mdpi中找到了我們的圖片資源膝但，圖片資源已經(jīng)被命名為imgs_mypic.png,不難看出，命名規(guī)則是按照RN工程目結(jié)構(gòu)來的谤草。
需要注意兩點:
- 1.正確的bundle命令是不能帶上最后一個my_folder的跟束，我這樣寫只是為了方便大家看清楚RN所引用的圖片的去向，之前被懷疑圖片被編譯成了二進制丑孩，其實并不是冀宴。
2.android工程中已經(jīng)存在的目錄不會被bundle命令刪除，同名的文件會被覆蓋更新温学，如果RN工程中不再需要mypic.png略贮，而需要mypic2.png，再次執(zhí)行bunlde命令后仗岖，會在這個目錄下生成imgs_mypic2.png刨肃，原來的imgs_mypic.png還是存在的，不會被刪除箩帚。
下圖說明上述第2點：
所以在開發(fā)過程中，一定要注意編譯到android工程中的圖片資源黄痪，不要產(chǎn)生無用的多余資源紧帕。
