React Native WebView组件加载HTML文件时无法加载全部资源求助

阿华AIGC实验室

2026-5-6

解决react-native-webview加载本地HTML无法加载关联资源的问题

我之前也遇到过一模一样的问题，刚切换到react-native-webview组件时，本地HTML能显示，但里面的CSS、图片、JS全加载不出来，反而旧的废弃Webview组件完全正常。这其实是因为两个组件处理本地资源路径的逻辑差异导致的，下面给你拆解原因和解决办法：

核心原因

旧的Webview组件会默认把本地HTML文件所在的目录作为资源加载的根路径，自动帮你解析相对路径的资源；但新的react-native-webview组件对资源路径的处理更严格，需要你显式指定资源的基础路径（baseUrl），否则它无法找到关联的CSS、图片等文件。

具体解决方案

1. 显式设置baseUrl加载本地HTML

不要直接用source={{ uri: 'file:///...' }}的方式加载HTML文件，而是先读取HTML内容，再配合baseUrl指定资源根目录：

首先需要安装react-native-fs来读取本地文件（如果还没装的话：npm install react-native-fs --save，然后完成依赖链接）
示例代码：

import React, { useState, useEffect } from 'react';
import { WebView } from 'react-native-webview';
import RNFS from 'react-native-fs';

const LocalWebView = () => {
  const [htmlContent, setHtmlContent] = useState('');

  useEffect(() => {
    const loadLocalHtml = async () => {
      // 确定HTML文件的路径：
      // iOS：文件需放在项目根目录，通过RNFS.MainBundlePath获取主包路径
      // 安卓：文件需放在android/app/src/main/assets目录下，路径为RNFS.MainBundlePath + '/你的文件名.html'
      const htmlFilePath = RNFS.MainBundlePath + '/index.html';
      try {
        const content = await RNFS.readFile(htmlFilePath, 'utf8');
        setHtmlContent(content);
      } catch (error) {
        console.error('加载HTML文件失败:', error);
      }
    };

    loadLocalHtml();
  }, []);

  return (
    <WebView
      style={{ flex: 1 }}
      source={{
        html: htmlContent,
        // 设置baseUrl为资源所在的根目录，这样HTML里的相对路径资源就能正确解析
        baseUrl: `file://${RNFS.MainBundlePath}/`,
      }}
    />
  );
};

export default LocalWebView;

2. 确保资源路径和配置正确

安卓端：把HTML和关联的CSS、图片等资源都放到android/app/src/main/assets目录下，这个目录下的文件会被打包到APK的assets文件夹中，能被react-native-fs读取到。
iOS端：在Xcode中把HTML和资源文件添加到项目的「Copy Bundle Resources」中（右键项目 -> Add Files to "你的项目名" -> 选择文件，确保勾选「Copy items if needed」）。
HTML中的资源路径：确保CSS、图片、JS的路径是相对路径，比如HTML在根目录，CSS在./styles.css，图片在./images/logo.png，这样配合baseUrl就能正确加载。

3. 替代方案：使用require加载（仅限简单场景）

如果你的HTML文件比较小，也可以直接用require导入，然后提取资源路径：

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

const LocalWebView = () => {
  const htmlFile = require('./assets/index.html');
  // 提取baseUrl：去掉文件名，保留目录路径
  const baseUrl = htmlFile.uri.replace('index.html', '');

  return (
    <WebView
      style={{ flex: 1 }}
      source={{
        uri: htmlFile.uri,
        baseUrl: baseUrl,
      }}
    />
  );
};

export default LocalWebView;

不过这个方案在某些复杂目录结构下可能不稳定，优先推荐第一种用react-native-fs的方式。