React Native WebView加载外部CSS文件的问题求助

Hey there, let's sort out that CSS loading issue you're facing. The root problem here is that React Native's module resolver doesn't natively handle .css files like web-based React does, which is why your import is throwing that "module not found" error. Below are two reliable approaches to get your styles working in the WebView.

Approach 1: Use a Metro Transformer to Load CSS as String #

This is the simplest method for most projects, as it lets you import CSS directly as a string without messing with file paths.

Step 1: Install the transformer #

First, add the react-native-css-transformer package to handle CSS imports:

npm install react-native-css-transformer --save-dev

Step 2: Configure Metro #

Update your metro.config.js file (create it in your project root if it doesn't exist) to tell Metro how to process CSS files:

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

const config = {};

module.exports = mergeConfig(getDefaultConfig(__dirname), {
  transformer: {
    babelTransformerPath: require.resolve('react-native-css-transformer'),
  },
  resolver: {
    sourceExts: ['js', 'jsx', 'json', 'ts', 'tsx', 'css'], // Add 'css' to the list
  },
});

Step 3: Inject CSS into your HTML #

Now you can import your CSS as a string, then inject it into the <head> of your HTML before loading it into the WebView:

import { WebView } from 'react-native-webview';
import htmlContent from './myPage.html';
import cssContent from '../someCSS.css';

// Inject the CSS into the HTML's head section
const styledHtml = htmlContent.replace(
  '</head>',
  `<style type="text/css">${cssContent}</style></head>`
);

export default function MyComponent() {
  return <WebView source={{ html: styledHtml }} />;
}

Note: If your HTML doesn't have a </head> tag, wrap your original HTML content in a basic structure like <html><head></head><body>...</body></html> first.

Approach 2: Read CSS File with React Native FS (RNFS) #

If you prefer to read the CSS directly from the file system (useful for dynamic styles or larger files), here's how to do it correctly:

Step 1: Install RNFS #

npm install react-native-fs --save

For React Native versions ≥0.60, auto-linking should handle the native setup. For older versions, you'll need to link the module manually.

Step 2: Get the Correct File Path #

The key here is knowing where your CSS file is stored. If you've bundled it with your app:

• On iOS, use RNFS.MainBundlePath to access the app's bundle directory.
• On Android, use RNFS.DocumentDirectoryPath or RNFS.AssetDirectoryPath depending on where you placed the file.

Alternatively, if your CSS is in the project's source directory, you can use a relative path (but note that this only works in development; for production, you'll need to bundle the file properly).

Step 3: Read and Inject the CSS #

import { WebView } from 'react-native-webview';
import htmlContent from './myPage.html';
import RNFS from 'react-native-fs';
import { useState, useEffect } from 'react';

export default function MyComponent() {
  const [styledHtml, setStyledHtml] = useState(htmlContent);

  useEffect(() => {
    // Replace with your actual CSS file path
    const cssPath = RNFS.MainBundlePath + '/someCSS.css';
    
    RNFS.readFile(cssPath, 'utf8')
      .then(cssContent => {
        const updatedHtml = htmlContent.replace(
          '</head>',
          `<style type="text/css">${cssContent}</style></head>`
        );
        setStyledHtml(updatedHtml);
      })
      .catch(error => console.error('Failed to read CSS file:', error));
  }, []);

  return <WebView source={{ html: styledHtml }} />;
}

Quick Notes #

• Make sure your HTML file is being imported correctly (you probably already have a transformer set up for .html files, since that import works).
• If your HTML uses local images, you'll need to adjust their paths to use file:// URLs or bundle them as assets too.

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