React Native + Web 本地文件加载方案与踩坑总结

# 导语

在 React Native 项目中加载 Web 页面时，如果直接使用网络 URL，不仅需要等待资源加载，还可能面临网络不稳定导致的页面空白问题。将 Web 资源打包到 App 本地，可以实现秒开体验，大幅提升用户体验。

本文总结了在 React Native 中加载本地 Web 静态资源的完整方案，包含打包配置、RN 集成、RN 与 Web 通信等核心内容。

# 一、Next.js 打包配置

# 1.1 打包命令

首先需要修改 package.json 中的打包命令：

"build:app": "cross-env APP_MODE=1 next build && sh ./scripts/buildAfter.sh"

# 1.2 构建后处理脚本

创建 scripts/buildAfter.sh 脚本，处理构建产物：

cd dist

# 重命名，避免在安卓端加载不出来
mv ./_next ./next

# 替换代码中的 _next 为 next
grep -rli '_next' * | xargs -I@ sed -i '' 's/_next/next/g' @

为什么要重命名？

在安卓端，assets 目录下的文件以下划线开头可能会导致加载失败。将 _next 重命名为 next 可以避免这个问题。

# 二、Next.js 端接收数据

# 2.1 获取注入参数

通过 window.injectParams 获取 React Native WebView 注入的参数：

// 获取 react-native webview 注入的 window.injectParams 参数
export const getInjectParams = () => {
  const query = typeof window !== 'undefined' ? window?.injectParams || {} : {}
  return query as InjectParams
}

# 2.2 监听 RN 消息

实现 RN 与 Web 双向通信，接收来自 RN 的消息：

useEffect(() => {
  if (process.env.APP_MODE !== '1') return

  const messageHandler = (