React Native 热更新的组件react-native-pushy

我本来是Android程序猿，公司大领导偷偷带着部下用RN开发APP，准备清洗移动端程序猿，等我知道了，已经晚了，于是我紧急启动学霸模式，学习React Native,期间还搞定了他们没有搞定的热更新问题。高兴之余写下这篇博客。

准备：1、已经搭建好Android开发环境；2、已经搭建好React Native开发环境

注意：Android Studio要升级到2.2以上版本，因为要用到Ndk

开始：

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

npm install -g react-native-update-cli rnpm
npm install --save react-native-update
react-native link react-native-update

`npm install -g react-native-update-cli rnpm`这一句在每一台电脑上仅需运行一次。
如果RN版本低于0.29，请使用`rnpm link`代替`react-native link`命令。

* 注意 *
如果访问极慢或者显示网络失败，请设置使用淘宝镜像（也仅需设置一次）：

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

安装命令示例：

npm install --save react-native-update

如果上面的命令都运行成功，基本上是没有问题了，你可以用Android Studio打开Android项目查看有没有如下依赖，如果有就没问题了

dependencies {
    compile project(':react-native-update')//出现这一行
    compile fileTree(dir: "libs",include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"  // From node_modules
}

如果没有出现，你需要手动link，下面是手动link的步骤，如果上面成功了，下面可以跳过
1. 在`android/settings.gradle`中添加如下代码:

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

2. 在`android/app/build.gradle`的 dependencies 部分增加如下代码:

      compile project(':react-native-update')

3. 检查你的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()`(注意上一行可能要增加一个逗号)

link完成后配置Bundle URL，在你的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);
    }
    // ... 其它代码
}

登录与创建应用
首先请在点击打开链接注册帐号，然后在你的项目根目录下运行以下命令：

pushy login
email: <输入你的注册邮箱>
password: <输入你的密码>

这会在项目文件夹下创建一个`.update`文件，注意不要把这个文件上传到Git等CVS系统上。你可以在`.gitignore`末尾增加一行`.update`来忽略这个文件。
在刚才的网站登录之后可以创建应用。注意iOS平台和安卓平台需要分别创建，创建完成后，回到命令行选择应用

$ pushy selectApp --platform android
103) 鱼多多(android)
321) 招财旺()
Total 2 ios apps
Enter appId: <输入应用前面的编号,上面的103,321>

选择或者创建过应用后，你将可以在文件夹下看到`update.json`文件，其内容类似如下形式：
```bash
{
"ios": {
"appId": 1,
"appKey": "<一串随机字符串>"
},
"android": {
"appId": 2,
"appKey": "<一串随机字符串>"
}
}
```
完成上面步骤之后你运行项目会报NDK相关的错误，所以刚开始的时候我建议要把Android Studio 升级到2.2以上，下面来配置NDK环境

Android Studio2.2开始推荐开发者使用CMake去构建本地代码，在构建之前，我们需先安装下面三个依赖：

NDK: a set of tools that allows you to use C and C++ code with Android.
CMake: an external build tool that works alongside Gradle to build your native library. You do not need this component if you only plan to use ndk-build.
LLDB: the debugger Android Studio uses to debug native code.

可能不同版本显示的名字或者版本不一样，但是选择这三个在点Apply就行，等着下载安装完成。

安装完成后打开你的Android项目中的build.gradle，做如下配置：

android {
    ...

    defaultConfig {
        ...

        externalNativeBuild {
            cmake {
                //设置编译工具链
                arguments "-DANDROID_TOOLCHAIN=clang"
                //需编译生成的ABI类型
                abiFilters 'x86','x86_64','armeabi','armeabi-v7a','arm64-v8a'
            }
        }

        ndk {
            //打包进APK的ABI类型
            abiFilters "armeabi","armeabi-v7a","x86"
        }
    }

    externalNativeBuild {
        cmake {
            //配置CMakeLists.txt的路径
            path 'CMakeLists.txt'
        }
    }

    ...
}

理论上说配置上面的代码后，你的项目结构会变成这样：

但是1和2我的都没有出现，怎么办？我的做法就是新建一个项目，注意新建项目时有以下选项
你新建的项目的目录会和上面的一样，我就把新建项目中的如下文件拷贝到自己项目中相应的位置：

新建一个cpp路径拷贝下面的文件

打开这个.cpp文件，在这个方法名中用红色框圈起来的是你项目的包名，你要记得修改成自己的包名

改完以后你可以运行自己的项目，我运行的时候报错，是关于build的，以我以前Android开发的经验，把app目录下的build文件夹删掉，重新运行，就成功了

React Native 热更新的组件react-native-pushy

猜你在找的React相关文章