react-native 使用 code-push 热更新

1. 全局安装code-push-cli

npm install -g code-push-cli

2. 注册code-push帐号

code-push register
Please login to Mobile Center in the browser window we've just opened.

Enter your token from the browser: 
#会弹出一个浏览器,让你注册,可以使用github帐号对其进行授权,授权成功会给一串Token,点击复制,在控制进行粘贴回车或者使用code-push login命令。

Enter your token from the browser:  casfwa1234xxxxxxxxxxxxxxxxx
#如果成功的话会有下面提示:
Successfully logged-in. Your session file was written to /Users/huanghuanlai/.code-push.config. You can run the code-push logout command at any time to delete this file and terminate your session.

3. 在code-push添加一个ios的app

code-push app add ios-app iosreact-native
#成功提示如下方
Successfully added the "ios-app" app, along with the following default deployments:
┌────────────┬──────────────────────────────────────────────────────────────────┐
│ Name       │ Deployment Key                                                   │
├────────────┼──────────────────────────────────────────────────────────────────┤
│ Production │ eWkbCo*************************************2a6 │
├────────────┼──────────────────────────────────────────────────────────────────┤
│ Staging    │ sYvp***************************************2a6 │
└────────────┴──────────────────────────────────────────────────────────────────┘

4. 在code-push添加一个android的app

code-push app add android-app android react-native
#成功提示如下方
Successfully added the "android-app" app, along with the following default deployments:
┌────────────┬──────────────────────────────────────────────────────────────────┐
│ Name       │ Deployment Key                                                   │
├────────────┼──────────────────────────────────────────────────────────────────┤
│ Production │ yGi8q**********42a6 │
├────────────┼──────────────────────────────────────────────────────────────────┤
│ Staging    │ fqdFC**********42a6 │
└────────────┴──────────────────────────────────────────────────────────────────┘

5. 在项目根目录添加react-native-code-push

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

6.配置 react-native-code-push
不同版本的react-native需要执行不同的操作,本文react-native是0.60以上版本,不执行link操作。可以点击此处查看 Android 不同版本的具体操作,点击此处查看 IOS 不同版本的具体操作。

// 第一步 找到 android/app/build.gradle 文件,添加以下新增代码
apply from: "../../node_modules/react-native/react.gradle"
// new code
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"

// 第二步 修改 MainApplication.java 文件
// new code
import com.microsoft.codepush.react.CodePush;
public class MainApplication extends Application implements ReactApplication {
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        ...
        // new code
        @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }
    };
}

// 第三步 修改 strings.xml 文件,
<resources>
     <string name="app_name">AppName</string>
     // new code , DeploymentKey处填写你的key
     <string moduleConfig="true" name="CodePushDeploymentKey">DeploymentKey</string>
 </resources>

7. 在需要做更新操作的文件添加以下代码

import codePush from "react-native-code-push";
const codePushOptions = { checkFrequency: codePush.CheckFrequency.MANUAL };
export default class App extends Component<{}> {

  componentDidMount(){
    codePush.sync({
      updateDialog: true,
      installMode: codePush.InstallMode.IMMEDIATE,
      mandatoryInstallMode:codePush.InstallMode.IMMEDIATE,
      //deploymentKey为刚才生成的,用Platform判断下平台
      deploymentKey: Platform.OS === 'ios'?'sYvpLUxuBU9FxICqJ5sccL2GDUPZcc988a73-c917-4dba-bd40-1837998442a6':'fqdFCqLyL4XclNZjWvNN3KNhImR5cc988a73-c917-4dba-bd40-1837998442a6',
      });
  }

8. 模拟器上运行项目

react-native run-ios
or
react-native run-android

9. 发布一个ios/android新版本
执行:code-push release-react ios-app ios 或code-push release-react android-app android

Detecting ios app version:

Using the target binary version value "1.0" from "ios/vv/Info.plist".

Running "react-native bundle" command:

node node_modules/react-native/local-cli/cli.js bundle --assets-dest /var/folders/w5/lh1853r53v9c07p_1m6blttm0000gn/T/CodePush/CodePush --bundle-output /var/folders/w5/lh1853r53v9c07p_1m6blttm0000gn/T/CodePush/CodePush/main.jsbundle --dev false --entry-file index.js --platform ios
Scanning folders for symlinks in /Users/ct/Desktop/demo/vv/node_modules (20ms)
Scanning folders for symlinks in /Users/ct/Desktop/demo/vv/node_modules (100ms)
Loading dependency graph, done.

bundle: Writing bundle output to: /var/folders/w5/lh1853r53v9c07p_1m6blttm0000gn/T/CodePush/CodePush/main.jsbundle
bundle: Done writing bundle output

Releasing update contents to CodePush:

Upload progress:[==================================================] 100% 0.0s
Successfully released an update containing the "/var/folders/w5/lh1853r53v9c07p_1m6blttm0000gn/T/CodePush/CodePush" directory to the "Staging" deployment of the "3271450-ios" app.

发布完以后,进入app就会提示更新。
10. 需要用户强制更新

code-push release-react android-app android --m true

11. 发布带版本的更新
在app 版本号默认的情况下以上是没问题,但app肯定是需要迭代的!
需要使用下面命令:

code-push release-react <Appname> <Platform> --t <本更新包面向版本号> --des <本次更新说明(可不加)> --m true < --m true 可不加>
code-push release-react android-app android --t 1.0.1;  //非强制更新(1.0.1是versionNmae)
code-push release-react android-app android --t 1.0.1 --m true; //强制更新(1.0.1是versionNmae)

注意:修改了原生文件代码(例如MainActivity.java等原生文件,或者添加新插件)时CodePush是无法进行更新的,必须通过提交到应用商店进行更新!!!


如果想要自定义 code-push 更新面板,可以点击此处查看。
如果想要了解更多code-push常用命令,可以点击此处查看。

你可能感兴趣的:(react-native)