ReactNative开发-检测版本更新（非热更新）

前言

在APP开发中，检测版本更新功能是应该说是必不可少的。那么既然有这样的需求，就要有对应的方法来解决。在RN混合开发中，可以使用react-native-app-upgrade组件来进行，接下来就以这个react-native-app-upgrade来操作检测版本更新功能。

具体实现

步骤1

从github上下载react-native-app-upgrade组件，将解压后得到的android_upgrade文件夹放到你需要添加版本更新功能的项目目录下android\app\src\main\java\com\包名下，如下图所示：

接着再把解压得到的ios_upgrade文件夹放到需要添加版本更新功能的项目目录\ios下，如下图所示：

接着修改android_upgrade文件夹下8个类文件的包名，如下图所示：

如果R文件报错也要修改成和包名一致，如下图所示：

步骤2

在AndroidMainfest.xml文件下添加权限和service组件

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

<service
        android:name="com.包名.upgrade.DownloadService"
        android:exported="true"/>

AndroidMainfest.xml完整代码

接着在android/app/src/main/res/values/strings.xml文件下添加

<string name="android_auto_update_download_progress">正在下载:%1$d%%</string>

步骤3

到MainApplication.java文件下，先添加一下代码，导入UpgradePackage.java文件 import 项目工程包名.UpgradePackage; 然后在getPackages（）方法中添加new UpUpgradePackage()，如下图所示：

步骤4

到需要添加检测版本更新的代码页面下，先导入NativeModules模块，如下图所示：

接着在构造方法里添加APP下载地址，如下图所示：

接着在需要触发检测版本更新功能的地方添加 NativeModules.upgrade.upgrade(this.state.apkUrl); 例如，在我自己的项目下，我为检测版本更新功能所写的代码

 <ItemActionViews
                 onPress={() => this.checkVersion()}   //触发checkVersion()版本检查方法
                 showTitle="当前版本" showText={this.state.localVersion}/>
//版本检查
    checkVersion() {
        let version = this.state.version;        //api中的版本号
        let localVersion = this.state.localVersion;    //本地版本号
        console.log('最新版本：' + version);
        console.log('当前版本：' + localVersion);
        if (Platform.OS === 'android') {
            if (version != localVersion) {
                Alert.alert('', '最新版本为' + version + '，是否下载', [{text: '取消', onPress: () => console.log('取消')}, {
                    text: '确定', onPress: () => {
                        NativeModules.upgrade.upgrade(this.state.apkUrl);
                    }
                },]);
            } else {
                Toast.show('当前为最新版本');
            }
        } else {
            NativeModules.upgrade.upgrade('1297109983', (msg) => {
                if ('YES' == msg) {
                    //跳转到APP Stroe
                    NativeModules.upgrade.openAPPStore('1297109983');
                } else {
                    Toast.show('当前为最新版本');
                }
            })
        }

    };

如果在配置中出现问题，请留言指出或参考组件的github地址，我会力所能及解答疑惑。