介紹
開發(fā)React Native的過程中意乓，js代碼和所需要的資源運(yùn)行在一個Debug Server上，每次代碼有更新后届良，直接command+R就可以在模擬器上看到刷新后的展示，這種方式非常方便士葫。但是我們需要將我們的App發(fā)布到AppStore，這個時候就需要打包我們的應(yīng)用程序慢显，使用離線的js代碼和圖片資源。這就需要把js和圖片等資源打包成離線資源荚藻，再添加到Xcode中屋灌，然后通過Xcode特殊處理發(fā)布到AppStore应狱。
一、生成bundle文件
新建bundle目錄
? ?在生成的RN工程中，找到ios目錄写半，在該目錄下新建bundle目錄
進(jìn)入項目目錄，運(yùn)行以下打包命令
react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ./ios/bundle/index.ios.jsbundle --assets-dest ./ios/bundle
--entry-file?,ios或者android入口的js名稱尉咕，比如index.js
--platform?,平臺名稱(ios或者android)
--dev?,設(shè)置為false的時候?qū)avaScript代碼進(jìn)行優(yōu)化處理。
--bundle-output, 生成的jsbundle文件的名稱年缎，比如./ios/bundle/index.ios.jsbundle
--assets-dest?圖片以及其他資源存放的目錄,比如./ios/bundle
也可以在package.json中添加編譯命令
{? ?
????"scripts":{? ? ? ?
????????"bundle-ios":"node node_modules/react-native/local-cli/cli.js bundle --entry-file index.js? --platform ios --dev false --bundle-output./ios/bundle/index.ios.jsbundle --assets-dest ./ios/bundle"? ?
????}
}
以后打包直接運(yùn)行npm run bundle-ios即可
二、在Xcode中集成
通過上面的命令生成離線包后晦款，可以在ios目錄下bundle中看到包含的離線資源：
需要在Xcode中添加資源到項目中，必須選擇Create folder references的方式添加文件夾缓溅。
添加成功后：
三坛怪、設(shè)置AppDelegate.m文件
修改AppDelegate.m中的加載包的方式（只需修改一次）,之后項目會自動跟據(jù)debug還是release狀態(tài)加載不同的包
NSURL *jsCodeLocation;
#ifdef DEBUG? ?
//開發(fā)包? ?
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];#else? ?
//離線包? ?
jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"bundle/index.ios" withExtension:@"jsbundle"];
#endif
修改debug狀態(tài)
將項目由debug狀態(tài)改成release狀態(tài)股囊，Xcode-->Product-->Scheme-->Edit Scheme...
四、添加證書稚疹、配置描述文件打包
