React Native项目配置Code Push


react native 项目配置code push
本次项目的项目依赖关键包的版本如下：

1
2
3
react:  6.11.0,
react-native: 0.62.2,
react-native-code-push: ^6.2.1,

由于react native的版本在0.60之后 和 0.60之前的配置有区别，此文章只针对0.60之后的配置。

  • 全局安装code-push
1
npm install -g code-push-cli

  • 安装react native版的code-push插件
1
npm install --save react-native-code-push

0.60 版本之后配置IOS

  • 进入ios路径下执行如下命令：
1
pod install
  • 查找一下代码行，用于设置生产版本bridge的源URL:
    return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
    替换为 如下代码：
1
return [CodePush bundleURL];
  • 配置xcode，注意，0.60之后使用的是.xcworkspace

    添加Staging

    添加codepus的key

    debug可以不设置key

  • 进入./ios/项目名/Info.plist中添加CodePushDeploymentKey和对应的key，及修改成三位的版本号。添加如下代码：
1
2
3
4
<key>CFBundleVersion</key>
<string>1.0.0</string>
<key>CodePushDeploymentKey</key>
<string>$(CODEPUSH_KEY)</string>

  • 进入Produce->Scheme->Edit Scheme,修改Archive中Build Configuration的值为Release


    image.png

  • 运行项目看下是否成功，能启动成功说明配置没有问题

到此IOS端的CodePush配置完成，然后提交版本进行测试即可。

Android配置code push

  • 到./android/app/build.gradle 头部引入codepush.gradle 和react.gradle
    需注意： 查看js中是否已包含react.gradle，避免重复引入
1
2
apply from: "../../node_modules/react-native/react.gradle"
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
  • 到./android/app/src/main/java/com/项目名称/MainApplication.java添加如下内容
    注意：rn 0.60之后只需要添加如下代码 不需要添加其他
1
2
3
4
5
  // 添加的内容
   @Override
   protected String getJSBundleFile() {
       return CodePush.getJSBundleFile();
   }

加完之后的内容

  • 打开./android/app/src/main/res/values/strings.xml，添加如下内容：
    注意：0.60之后 “CodePushDeploymentKey”是固定的，就被这个名字坑了好久好久。。。
1
 <string moduleConfig="true" name="CodePushDeploymentKey">你的DeploymentKey</string>
  • 将./android/app/build.gradle文件中的defaultConfig对象下的versionName改为三位数

./android/app/build.gradle

  • 检查一下settings.gradle里是否加入了一下代码
1
2
include ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

注意： 一定要修改rn项目下./node_modules/react-native-code-push/android/app/src/main/java/com/microsoft/codepush/react/CodePush.javamServerUrl地址。默认是官网地址

image.png

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import codePush from 'react-native-code-push';
const DEPLOYMENT_KEY=Platform.OS==='ios'?' 你的 ios key ':你的 android key';

 componentWillMount() {
    codePush.disallowRestart();//禁止重启
    this.syncImmediate(); //开始检查更新
  }
  componentDidMount(){
    codePush.allowRestart();                //在加载完了，允许重启
  }
  syncImmediate() {
    codePush.sync( {
            //安装模式
            //ON_NEXT_RESUME 下次恢复到前台时
            //ON_NEXT_RESTART 下一次重启时
            //IMMEDIATE 马上更新
            mandatoryInstallMode : codePush.InstallMode.IMMEDIATE,
            deploymentKey: DEPLOYMENT_KEY,
            //对话框
            updateDialog : {
                //是否显示更新描述
                appendReleaseDescription : true ,
                //更新描述的前缀。 默认为"Description"
                descriptionPrefix : "更新内容：" ,
                //强制更新按钮文字，默认为continue
                mandatoryContinueButtonLabel : "立即更新" ,
                //强制更新时的信息. 默认为"An update is available that must be installed."
                mandatoryUpdateMessage : "必须更新后才能使用" ,
                //非强制更新时，按钮文字,默认为"ignore"
                optionalIgnoreButtonLabel : '稍后' ,
                //非强制更新时，确认按钮文字. 默认为"Install"
                optionalInstallButtonLabel : '后台更新' ,
                //非强制更新时，检查到更新的消息文本
                optionalUpdateMessage : '有新版本了，是否更新？' ,
                //Alert窗口的标题
                title : '更新提示'
            }
        }
    );
  }

code push常用命令可在上一篇文章看到。