熱更新環(huán)境以及插件的安裝
這份文檔建立在已經(jīng)能在iOS模擬器上正常運(yùn)行項(xiàng)目的基礎(chǔ)上
運(yùn)行環(huán)境
macOS Sierra 10.12.1
iOS10
xcode Version 8.1 (8B62)
使用codepush做熱更新
CodePush簡介
CodePush 是微軟提供的一套用于熱更新 React Native 和 Cordova 應(yīng)用的服務(wù)。
CodePush 是提供給 React Native 和 Cordova 開發(fā)者直接部署移動應(yīng)用更新給用戶設(shè)備的云服務(wù)。CodePush 作為一個(gè)中央倉庫，開發(fā)者可以推送更新 (JS, HTML, CSS and images)，應(yīng)用可以從客戶端 SDK 里面查詢更新。CodePush 可以讓應(yīng)用有更多的可確定性，也可以讓你直接接觸用戶群。在修復(fù)一些小問題和添加新特性的時(shí)候，不需要經(jīng)過二進(jìn)制打包，可以直接推送代碼進(jìn)行實(shí)時(shí)更新。
安裝與注冊CodePush
使用CodePush之前首先要安裝CodePush客戶端，我的機(jī)器是OS Sierra 10.12.1
涉及到的指令：
npm install -g code-push-cli //安裝codepush客戶端
code-push register //注冊codepush賬號
code-push login //登錄
code-push loout //注銷
code-push access-key ls //列出登陸的token
code-push access-key rm <accessKye> //刪除某個(gè) access-key
管理 CodePush 賬號需要通過 NodeJS-based CLI，如果未安裝則可以輸入
npm install -g code-push-cli //-g表示全局安裝
我的版本是
創(chuàng)建一個(gè)CodePush 賬號
code-push register
瀏覽器會自動打開注冊頁面，我這里用的是git賬號授權(quán)的。
授權(quán)通過之后，CodePush會展示“access key”，復(fù)制此key到終端即可完成注冊。
登錄，登陸成功后，session文件將會寫在 /Users/你的用戶名/.code-push.config 中
code-push login
至此 codepush客戶端相關(guān)工作完成
在CodePush服務(wù)器注冊app（項(xiàng)目）
涉及相關(guān)命令
code-push app add <appName> //在賬號里面添加一個(gè)新的app
code-push app rm <appName> 在賬號里移除一個(gè)app
code-push app rename <appName> //重命名一個(gè)存在app
code-push app ls //列出賬號下面的所有app
code-push app transfer //把a(bǔ)pp的所有權(quán)轉(zhuǎn)移到另外一個(gè)賬號
為了讓codepush關(guān)聯(lián)上我們需要熱更的app 則需要向codepush注冊目標(biāo) app，我的app名字是Trip，請自行對應(yīng)自己的app名稱
code-push app add Trip
集成CodePush SDK 到 iOS項(xiàng)目中（目前我只做了iOS版）
安裝CodePush插件到項(xiàng)目中
我的項(xiàng)目目錄結(jié)構(gòu)是
在項(xiàng)目根目錄下執(zhí)行指令，此時(shí)會在node_modules文件夾中生成react-native-code-push文件夾
npm install --save react-native-code-push
使用cocoapods導(dǎo)入code-push到iOS項(xiàng)目中 參考文檔
cocoapods：簡單理解一個(gè)iOS的依賴管理工具，有點(diǎn)類似前端的 bower
首先安裝cocoapods
sudo gem install cocoapods
如果報(bào)錯(cuò)
ERROR: While executing gem ... (Gem::DependencyError)
Unable to resolve dependencies: cocoapods requires cocoapods-core (= 1.1.1), cocoapods-downloader (< 2.0, >= 1.1.2), cocoapods-trunk (< 2.0, >= 1.1.1), xcodeproj (< 2.0, >= 1.3.3)
嘗試運(yùn)行
sudo gem install cocoapods --pre
在項(xiàng)目ios文件夾中新建Podfile文件內(nèi)容如下，參考文檔
platform :ios, '8.0'
target 'Trip' do //app名字自行修改
pod 'CodePush', :path => '../node_modules/react-native-code-push'//路徑根據(jù)自己的文件目錄修改
end
項(xiàng)目Podfile同級目錄下運(yùn)行指令，即可將codepush插件集成到項(xiàng)目
pod install
在xcode中打開項(xiàng)目
項(xiàng)目目錄下有 iOS 文件夾，里面有一個(gè)叫 xxxx.xcodeproj 的文件 點(diǎn)擊就可用xcode打開，打開后我的目錄結(jié)構(gòu)是這樣的
在文件夾中打開項(xiàng)目文件夾，找到/node_modules/react-native-code-push/ios/CodePush.xcodeproj 這個(gè)文件
將他拖到xcode項(xiàng)目中的Libraries文件夾中
目的是為了將codepush集成到iOS項(xiàng)目中使用相關(guān)功能
在xcode中 點(diǎn)擊藍(lán)色的項(xiàng)目名稱呼出中間的操作欄，點(diǎn)擊操作欄上面的 build phases 欄 打開Link Binary With Libraries
將 Libraries/CodePush.xcodeproj/Products 中的 libCodePush.a文件拖入Link Binary With Libraries中
點(diǎn)擊Link Binary With Libraries的加號，選擇 libz.tbd 添加進(jìn)去，添加上了，iOS編譯出來的包中就會包含這些庫。
選擇操作欄上部 Build Settings 欄目 在Header Search Paths那一項(xiàng)中加入
$(SRCROOT)/../node_modules/react-native-code-push
并且這一項(xiàng)的后面必須選擇 recursive （用力敲黑板），這是讓iOS知道去遞歸查找此依賴 否則有可能找不到
代碼中配置CodePush插件
打開xcode 在項(xiàng)目中找到 AppDelegate.m文件，并單擊左鍵打開 ，一般在項(xiàng)目名文件夾中 找不到就仔細(xì)點(diǎn)找
在代碼頭部加入代碼并cmd + s保存，如果加入后報(bào)錯(cuò)，則對照上面的步驟仔細(xì)檢查是否疏漏了，找不到此文件表明前面的依賴引入沒有成功
#import "CodePush.h"
繼續(xù)在此文件中找到 jsCodeLocation 關(guān)鍵詞，將源碼替換成以下代碼
PS：讓iOS判斷是否是debug 和 release模式 對應(yīng)加載不同的入口文件。我們熱更時(shí)需要以 release方式運(yùn)行
#ifdef DEBUG
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle? platform=ios&dev=true"];
#else
jsCodeLocation = [CodePush bundleURL];
#endif
啟動命令窗口輸入命令獲取 Staging key，復(fù)制 Staging 的值（因?yàn)槭窃谏a(chǎn)環(huán)境 所以使用 Staging）
code-push deployment ls <AppName> --displayKeys
打開xcode 將此值填入 info.plist文件中
添加 CodePushDeploymentKey 鍵
將 Bundle versions string, short 值改成 1.0.0 因?yàn)閕OS中codepush只支持這樣的格式
xcode中點(diǎn)擊項(xiàng)目名 調(diào)出中間的操作欄 點(diǎn)擊 general 如果下面的 build 值為空 則改為1 （我這里是1 自己對應(yīng)自己的項(xiàng)目）
react native 中使用插件
打開iOS的入口文件 我這里是 index.ios.js
在代碼中引入插件
import codePush from "react-native-code-push";
在 父組件的 componentDidMount 方法中調(diào)用熱更新方法
componentDidMount(){
codePush.sync();
}
以上就完成了基本的配置
react native 打包
react-native bundle
常用參數(shù)解釋
--entry-file //ios或android入口的文件名稱，一般叫 index.ios.js或 index.android.js
--platform //平臺名稱(ios/android)
--dev //設(shè)置為false的時(shí)候會對JavaScript代碼進(jìn)行優(yōu)化處理。
--bundle-output //生成的jsbundle文件的名稱(包含路徑)，比如./ios/bundle/index.ios.jsbundle
--assets-dest //圖片以及其他資源存放的目錄,比如./ios/assets
我的打包命令如下，我的靜態(tài)資源放到 ios/Trip/assets 中的（依照個(gè)人的路徑為準(zhǔn)）
特別注意：bundle 文件夾 需要事先手動建好
react-native bundle --entry-file index.ios.js --platform ios --dev false --bundle-output ./ios/bundle/index.ios.jsbundle --assets-dest ./ios/Trip/assets
此時(shí)成功會在ios目錄下看到一個(gè)bundle目錄，里面是我們的打包文件
打開xcode ，選中項(xiàng)目中和項(xiàng)目名一樣的黃色文件夾，右鍵選擇Add Files to "RNIos"
找到我們的bundle，注意是文件夾，不是文件，然后不要猴急猴急的點(diǎn)add按鈕，請看下一步
在option中選擇Create folder references 然后點(diǎn)擊 add
完成后即可進(jìn)行下一步的真機(jī)安裝了
iOS真機(jī)測試熱更新
首先需要在apple開發(fā)者網(wǎng)站去注冊開發(fā)者賬號（個(gè)人測試可以不交99的保護(hù)費(fèi)）
xcode 中打開項(xiàng)目（參考上文如何打開項(xiàng)目）
點(diǎn)擊項(xiàng)目，在操作欄中選擇*** general*** 在team中選擇自己的開發(fā)者賬戶
按下 cmd+shift+,鍵打開配置窗口，在build configration 中可以選擇項(xiàng)目運(yùn)行方式（debug/release）
debug：真機(jī)調(diào)試用，當(dāng)修改代碼后可以在真機(jī)上時(shí)時(shí)看到效果
releae：使用上文指定的bundle文件運(yùn)行，等于與本地代碼時(shí)時(shí)修改沒有關(guān)系了（熱更新需要使用這個(gè)模式調(diào)試）
將手機(jī)插上 usb 鏈接 mac，點(diǎn)擊左上角手機(jī)圖標(biāo)，即可看到我們的真機(jī)機(jī)器名，選擇它，然后點(diǎn)擊左邊的三角形按鈕運(yùn)行項(xiàng)目。
坐等幾分鐘，不出意外的話即可在手機(jī)上安裝app ，成功或失敗 xcode會彈出提示。
假設(shè)上述操作成功在手機(jī)上安裝app，就可以繼續(xù)下面的打包發(fā)布了。
向codepush發(fā)布打包代碼
隨意修改代碼，使其表現(xiàn)和手機(jī)上顯示不一致即可
然后重新執(zhí)行打包命令，生成一個(gè)新的bundle文件
執(zhí)行codepush的發(fā)布命令，將新文件發(fā)布到staging 環(huán)境中
相關(guān)命令
code-push release <appName> <updateContents> <targetBinaryVersion> --mandatory //發(fā)布
code-push deployment history Trip Staging //查詢發(fā)布?xì)v史
參數(shù)解釋
<appName> //app名稱
<updateContents> //Bundle文件所在目錄（完整）
<targetBinaryVersion> // 需要熱更的app 版本
--mandatory //此參數(shù)非必須 如果有則表示app強(qiáng)制更新
我的發(fā)布命令如下
code-push release Trip ./ios/bundle/index.ios.jsbundle 1.0.0
查看發(fā)布?xì)v史
code-push deployment history <appName> <deploymentName>
成功后重啟app 則會看到更新（是重啟app 需要結(jié)束程序后再打開）
