reac native code push 基础篇

1. 打开终端 安装 CodePush CLI

npm install -g code-push-cli

2.在终端 注册CodePush账号

code-push register

如果这个时候你已经登录过code-push账号那么你需要先注销上次登录然后再注册 👇

code-push logout     //注销
code-push register

这时你会跳转进入网页并且的到一串生成好的key，你需要把生成好的拷贝到终端然后回车。
这时终端会提示你 Successfully logged-in.

3.添加到 android 平台

在终端输入
code-push app add rebooking-android android react-native

这时会生成如下图

react-code-push.jpg

4.RN工程中添加依赖 在RN中输入

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

5.添加原依赖到android 在RN中输入

react-native link react-native-code-push

上图表格中(步骤3) Production 对应的 Deployment Key需要拷贝到android工程中 如下图

codepush1.jpg
codepush2.jpg

添加好后你可以进入https://appcenter.ms/apps查看自己的创建的工程。

---

需要在android工程的主build.gradle 中添加👇

apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
...
dependencies {
    implementation project(':react-native-code-push')
    ...
}

codepush3.jpg

---

在MainApplication.java中添加 👇

//重写getJSBundleFile方法
//在app启动时进行JS Bundle的检测
@Override
protected String getJSBundleFile() {
     return CodePush.getJSBundleFile();
}

修改后的对比图👇

codepush4.jpg

6.在react-native项目中使用code-push

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

import React, {Component} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  Platform,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

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

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      progress: null,
      syncMessage: '',
    };
  }

  codePushDownloadDidProgress(progress) {
    this.setState({progress: progress.receivedBytes / progress.totalBytes});
  }

  codePushStatusDidChange(syncStatus) {
    switch (syncStatus) {
      case CodePush.SyncStatus.CHECKING_FOR_UPDATE:
        this.setState({syncMessage: '检查更新'});
        break;
      case CodePush.SyncStatus.DOWNLOADING_PACKAGE:
        this.setState({syncMessage: '下载安装包'});
        break;
      case CodePush.SyncStatus.AWAITING_USER_ACTION:
        this.setState({syncMessage: '等待用户协作'});
        break;
      case CodePush.SyncStatus.INSTALLING_UPDATE:
        this.setState({syncMessage: 'Installing update.'});
        break;
      case CodePush.SyncStatus.UP_TO_DATE:
        this.setState({syncMessage: '已经是最新版本了', progress: false});
        break;
      case CodePush.SyncStatus.UPDATE_IGNORED:
        this.setState({syncMessage: '取消更新', progress: false});
        break;
      case CodePush.SyncStatus.UPDATE_INSTALLED:
        this.setState({syncMessage: '更新完成', progress: false});
        break;
      case CodePush.SyncStatus.UNKNOWN_ERROR:
        this.setState({
          syncMessage: 'An unknown error occurred.',
          progress: false,
        });
        break;
    }
  }

  componentDidMount() {
    // codePush.checkForUpdate().then(update => {
    //   console.log('更新信息update', update);
    //   return codePush.sync({installMode: codePush.InstallMode.IMMEDIATE});
    // });

    codePush.sync(
      {
        installMode: codePush.InstallMode.IMMEDIATE,
      },
      this.codePushStatusDidChange.bind(this),
      this.codePushDownloadDidProgress.bind(this),
    );
  }

  render() {
    return (
      <View style={styles.contains}>
        <Text styles={styles.textSytles}>
          海贼王 修改这里然后执行 👇 
          命令 code-push release-react
          rebooking-android android -d Production

          来更新一波；
        </Text>

        <Text style={styles.texts}>{this.state.syncMessage}</Text>

        <Text style={styles.texts}>{this.state.progress}%</Text>
        <Text></Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  contains: {
    flex: 1,
  },
  textSytles: {
    fontSize: 30,
    color: '#009033',
  },
  texts: {
    marginTop: 50,
    fontSize: 24,
    color: '#ff0',
  },
});

export default App;

7.修改版本号

    defaultConfig {
        ...
        versionName "1.0.0"
    }

因为codepush 规定的版本号为三位。所以android工程中的版本号也需要改为三位

8.settings.gradle文件中添加

include ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

9.在android studio上运行android 工程。（release环境）

10.将vscode中上传更新包

//首先改动代码 再运行更新命令 否则会报错 提示你与上次的更新一样。
 code-push release-react <appName> android -d Production

11.重启app等待更新

参考
1.掘金上id名为tomorrow_chen的博主 因为没有连接所以不能应用。
2.https://www.jianshu.com/p/da0c1940b8e0
3.https://www.jianshu.com/p/417a165ca9d7