React Native Android本地HTML引用另一个本地HTML失效问题求助

问题根源 #

Android平台下，WebView加载file:///android_asset目录下的HTML文件时，相对路径处理、跨文件访问权限以及target="_blank"的默认行为都和iOS存在差异，导致内部链接失效。

解决方案步骤 #

1. 修复HTML语法错误 #

你的HTML中链接使用了中文双引号，这会导致浏览器无法识别正确URL，同时target="_blank"在Android WebView中默认不支持新窗口跳转，建议修改为：

<a target="_self" href="another_Local.html">link</a>

2. 确保Android端文件位置正确 #

将another_Local.html和about.html放在Android项目的android/app/src/main/assets目录下（无此目录则手动创建），确保两者处于同一层级，保证相对路径能被正确解析。

3. 配置WebView的Android专属权限 #

在WebView组件中添加Android所需的文件访问权限属性：

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

// 函数组件示例
const LocalWebView = () => {
  const webViewRef = useRef(null);

  return (
    <WebView
      ref={webViewRef}
      originWhitelist={["*"]}
      allowFileAccess={true}
      // 新增Android专属权限
      allowFileAccessFromFileURLs={Platform.OS === 'android'}
      allowUniversalAccessFromFileURLs={Platform.OS === 'android'}
      javaScriptEnabled={true}
      androidLayerType={"hardware"}
      source={
        Platform.OS === "android" 
          ? { uri: "file:///android_asset/about.html" } 
          : require("./constants/about.html")
      }
      // 拦截跳转（若需保留target="_blank"）
      onShouldStartLoadWithRequest={(request) => {
        if (Platform.OS === 'android' && request.url.includes('another_Local.html')) {
          webViewRef.current?.loadUrl('file:///android_asset/another_Local.html');
          return false;
        }
        return true;
      }}
    />
  );
};

4. 适配target="_blank"跳转（可选） #

若必须保留target="_blank"，可通过注入JS覆盖默认跳转行为：

// 函数组件示例，在useEffect中注入
useEffect(() => {
  if (Platform.OS === 'android') {
    webViewRef.current?.injectJavaScript(`
      window.open = function(url) {
        window.location.href = url;
      };
    `);
  }
}, []);

验证步骤 #

1. 清理Android项目缓存：执行cd android && ./gradlew clean后重新编译运行
2. 确认assets目录下的两个HTML文件名大小写与代码引用一致（Android区分文件名大小写）
3. 测试链接跳转是否正常

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