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 开发，就要做好使用第三方或者自己写原生组件的准备，所以学无止境。