如何在React Native WebView中使用HTML、CSS、JS及静态资源文件？

核心结论 #

直接导入本地文件的需求完全可以实现，以下是3种常用的可行方案，可根据你的项目场景选择：

方案1：平台原生asset打包（全平台通用，推荐中大型web项目使用） #

这种方案不需要修改web端原有代码，直接按原生平台的静态资源规范存放即可：

• 首先统一整理web资源：把所有HTML、JS、CSS、图片等资源放在同一个目录下（例如命名为web），确保资源之间的引用都是相对路径
• Android端配置：把整个web目录放到Android项目的/android/app/src/main/assets/路径下
• iOS端配置：在Xcode中右键项目根目录，选择「Add Files to [项目名]」，选中你的web目录，勾选Copy items if needed，并选择「Create folder references」选项，添加到项目中
• WebView调用代码示例：

import { Platform } from 'react-native';
import WebView from 'react-native-webview';

const WebPage = () => {
  const sourceUri = Platform.OS === 'android' 
    ? 'file:///android_asset/web/index.html'
    : 'web/index.html';
  
  return (
    <WebView
      source={{ uri: sourceUri }}
      allowFileAccess={true}
      originWhitelist={['*']}
      javaScriptEnabled={true}
    />
  )
}

方案2：资源转字符串注入（适合小型单页面场景，无需平台配置） #

如果你的web页面逻辑简单、资源少，可以直接通过导入器把资源转成字符串拼接后传给WebView：

• 先配置打包工具支持raw导入：在metro.config.js中添加对html、css、js后缀文件的raw导入支持，或者直接在导入路径后加?raw后缀（新版RN/Expo默认支持）
• 导入并拼接资源：

// 直接导入各资源为字符串
import htmlStr from './web/index.html?raw';
import cssStr from './web/style.css?raw';
import jsStr from './web/script.js?raw';

// 把css和js注入到HTML中
const fullHtml = htmlStr.replace('</head>', `<style>${cssStr}</style></head>`)
  .replace('</body>', `<script>${jsStr}</script></body>`);

// WebView调用
<WebView source={{ html: fullHtml }} />

• 注意：如果有图片等二进制资源，建议转成base64内嵌到HTML/CSS中，避免路径解析问题。

方案3：本地静态服务托管（适合复杂web项目，无跨域问题） #

如果你的web项目是完整的多路由应用（比如Vue/React打包后的产物），可以在RN端启动一个本地轻量HTTP服务，把web资源目录作为静态根目录，WebView直接访问本地服务地址即可，完全不需要修改web项目代码，也不存在路径、跨域问题，可直接用RN生态的静态服务第三方库实现。

注意事项 #

• 所有资源的相对路径引用要以入口HTML的所在目录为根目录，避免引用失效
• 如需实现RN和WebView的双向通信，三种方案都支持标准的postMessage机制，不受资源加载方式影响
• 生产打包前要确认所有web资源都已被纳入对应平台的打包资源清单，避免出现线上资源丢失问题

内容的提问来源于stack exchange，提问作者Bhaskar Joshi