React Native WebView安卓本地HTML触发NET::ERR_CLEARTEXT_NOT_PERMITTED的安全解决方法

问题原因 #

用require('./xxx.html')引入本地HTML时，Android端的WebView会将其解析为http://localhost/开头的明文URL，而Android 9及以上系统默认禁止明文HTTP流量，因此触发该错误。

无需开启usesCleartextTraffic=true的解决方法 #

方法1：直接读取HTML内容并传入html属性

通过文件系统读取本地HTML的内容，直接传递给WebView的html属性，完全绕过网络请求逻辑：

1. 安装文件操作库（如react-native-fs）：

npm install react-native-fs --save
# 或 yarn add react-native-fs

2. 读取文件并渲染：

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

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

  useEffect(() => {
    const loadHtml = async () => {
      // Android下本地文件存放在主包目录
      const filePath = RNFS.MainBundlePath + '/ConfirmationEmailPreview.html';
      try {
        const content = await RNFS.readFile(filePath, 'utf8');
        setHtmlContent(content);
      } catch (err) {
        console.error('加载HTML失败:', err);
      }
    };
    loadHtml();
  }, []);

  return (
    <WebView
      html={htmlContent}
      // 其他配置props
    />
  );
};

export default EmailPreview;

方法2：将HTML内容直接嵌入代码（适合短内容）

如果邮件模板内容不长，可直接将HTML写成字符串常量，避免文件读取：

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

const EmailPreview = () => {
  const emailHtml = `
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>确认邮件预览</title>
  <style>
    /* 邮件样式 */
    body { font-family: Arial, sans-serif; }
  </style>
</head>
<body>
  <h1>感谢您的注册</h1>
  <p>点击下方链接完成验证...</p>
</body>
</html>
  `;

  return (
    <WebView
      html={emailHtml}
      // 其他配置props
    />
  );
};

export default EmailPreview;

方法3：使用file://协议指向本地文件

将HTML文件移动到Android项目的assets目录（android/app/src/main/assets，没有则新建），然后用file:///android_asset/协议访问，该协议不属于明文HTTP流量，不会触发限制：

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

const EmailPreview = () => {
  const htmlSource = Platform.OS === 'android' 
    ? { uri: 'file:///android_asset/ConfirmationEmailPreview.html' }
    : require('./ConfirmationEmailPreview.html'); // iOS仍用原方式

  return (
    <WebView
      source={htmlSource}
      // 其他配置props
    />
  );
};

export default EmailPreview;

注意事项 #

• 方法3中，Android端的HTML文件必须放在assets目录，打包时会被纳入APK，无需额外配置路径。
• 三种方法均不涉及明文HTTP传输，符合谷歌的安全规范，无需修改AndroidManifest.xml中的usesCleartextTraffic。

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