參考文檔

http://www.itdecent.cn/p/ca795f03e12d
最新
https://segmentfault.com/a/1190000018003425

• 前期準備
• 配置Android
• 配置IOS
• 配置RN
• 發(fā)布命令

前期準備

1. 項目中安裝react-native-code-push

npm install --save react-native-code-push@latest
react-native link react-native-code-push

link時會提示：

What is your CodePush deployment key for Android (hit <ENTER> to ignore)
What is your CodePush deployment key for iOS (hit <ENTER> to ignore)

一直Enter即可，后邊會配置。

2. 安裝code-push-cli

npm install -g code-push-cli

3. 登陸code-push

code-push login http://127.0.0.1:3000

4. 注冊應(yīng)用

• ios

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

• android

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

Production對應(yīng)生產(chǎn)包，其中Staging對應(yīng)測試包。

5. 查看是否添加成功

code-push app ls

6. 查看key

code-push deployment ls test02-ios -k

7. 查看其他命令

code-push --h

配置Android

1. 修改android-buildTypes節(jié)點，在android/app/build.gradle

buildTypes {
    debug {
        //這行沒有的話本地運行會報錯，提示[CODEPUSH_KEY]不存在，因為默認[react-native run-android]運行的是debug版本
        buildConfigField "String", "CODEPUSH_KEY", '""'
    }
    releaseStaging {
        ...
        buildConfigField "String", "CODEPUSH_KEY", '"JhGbiijRJf4miIUqBSPib1qux7G34ksvOXqog"'
    }
    release {
        ...
        buildConfigField "String", "CODEPUSH_KEY", '"HwMz0dkX2EOiybqt02JvajcT1FA64ksvOXqog"'
    }
}

2. 修改getPackages()方法，在android/app/src/main/java/com/codepushclient(項目名)/MainApplication.java

//最后一個參數(shù)為codepush服務(wù)器地址
@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
      ...
      new CodePush(BuildConfig.CODEPUSH_KEY, MainApplication.this, BuildConfig.DEBUG, "http://127.0.0.1:3000")
  );
}

3. 修改VersionName，在android/app/build.gradle，android-defaultConfig節(jié)點，將版本號改成三位

defaultConfig {
    ...
    versionName "1.0.0"
    ...
}

在模擬器上安裝對應(yīng)版本包

下邊的命令除了第一個（默認debug安裝），剩余兩個都需要對安卓文件進行配置才可以，具體配置方法可以參考我的這篇文章安卓打包APK

• cd android && ./gradlew installDebugdebug版
• cd android && ./gradlew installReleaseStaging測試版
• cd android && ./gradlew installRelease正式版
  安裝不同版本時，如果提示錯誤com.codepushclient signatures do not match the previously installed version，將模擬器app卸載后再安裝
• cd android && ./gradlew assembleRelease打包

配置IOS

1. xcode打開項目Project中選中項目->選擇Info標簽->選擇Configurations節(jié)點下的+，選擇選擇Duplicate "Release" Configaration輸入Staging
   
   Info
2. 選擇BuildSettings標簽->點擊+選擇Add User-Defined Setting->輸入CODEPUSH_KEY (可隨意)->填寫deployment key
   
   Build Settings
3. 修改Info.plist文件

• 在CodePushDeploymentKey中輸入$(CODEPUSH_KEY)
• 修改Bundle versions版本號為三位
• 配置CodePushServerURL輸入熱更新服務(wù)器地址
  
  Info.plist

4. 如果服務(wù)器是http，需要設(shè)置Allow Arbitary Loads為YES
   
   image.png

配置RN

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

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Button,
  Alert,
} from 'react-native';
import codePush from 'react-native-code-push';
import config from './config';

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',
});

type Props = {};
class App extends Component<Props> {
  componentDidMount() {
    codePush.notifyAppReady()
  }
  checkUpdate=()=>{
    codePush.checkForUpdate(config.deploymentKey).then((update)=>{
      if(!update||update.failedInstall){
        Alert.alert("提示","已是最新版本",[
          {
            text:'ok',
            onPress:()=>{
              console.log('click');
            }
          }
        ]);
      }else{
        codePush.sync(
          {
            deploymentKey: config.deploymentKey,
            updateDialog: {
              optionalIgnoreButtonLabel: '稍后',
              optionalInstallButtonLabel: '立即更新',
              optionalUpdateMessage: '有新版本了，是否更新？',
              title: '更新提示'
            },
            installMode: codePush.InstallMode.IMMEDIATE,
          },
          (status)=>{
            switch (status) {
              case codePush.SyncStatus.DOWNLOADING_PACKAGE:
                console.log("DOWNLOADING_PACKAGE");
                // Alert.alert('DOWNLOADING_PACKAGE')
                break;
              case codePush.SyncStatus.INSTALLING_UPDATE:
                console.log(" INSTALLING_UPDATE");
                // Alert.alert('INSTALLING_UPDATE')
                break;
              case codePush.SyncStatus.UP_TO_DATE:
                // Alert.alert('UP_TO_DATE')
                break;
              case codePush.SyncStatus.UPDATE_INSTALLED:
                // Alert.alert('UPDATE_INSTALLED')
                break;
              case codePush.SyncStatus.UPDATE_IGNORED:
                // Alert.alert('UPDATE_IGNORED')
                break;
              case codePush.SyncStatus.UNKNOWN_ERROR:
                // Alert.alert('UNKNOWN_ERROR')
                break;
              case codePush.SyncStatus.SYNC_IN_PROGRESS:
                // Alert.alert('SYNC_IN_PROGRESS')
                break;
              case codePush.SyncStatus.CHECKING_FOR_UPDATE:
                // Alert.alert('CHECKING_FOR_UPDATE')
                break;
              case codePush.SyncStatus.AWAITING_USER_ACTION:
                // Alert.alert('AWAITING_USER_ACTION')
                break;
              case codePush.SyncStatus.DOWNLOADING_PACKAGE:
                // Alert.alert('DOWNLOADING_PACKAGE')
                break;
              case codePush.SyncStatus.INSTALLING_UPDATE:
                // Alert.alert('INSTALLING_UPDATE')
                break;
            }
          },
          (progress) => {
            console.log(progress.receivedBytes + " of " + progress.totalBytes + " received.");
          }
        )
      }
    })
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          12
        </Text>
        <Button 
          title="檢查更新"
          onPress={this.checkUpdate}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});
export default App;

//config.js
import {
  Platform
} from 'react-native';
const isDev=true;
let deploymentKey = '';
if(isDev){
  deploymentKey = Platform.OS === 'ios'?'r4SNF3BL4vkgP4UK2gMWx7Iibh4S4ksvOXqog':'JhGbiijRJf4miIUqBSPib1qux7G34ksvOXqog';
}else{
  deploymentKey = Platform.OS === 'ios'?'eSJ9SxnaI5lYHkj6I9o90Z317AeL4ksvOXqog':'HwMz0dkX2EOiybqt02JvajcT1FA64ksvOXqog';
}
const config = {
  deploymentKey,
}
export default config;

發(fā)布命令

1. 更新測試包（默認更新的是Staging環(huán)境）

//更新ios
code-push release-react test02-ios ios
//更新android
code-push release-react test02-android android

2. 更新正式包

//更新ios
code-push release-react test02-ios ios -d Production
//更新android
code-push release-react test02-android android -d Production

codePush配置

codePush.sync({
  updateDialog: {
    optionalIgnoreButtonLabel: '稍后',
    optionalInstallButtonLabel: '立即更新',
    optionalUpdateMessage: '有新版本了，是否更新？',
    title: '更新提示'
  },
  installMode: codePush.InstallMode.IMMEDIATE,
})

• codePush.InstallMode.IMMEDIATE（表示安裝完成立即重啟更新）
• codePush.InstallMode.ON_NEXT_RESTART（表示安裝完成后會在下次重啟后進行更新）
• codePush.InstallMode.ON_NEXT_RESUME（表示安裝完成后會在應(yīng)用進入后臺后重啟更新）