醉临武-临武县第一中学官网

通过android-auto-update在react-native中实现APP版本自检测升级

 PS:本教程仅适用于安卓

 1.开源组件(android-auto-update)

  用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 051z.cc on 2017/10/9.
 */
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 051z.cc on 2017/10/9.
 */
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/LWYZ/app_v3.0.1_Other_20181006.apk","versionCode":2,"updateMessage":"版本更新信息:临武一中官网www.051z.cc"}

    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文件格式如上。

这里硬更新就集成完毕。