react-native 实现apk版本自动更新（非js热更新）

前言（android篇）：

      react-native 作为facebook推出两年，现在应该说最火的移动技术。

      当然作为一新的技术（或者说一种新的编码机制），这个对于前端开发者来说，是一种福音，因为，大部分界面设计，我们只需要根据根据官方组件或者api，编写js代码，基本能够实现我们的界面交互需求。

      但是我如何我们想要实现一些新的东西或者功能，这个时候的组件库或者api库就不能满足我们的需求了。

      这里所说的新东西比如：常驻内存、后台运行退出，或者android版本升级（硬升级）（js热更新，可以使用微软开源组件，react-native-code-push组件，具体使用请往githup）

      这里我就来讲一讲如何实现硬升级（也就是apk原生和js一起实现版本升级）。

androd apk实现硬升级：

      第一使用开源组件（android-auto-update）（这里感谢该开源原生代码的作者feicien)
    从githup上面下载该源码。

  用android stuio打开你的android项目 使用model的方式导入该项目等待编译

   然后我们要实现的就是如何让该api在react-native 里面用js调用。一般就是在跟路由里面一进去就调用版本检查。

   我们需要做的就是将，该原生代码暴露给react-native 原生，让NativeModule来调用该发放。

这里我们就需要将原生在NativeModule里面注册，以便然后NativeModule来调用更新方法。

  在你的Mainactivity木有新建（UpdateApp.java，和UpdatePackage.java)

具体代码实现：

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.loveplusplus.update.UpdateChecker;
import com.paipanapp.MainActivity;

/**
 * Created by lj on 2017/5/6.
 */
public class UpdateApp extends ReactContextBaseJavaModule {

    private ReactContext reactContext;

    public UpdateApp(ReactApplicationContext reactContext) {
        super(reactContext);
        this.reactContext = reactContext;
    }

    @Override
    public String getName() {
        return "UpdateApp";
    }
    @Override
    public boolean canOverrideExistingModule() {
        return true;
    }
    @ReactMethod
    public void updateDialog (){
        UpdateChecker.checkForDialog(MainActivity.getMainActivity());
    }

}

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.List;
import java.util.Collections;
import java.util.ArrayList;

/**
 * Created by lj on 2017/5/6.
 */
public class UpdatePackage implements ReactPackage {
    List<NativeModule> modules=new ArrayList<>();
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        modules.add(new UpdateApp(reactContext));
        return modules;
    }

    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return Collections.emptyList();
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {

        return Collections.emptyList();
    }
}

然后我们需要做的就是在MainApplication里面来注册UpdatePackage.java)

protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new UpdatePackage()
    );
}

这里由于我们在UpdateApp.java里面 定义了我们将要用js来调用updateDialog方法。

所以我们就要实现该方法来调用第三方api接口。

注意：这里我们用了  MainActivity.getMainActivity()方法，

 @ReactMethod
    public void updateDialog (){
        UpdateChecker.checkForDialog(MainActivity.getMainActivity());
    }

所以我们得在MainActivity里面重构这个方法具体代码如下。

public MainActivity() {
    mainActivity = this;
}
public static MainActivity getMainActivity() {
    return mainActivity;
}
private static MainActivity mainActivity;

在AndroidManifest.xml里面添加权限

<uses-permission android:name="android.permission.INTERNET" />

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

好了到了这里

我们就可以很愉快的用js来调用 updateDialog方法了。

具体js代码如下

componentWillMount() {
    NativeModules.UpdateApp.updateDialog();
}

这里我们就能愉快的调用第三方组件了。

但是，有人说，我的apk下载地址还木有配，怎么就下载了？

别着急。接下来就是配置自己的apk下载地址。




找到你modul进来的第三方api

android-auto-update

然后找到

Constants.java

这里你就可以配置你的下载地址信息了。

class Constants {


    // json {"url":"http://192.168.205.33:8080/Hello/app_v3.0.1_Other_20150116.apk","versionCode":2,"updateMessage":"版本更新信息"}

    static final String APK_DOWNLOAD_URL = "url";
    static final String APK_UPDATE_CONTENT = "updateMessage";
    static final String APK_VERSION_CODE = "versionCode";


    static final int TYPE_NOTIFICATION = 2;

    static final int TYPE_DIALOG = 1;

    static final String TAG = "UpdateChecker";

    static final String UPDATE_URL = "xxx/xxx.json";
}

地址配置绝对地址。json文件格式如上。

这里硬更新就集成完毕。




结语：

   想要跟要的做react-native 开发，就要做好使用第三方或者自己写原生组件的准备，所以学无止境。