rn-h5-preloader

React Native 插件，用于预加载 WebView 中的 H5 内容，解决首次加载慢的问题。

安装

npm install rn-h5-preloader
# 或
yarn add rn-h5-preloader

确保您已经安装了 peer dependencies：

npm install react-native-webview
# 或
yarn add react-native-webview

功能

• 在应用启动时预加载 H5 内容，提高页面加载速度
• 使用隐藏的 WebView 进行预加载，避免跨域问题
• 支持预加载多个 URL
• 与用户自己的 WebView 组件兼容，无需使用自定义组件

使用方法

1. 初始化并预加载 H5 内容

在应用启动时（如 App.js）初始化预加载：

// 方法1：使用顶层init方法（最简单）
import { init } from 'rn-h5-preloader';

init(
  [
    'https://example.com/page1',
    'https://example.com/page2'
  ],
  {
    timeout: 30000,
    cacheExpiration: 10 * 60 * 1000, // 10分钟
    useInteractionManager: true, // 使用InteractionManager优化加载时机，默认为true
  }
);

// 方法2：使用H5PreloadManager
// import { H5PreloadManager } from 'rn-h5-preloader';
//
// H5PreloadManager.init(
//   [
//     'https://example.com/page1',
//     'https://example.com/page2'
//   ],
//   {
//     timeout: 30000,
//     cacheExpiration: 10 * 60 * 1000, // 10分钟
//   }
// );

2. 在您的 WebView 组件中使用预加载内容

在您的 WebView 组件中，您可以检查 URL 是否已预加载：

import React from 'react';
import { View } from 'react-native';
import { WebView } from 'react-native-webview';
import { H5PreloadManager } from 'rn-h5-preloader';

const MyWebView = ({ url }) => {
  // 检查是否已预加载
  const preloadManager = H5PreloadManager.getInstance();
  const isPreloaded = preloadManager.isPreloaded(url);

  console.log('是否已预加载:', isPreloaded);

  return (
    <View style={{ flex: 1 }}>
      <WebView
        source={{ uri: url }}
        // 您可以使用自己的WebView配置
      />
    </View>
  );
};

export default MyWebView;

3. 检查预加载状态

您可以使用 H5PreloadManager 来检查预加载状态：

import { H5PreloadManager } from 'rn-h5-preloader';

// 检查是否已预加载
const preloadManager = H5PreloadManager.getInstance();
const isPreloaded = preloadManager.isPreloaded('https://example.com/page1');

console.log('是否已预加载:', isPreloaded);

// 清除缓存
preloadManager.clearCache();
// 或清除特定URL的缓存
preloadManager.clearCache('https://example.com/page1');

API 参考

顶层 API

函数	描述
init(urls, options?)	初始化并预加载多个URL（推荐使用）

H5PreloadManager

H5PreloadManager 是一个单例类，用于管理 H5 页面的预加载和缓存。

主要方法

方法	描述
init(urls, options?)	初始化并预加载多个URL（静态方法）
getInstance()	获取单例实例
preload(url, options?)	预加载 H5 页面
isPreloaded(url)	检查 URL 是否已预加载
clearCache(url?)	清除缓存，不提供url则清除所有缓存
setDefaultOptions(options)	设置默认预加载选项

预加载选项

选项	类型	默认值	描述
timeout	number	30000	预加载超时时间（毫秒）
headers	object	undefined	请求头
userAgent	string	undefined	用户代理
cacheExpiration	number	300000	缓存过期时间（毫秒）
useInteractionManager	boolean	true	是否使用InteractionManager优化加载时机，在动画和交互完成后再执行预加载

许可证

MIT