reactNative更新App，自定进度条
reactNative更新App，自定进度条
实现原理：获取当前App的版本号与后台存储的版本号进行比较，不相同时则需要更新App
一、下载插件
yarn add rn-app-upgrade
二、安卓配置，react-native版本0.6以上的不需要更多配置
// 低于0.6+版本
react-native link rn-app-upgrade
找到node_modules/rn-app-upgrade/android/src/main/java/com/songlcy/rnupgrade/DownloadService.java文件修改：
备注1：修改源码是因为官方没有处理网络下载慢的时候android通知栏不会通知，只有下载进度变化时通知栏才会显示
1、修改因网络慢通知栏不能及时显示
@Override
protected void onHandleIntent(Intent intent) {
mNotifyManager = (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE);
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
mBuilder = new Builder(this, "downLoadChannelId");
NotificationChannel channel = new NotificationChannel("downLoadChannelId", "downLoadChannel", NotificationManager.IMPORTANCE_LOW);
mNotifyManager.createNotificationChannel(channel);
} else {
mBuilder = new Builder(this);
}
String appName = getString(getApplicationInfo().labelRes);
int icon = getApplicationInfo().icon;
mBuilder.setContentTitle(appName).setSmallIcon(icon);
String urlStr = intent.getStringExtra(Constants.APK_DOWNLOAD_URL);
InputStream in = null;
FileOutputStream out = null;
updateProgress(0); /**源代码中增加这一句**
try {
URL url = new URL(urlStr);
HttpURLConnection urlConnection = (HttpURLConnection) url.openConnection();
........
备注2：官网没有处理因网络慢下载失败的时候
2、还是在此文件中方法名为onHandleIntent的代码，修改catch中的代码
try {
URL url = new URL(urlStr);
HttpURLConnection urlConnection = (HttpURLConnection)
.......
} catch (Exception e) {
//下载失败的时候
Log.e(TAG, "download apk file error");
/源代码中加入下面的代码
mBuilder.setContentText("下载失败");
//setContentInent如果不设置在4.0+上没有问题，在4.0以下会报异常
PendingIntent pendingintent = PendingIntent.getActivity(this, 0, new Intent(), PendingIntent.FLAG_CANCEL_CURRENT);
mBuilder.setContentIntent(pendingintent);
mNotifyManager.notify(NOTIFICATION_ID, mBuilder.build());
} finally {
.........
}
三、IOS配置
1、将node_modules/ios_upgrade里面的文件拷贝到项目的IOS目录下，打开Xcode将这两个文件导入项目工程----->点击右键 Add filfe…
四、使用
1、安卓使用
import React, {
Component} from 'react';
import {
PermissionsAndroid,Text, View,NativeModules,DeviceEventEmitter,TouchableOpacity} from 'react-native';
///可通过NativeModules.upgrade获取versionName和versionCode
export default class Index extends React.Component {
constructor(props){
super(props);
this.state = {
}
}
goUserpage(){
NativeModules.upgrade.upgrade("https://qd.myapp.com/myapp/qqteam/QQ_JS/qqlite_4.0.0.1025_537062065.apk");
DeviceEventEmitter.addListener('LOAD_PROGRESS',(pro)=>{
//监听进度
console.log(pro)
})
}
componentDidMount(){
this.crequestMultiplePermission() //添加权限 安卓低版本需要手动授权
}
crequestMultiplePermission = async () => {
try {
const permissions = [
PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
];
const granteds = await PermissionsAndroid.requestMultiple(permissions);
if (granteds['android.permission.WRITE_EXTERNAL_STORAGE'] === 'granted') {
this.storage = true;
} else {
this.storage = false;
}
if (this.storage) return;
} catch (err) {
console.log(err);
}
};
render() {
return <View style={
{
flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<TouchableOpacity activeOpacity={
0.5} onPress={
this.goUserpage.bind(this)}>
<Text>更新App</Text>
</TouchableOpacity>
</View>;
}
}
2、ios使用
//AppId为上架后的应用的AppId可以到开发者中心中查看
if(iOS) {
NativeModules.upgrade.upgrade('AppId',(msg) =>{
if('YES' == msg) {
Alert.alert('发现新版本','是否下载',
[
{
text:"确定", onPress:() => {
//跳转到APP Stroe
NativeModules.upgrade.openAPPStore('AppId');
}},
{
text:"取消"}
]
);
} else {
// this.toast('当前为最新版本');
}
})
}
3、判断安卓还是ios
import {
Platform} from "react-native"
if(Platform.OS === 'ios'){
//IOS代码
}else{
//安卓代码
}
-------大功告成啦-------
如果不想下载包或者包已发生变化，可以使用下面的代码，以下代码是包的代码，代码已经更改
一、android
将文件中android下面的rnupgrade文件拷贝到项目/android/app/src/main/java/com/包名，文件夹下面。
修改rnupgrade文件夹里面所有java文件：
package com.这里改为你的包名.rnupgrade;
2、修改项目/android/app/src/main/java/com/包名/MainApplication.java文件
import com.包名.rnupgrade.UpgradePackage; //增加此处
....
@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
packages.add(new UpgradePackage()); //增加此处
return packages;
}
....
二、IOS：将ios_upgrade里面的文件拷贝到项目的IOS目录下，打开Xcode将这两个文件导入项目工程----->点击右键 Add filfe…
资源文件下载：点击下载
提取码：ncqj