1、安裝 CodePush cli

npm install -g code-push-cli

2、注冊(cè)CodePush賬號(hào)

code-push register 

會(huì)跳轉(zhuǎn)到一個(gè)網(wǎng)頁(yè)，注冊(cè)完畢后網(wǎng)頁(yè)會(huì)出現(xiàn)一串編碼，將編碼拷貝粘貼到剛剛的控制臺(tái)直接回車即可完成登錄。

3、登錄CodePush賬號(hào)
如果完成上面的全部操作則不需要再登錄，如若需要登錄

code-push login

4 、在CodePush內(nèi)注冊(cè)App

code-push app add <ProjectName> ios react-native 

注冊(cè)成功會(huì)顯示如下

注冊(cè)key

其中Production 代表的是發(fā)布的版本。Staging 代表的是測(cè)試的版本。

5、JS代碼添加CodePush依賴

npm install --save react-native-code-push

6、iOS代碼Link CodePush

react-native link react-native-code-push

這個(gè)時(shí)候會(huì)讓你輸入deployment key ,直接回車就可以，在Xcode目錄下我們會(huì)進(jìn)行配置的

7、在JS App.js 下面維護(hù)相應(yīng)的代碼

import codePush from "react-native-code-push";
class App extends Component {

  componentDidMount(){
    codePush.sync({
        updateDialog:true,
        installMode:codePush.InstallMode.IMMEDIATE,
        mandatoryInstallMode:codePush.InstallMode.IMMEDIATE,
        deploymentKey:'6FSCurkj514C7gXkkQB9SSatIer04dc1704a-9251-460c-8f2d-54dea1abdc77',
    });

  }
}
export default codePush(App);

8、Xcode環(huán)境配置
由于debug環(huán)境是我們直接運(yùn)行代碼，所以不需要設(shè)置熱更新，但要保證Xcode環(huán)境與CodePush環(huán)境保持一致，所以我們需要增加一個(gè)環(huán)境。
用Xcode 打開項(xiàng)目
-> Xcode的項(xiàng)目導(dǎo)航視圖中的PROJECT下選擇你的項(xiàng)目
-> 選擇Info頁(yè)簽
->在Configurations節(jié)點(diǎn)下單擊 + 按鈕
-> 選擇Duplicate "Release
-> 輸入Staging(名稱可以自定義)；

image.png

維護(hù)一個(gè)環(huán)境名稱，我這邊release 對(duì)應(yīng)Production,Release Code對(duì)應(yīng)Staging

9、然后在TARGET下 選擇Build Settings頁(yè)簽
-> 單擊 + 按鈕然后選擇添加User-Defined Setting
->>然后輸入CODEPUSH_KEY

image.png

如果你忘了你的key，可以通過該指令查看

code-push deployment ls <appName> -k

10、選擇Build Settings tab，搜索Build Location
-> Per-configuration Build Products Path
-> Release Code
修改原來(lái)的值，改成

$(BUILD_DIR)/Release$(EFFECTIVE_PLATFORM_NAME)

11、打開 Info.plist文件，
新建CodePushDeploymentKey列并在Value中輸入$(CODEPUSH_KEY)

image.png

12、修改Bundle versions為三位

image.png

13、修改AppDelegate.m中的代碼

#ifdef DEBUG
  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
  jsCodeLocation = [CodePush bundleURL];
#endif

14、將App改為發(fā)布Release Code模式

image.png

15、在工程目錄下新建文件夾bundle,并在該文件夾下創(chuàng)建ios文件夾

16、打包
生成bundle命令 react-native bundle
--platform 平臺(tái)
--entry-file 啟動(dòng)文件
--bundle-output 打包js輸出文件
--assets-dest 資源輸出目錄
--dev 是否調(diào)試

react-native bundle --entry-file index.js --bundle-output ./bundles/ios/index.ios.bundle --assets-dest ./bundles/ios/ --platform ios --dev false

可以將該指令維護(hù)到package.json里

這樣只需要每次運(yùn)行 npm run build:ios 即可

17、上傳bundle至CodePush

code-push release-react Appname ios --t 1.0.0 --dev false --d Staging --des "<描述>" --m true

這時(shí)候重啟App即可看到提示

image.png