1. 安裝 CodePush CLI

npm install -g code-push-cli

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

code-push register

?? 這里會(huì)彈出一個(gè)網(wǎng)頁選擇 github 授權(quán)， 注冊(cè)成功后會(huì)得到一個(gè) key , 將 key 復(fù)制到終端回車

3. 添加 ios 平臺(tái)應(yīng)用

code-push app add rebooking-ios ios react-native

得到下面的兩個(gè) key ， 后面會(huì)用到

屏幕快照 2019-04-24 上午10.09.27.png

4. 添加 android 平臺(tái)應(yīng)用

code-push app add rebooking-android android react-native

得到的東西和 ios 一樣

進(jìn)入 https://appcenter.ms/ 可以看到你剛才創(chuàng)建的app， 如下圖

屏幕快照 2019-04-24 上午10.15.11.png

下面開始整合到 react-native

5. react-native 中安裝 code-push 組件

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

6. 添加原生依賴， 使用 link 到 android 和 ios 中

react-native link react-native-code-push

如果 link 的時(shí)候出現(xiàn) rnpm-install ERR! ERRPACKAGEJSON No package found. Are you sure this i a React Native project? Package name not found in ...等， 請(qǐng)使用新版本的react-native 版本react-native init MyApp --version 0.59.5 我這里使用 59

運(yùn)行react-native link的時(shí)候，命令行會(huì)提示輸入部署碼What is your CodePush deployment key for Android (hit <ENTER> to ignore)
這個(gè)時(shí)候?qū)⒛?code>Android 中 Production 的 Deployment Key 粘貼回程。 ios 同理。

7. 將 Android 和 ios 的版本號(hào)改為 1.0.0

Android 版本號(hào)修改.png

IOS 版本號(hào)修改.png.png

8. 在react-native項(xiàng)目中的首頁中 使用 code-push

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import CodePush from "react-native-code-push";
const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component {

  componentDidMount(){
    CodePush.sync({
      //安裝模式
      //ON_NEXT_RESUME 下次恢復(fù)到前臺(tái)時(shí)
      //ON_NEXT_RESTART 下一次重啟時(shí)
      //IMMEDIATE 馬上更新
      installMode : CodePush.InstallMode.IMMEDIATE ,
      //對(duì)話框
      updateDialog : {
          //是否顯示更新描述
          appendReleaseDescription : true ,
          //更新描述的前綴。 默認(rèn)為"Description"
          descriptionPrefix : "更新內(nèi)容：" ,
          //強(qiáng)制更新按鈕文字，默認(rèn)為continue
          mandatoryContinueButtonLabel : "立即更新" ,
          //強(qiáng)制更新時(shí)的信息. 默認(rèn)為"An update is available that must be installed."
          mandatoryUpdateMessage : "必須更新后才能使用" ,
          //非強(qiáng)制更新時(shí)，按鈕文字,默認(rèn)為"ignore"
          optionalIgnoreButtonLabel : '稍后' ,
          //非強(qiáng)制更新時(shí)，確認(rèn)按鈕文字. 默認(rèn)為"Install"
          optionalInstallButtonLabel : '后臺(tái)更新' ,
          //非強(qiáng)制更新時(shí)，檢查到更新的消息文本
          optionalUpdateMessage : '有新版本了，是否更新？' ,
          //Alert窗口的標(biāo)題
          title : '更新提示'
        }
      }
    );
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
      </View>
    );
  }
}

9. 發(fā)布更新

code-push release-react rebooking-ios ios -d Production
code-push release-react rebooking-android android -d Production

最后打開手機(jī)查看效果

屏幕快照 2019-04-24 上午10.42.10.png

關(guān)于自定義更新彈框 ，參照下面的文章

image.png