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