问题描述:
在APP开发中,检测版本更新功能是应该说是必不可少的。那么既然有这样的需求,就要有对应的方法来解决。在RN混合开发中,可以使用react-native-app-upgrade组件来进行,接下来就以这个react-native-app-upgrade来操作检测版本更新功能。
步骤1:
从github上下载react-native-app-upgrade组件,将解压后得到的android_upgrade文件夹放到你需要添加版本更新功能的项目目录下(android\app\src\main\java\com\包名)下,如图1-1所示。
接着再把解压得到的ios_upgrade文件夹放到需要添加版本更新功能的项目目录(\ios)下,如图1-2所示。
接着修改android_upgrade文件夹下8个类文件的包名,如图1-2所示.
如果R文件报错也要修改成和包名一致,如图1-3所示。
步骤2:
在AndroidMainfest.xml文件下添加权限和service组件,如图2-1所示。
<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"/>
接着在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()
,如图3-1所示。
步骤4:
到需要添加检测版本更新的代码页面下,先导入NativeModules模块,如图4-1所示。
接着在构造方法里添加APP下载地址,如图4-2所示。
接着在需要触发检测版本更新功能的地方添加
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地址,我会力所能及解答疑惑。