react-native 自定义webview 本地加载

下载需要安装的依赖 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组件使用即可