植入RN的目的是什么?
肯定熱修復熱更新,既然項目嵌入了如何進行后臺部署,我們可以自己搭環境,但是有幾個疑問?
1.code push 是什么?
http://microsoft.github.io/code-push/docs/getting-started.html
一個中央倉庫,能把代碼文件放進倉庫
2.后臺應該給我們客戶端什么?
之前查了許多資料,都說bundle文件.對的是bundle文件.需要明白一點,在程序執行的時候,類和變量會轉換成對應的代碼.
直接上代碼
一.打包
打包 將index.ios.js文件打包成對應的main.jsbundle
react-native bundle --platform ios --entry-file index.ios.js --bundle-output ./main.jsbundle --dev false
為什么叫main.jsbundle?
code push 默認讀取的是main.jsbundle,為了方便. 你可以起任意的名字.
為什么打包index.ios.js?
因為它是輸出文件打包index.ios.js會將所有的用到的代碼連接在一起,讀取這一個文件,就能將你所寫的展示出來,之后你在任意文件更改,只需重新打包index.ios.js -> main.jsbundle
二.發布
用到了我們的發布工具,也可以自己搭環境,自己搭環境還有不少問題,暫時先用code push
1.安裝 CodePush 客戶端
只需要在終端輸入 npm install -g code-push-cli，就可以安裝了。
安裝完畢后，輸入 code-push -v查看版本，如看到版本代表成功。
2.注冊賬號
code-push register
授權通過之后，CodePush會告訴你“access key”，復制此key到終端即可完成注冊。
相關命令
code-push login 登陸
code-push loout 注銷
code-push access-key ls 列出登陸的token
code-push access-key rm <accessKye> 刪除某個 access-key
添加的你的app
code-push app add `xxx`
返回一個
Name │ Deployment Key │
├────────────┼───────────────────────────────────────┤
│ Production │ eZeuj4pe1iBDlpp92GVly6hrbwVkJU4U8 │
├────────────┼───────────────────────────────────────┤
│ Staging │ lH7amuEEam2kcRCcsgLfPvIpUmVkJU4U80
一個生產環境Production,一個預發布環境Staging
如果你的應用有Android和iOS版，那么在向CodePush注冊應用的時候需要注冊兩個App獲取兩套Deployment key
相關命令
code-push app add 在賬號里面添加一個新的app
code-push app remove 或者 rm 在賬號里移除一個app
code-push app rename 重命名一個存在app
code-push app list 或則 ls 列出賬號下面的所有app
code-push app transfer 把app的所有權轉移到另外一個賬號
三.集成到iOS
CodePush官方提供RNPM、CocoaPods與手動三種在iOS項目中集成CodePush的方式，因為已經有CocoaPods,接下來我就以CocoaPods的方式來講解一下如何在iOS項目中集成CodePush。
第一步：在項目中安裝react-native-code-push插件，終端進入你的項目node_modules所在的同級目錄然后運行
npm i react-native-code-push --save
第二步: 找到Proflie文件 添加以下代碼,一定要注意目錄,RNComponent這是我的目錄結構
pod 'CodePush', :path => './RNComponent/node_modules/react-native-code-push'
然后pod install,導入到iOS工程中
第三步: 在我們想CodePush注冊App的時候，CodePush會給我們兩個deployment-key分別是在生產環境與測試環境時使用的，我們可以通過如下步驟來設置deployment-key。
1.PROJECT下選擇你的項目 -> 選擇Info -> 在Configurations節點下單擊 + 按鈕 -> 選擇Duplicate "Release -> 輸入Staging(名稱可以任意主要是key 要對應上)
2.然后選擇Build Settings頁簽 -> 單擊 + 按鈕然后選擇添加User-Defined Setting
3.然后輸入CODEPUSH_KEY(名稱可以自定義),這個key 一定要對應,不然推送的時候會出問題
到目前為止，iOS的設置已經完成
四.準備開始推送bundle文件
1.在 index.ios.js中加載 CodePush模塊：
import codePush from 'react-native-code-push'
(可能會提示找不到react-native-code-push unable reslove modlue npm 依賴包不對
),
$watchman watch-del-all
$ rm -rf node_modules && npm install
$ rm -fr $TMPDIR/react-*
2.在 componentDidMount中調用 sync方法，后臺請求更新
codePush.sync()
componentDidMount(){
codePush.sync();
}
五.發布更新
1.打包
react-native bundle --platform ios --entry-file index.ios.js --bundle-output ./main.jsbundle --dev false
2.推送
code-push release<項目名稱> <./main.jsbundle> <3.6.1> --deploymentName <Staging> --description <"1"> --mandatory <true>
<>:是需要配置的參數
ios:什么平臺
--t 1.0.0:同你的項目版本
--deploymentName Production:什么環境,**注意你的key 設置在什么環境上了
--description為更新說明
--mandatory 是強制更新
項目里:
NSURL *jsCodeLocation;
jsCodeLocation = [CodePush bundleURL];
RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"xxx"
initialProperties:@{@"index" : @"main"}
launchOptions:nil];
self.view = rootView;
同時你需要一個項目里默認的main.jsbundle(離線包),因為可能網速比較慢,也需要加載出來頁面,如果沒有默認的main.jsbundle,會報錯.
生成的包,直接拖進工程里.
**注意:
1.main.jsbundle本地需要的離線包,不能沒有
2.每次推送的main.jsbundle到code push 倉庫里
3.大概流程 1.打包 -> 2.推送 ->3.本地拉取最新的bundle,拉取成功后,不再讀取項目中的main.jsbundle,會讀取本地的main.jsbundle.
4.項目里是有兩個main.jsbundle ,第一個放在項目里的離線包,第二個是code push 拉取下來的,放在沙盒里,不要混了.
六.
至此 iOS端的推送已經完成.
項目打包的時候npm 被打包進去了嗎?
沒有,打包只把cocopod 包含的庫打包進去,其實客戶端需要的就是那個main.jsbundle文件,項目本地有解析main.jsbundle的庫,這個解析庫是打包進.ipa的.所以客戶端只需要一個main.jsbundle就可以了.
歡迎指正,謝謝!
