下载需要安装的依赖 yarn add
react-native-fs react-native-zip-archive
import RNFS from 'react-native-fs';
import { unzip } from 'react-native-zip-archive';
/**
* 获取webview的本地地址
*/
const remoteVersionUrl = `http://192.168.0.5:8080/version.json?a=${Math.random()}`; // 获取版本的url
const localPath = `${RNFS.DocumentDirectoryPath}/updated_site`; // 更新资源地址
const versionPath = `${RNFS.DocumentDirectoryPath}/version.json`; // 本地的版本url文件
export const getWebViewUrl = async () => {
try {
const versionInfo = await fetch(remoteVersionUrl).then(res => res.json());
console.log('versionInfo...', versionInfo, remoteVersionUrl)
// 读取本地版本信息,如果当前没有这个文件就写入
const localVersionInfo = await RNFS.exists(versionPath) ?
await RNFS.readFile(versionPath).then(data => JSON.parse(data)) :
{ version: null };
// 对比版本,如果不一致则下载并更新本地资源
if (versionInfo.version !== localVersionInfo.version) {
console.log('需要更新版本不一致1', `${RNFS.DocumentDirectoryPath}/dist.zip`)
const zipPath = `${RNFS.DocumentDirectoryPath}/dist.zip`;
const { promise } = RNFS.downloadFile({ // 下载到本地
fromUrl: versionInfo.url,
toFile: zipPath,
progress: progressData => {
console.log(`下载进度: ${progressData.bytesWritten} / ${progressData.contentLength}`);
// 你可以在这里添加状态更新逻辑,例如使用React状态更新下载进度条
const progressPercent = (progressData.bytesWritten / progressData.contentLength) * 100;
// 更新进度百分比
},
progressDivider: 10, // 此选项将决定回调函数被调用的频率
});
await promise;
// 清理旧资源
if (await RNFS.exists(localPath)) {
await RNFS.unlink(localPath);
}
// 解压新资源
await unzip(zipPath, localPath);
// 解压完成之后删除初始zip文件
await RNFS.unlink(zipPath);
// 更新本地版本文件,第一次可以下载到本地
await RNFS.writeFile(versionPath, JSON.stringify(versionInfo), 'utf8');
return localPath
console.log('localPathlocalPath...', localPath)
} else { // 如果本地是一样的版本号返回本地地址
console.log('版本号22是一样的', localPath)
return localPath
}
} catch (error) {
console.log('error...', error)
}
}
getWebViewUrl 返回的是在沙盒中webview的地址,给react-native-webview组件使用即可