react-native热更新从零到成功中的各种坑

 

https://github.com/reactnativecn/react-native-pushy/blob/master/docs/guide.md

 

Android NDK暂时没有安装

在你的项目根目录下运行以下命令：

1. 1.       npm install -g react-native-update-cli rnpm

 

成功截图

 

 

 

2. 安装命令示例：（我的0.37）npm install --save react-native-update@4.x

 

把此工程的相关操作关掉，否则好像会报错（npm ERR! errno -4048）

成功截图：

 

3.手动link react-native link react-native-update

 

如果link没有成功就手动添加下面的配置，成功的跳过

iOS

在XCode中的Project Navigator里,右键点击Libraries ➜ Add Files to [你的工程名]

进入node_modules ➜ react-native-update ➜ ios 并选中RCTHotUpdate.xcodeproj`

在XCode中的project navigator里,选中你的工程,在 Build Phases ➜ Link Binary With Libraries 中添加 libRCTHotUpdate.a

Run your project (Cmd+R)

 

Android

在android/settings.gradle中添加如下代码:  include ':react-native-update' project(':react-native-update').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-update/android')

 

在android/app/build.gradle的 dependencies 部分增加如下代码:  compile project(':react-native-update')

 

检查你的RN版本,如果是0.29及以上, 打开

android/app/src/main/java/[...]/MainApplication.java,否则打开

android/app/src/main/java/[...]/MainActivity.java

在文件开头增加 import cn.reactnative.modules.update.UpdatePackage;

在getPackages() 方法中增加 new UpdatePackage()(注意上一行可能要增加一个逗号)

 

 

4.配置Bundle URL(Android)(ios的自己去网上看吧，没有验证不写)

0.29及以后版本：在你的MainApplication中增加如下代码：

// ... 其它代码

import cn.reactnative.modules.update.UpdateContext;
public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    protected String getJSBundleFile() {
        return UpdateContext.getBundleUrl(MainApplication.this);
    }
    // ... 其它代码
  }
}

0.28及以前版本：在你的MainActivity中增加如下代码：

// ... 其它代码

import cn.reactnative.modules.update.UpdateContext;

public class MainActivity extends ReactActivity {

    @Override
    protected String getJSBundleFile() {
        return UpdateContext.getBundleUrl(this);
    }
    // ... 其它代码
}

 

5. 登录与创建应用

首先请在http://update.reactnative.cn注册帐号，然后在你的项目根目录下运行以下命令：

$ pushy login

email: <输入你的注册邮箱>

password: <输入你的密码>

cmd允许会出现不是内部命令，

 

此时用git

 

这会在项目文件夹下创建一个.update文件，注意不要把这个文件上传到Git等CVS系统上。你可以在.gitignore末尾增加一行.update来忽略这个文件。

 

登录之后可以创建应用。注意iOS平台和安卓平台需要分别创建：一定要另开一个git窗口输入创建应用的命令或者选择的命令

创建之前：网页截图

 

 

创建之后：网页截图，（可以直接网页上创建，也可以用命令行）

 

 

创建应用：

$ pushy createApp --platform ios

App Name: <输入应用名字>

$ pushy createApp --platform android

App Name: <输入应用名字>

如果你已经在网页端或者其它地方创建过应用，也可以直接选择应用：

$ pushy selectApp --platform ios

1) 鱼多多(ios)

3) 招财旺(ios)

 

Total 2 ios apps

Enter appId: <输入应用前面的编号>

截图：

 

工程根目录：

 

这主意平台暂时只能创建三个应用，，多了回报错；

选择应用之后，update.json文件内容如下：

 

 

 

 

添加热更新

1.获取appKey

 

import {
  Platform,
} from 'react-native';

import _updateConfig from './update.json';
const {appKey} = _updateConfig[Platform.OS];

View Code