React Native WebView加载本地HTML时CSS不生效问题求助

问题原因 #

用require()加载HTML文件时，WebView拿到的是纯HTML字符串，没有对应的文件目录上下文，自然无法识别相对路径引用的CSS文件，导致样式无法加载。

可行解决方案 #

方案1：将CSS内联到HTML中 #

直接把CSS内容写到HTML的<style>标签里，加载HTML时样式会直接生效：

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<title>VIVJOA®</title>
<meta name="apple-mobile-web-app-status-bar-style" content="#7D5895">
<meta name="theme-color" content="#7D5895" />
<style>
/* 把style.css里的所有样式代码复制到这里 */
body {
  color: #333;
  /* 其他样式代码... */
}
</style>
</head>

方案2：读取CSS内容并注入HTML #

在React Native代码里读取CSS文件内容，拼接进HTML字符串后再加载：

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

const DemoWebView = () => {
  const [htmlWithCss, setHtmlWithCss] = useState('');

  useEffect(() => {
    // 读取HTML和CSS文件内容
    const htmlContent = require('../../../html/demo/demo.html');
    const cssContent = require('../../../html/demo/css/style.css');
    
    // 替换HTML中的link标签为内联style
    const updatedHtml = htmlContent.replace(
      '<link href="css/style.css" rel="stylesheet">',
      `<style>${cssContent}</style>`
    );
    setHtmlWithCss(updatedHtml);
  }, []);

  return (
    <WebView
      style={{flex: 1}}
      source={{ html: htmlWithCss }}
    />
  );
};

export default DemoWebView;

方案3：使用本地文件URI加载（跨平台适配） #

通过本地文件URI加载完整的HTML目录，保留相对路径的有效性：

• iOS端：把html/demo文件夹拖入Xcode项目（勾选"Copy items if needed"），然后用如下代码加载：

<WebView
  style={{flex: 1}}
  source={{ uri: 'demo/demo.html' }}
/>

• Android端：把html/demo文件夹放到android/app/src/main/assets目录下，然后用：

<WebView
  style={{flex: 1}}
  source={{ uri: 'file:///android_asset/demo/demo.html' }}
/>

注意：确保HTML里的CSS相对路径css/style.css和实际文件结构一致（demo目录下有css子目录，内含style.css）。

内容的提问来源于stack exchange，提问作者Harshal Kalavadiya