React Native 整合code push

yellow超發表於2018-05-03
React Native

RN現在的熱部署解決方案選擇不多，不過微軟的Code Push不失為一個好的選擇方案。

廢話不多說，上來就開摟！！！

Paste_Image.png

依照文件操作步驟1,2後你的賬號就可以擁有了部署app的能力了。

現在把關注點放到iOS端，專案結構如下如所示（同RN init 出來的專案結構不同）

Paste_Image.png

##步驟1 安裝code push庫

npm i react-native-code-push --save

##步驟2 以CocoaPods方式整合code push pod 'CodePush', :path => './RN/node_modules/react-native-code-push' 執行pod install

替換原先使用url指定js程式碼位置的程式碼替換為

NSURL *jsCodeLocation = [CodePush bundleURL];
複製程式碼

新增React native打包指令碼

Paste_Image.png

然後再plist檔案中新增一項CodePushDeploymentKey，這個key值，接下來我們在code push中新增一個app後，就會返回給我們2個key（正式環境和測試環境）

##步驟3 註冊app 新增app名為ReactNativeApp code-push app add ReactNativeApp

Paste_Image.png

你的測試環境就填寫staging 的key，反之填寫production的key

#步驟4 js端同步code push 在程式的入口檔案

import codePush from 'react-native-code-push'
...
...
...
componentDidMount() {
    codePush.sync()
}
複製程式碼

步驟5 執行release 目錄移動到js端的根目錄

code-push release-react ReactNativeApp ios -p ../XXXApp/Info.plist -m true
複製程式碼

這裡的-p指定plist檔案是必須的，你也可以把這個腳步儲存的package.json下

Paste_Image.png

以後釋出時，直接執行npm run deploy即可！！

最後，你執行你的專案看看，是不是在脫離自己開的server情況下也能得到js執行相應的程式！ 最後說一句，開發中必不可少的會整合很多功能，但是隻要你一步一步的安裝說明來，根據上下文變化引數，是很EZ的。

相關文章