我之前也碰到过一模一样的情况——iOS端加载本地HTML正常，Android端却一片空白，核心原因就是iOS和Android对本地资源的打包、访问逻辑完全不同，而且非开发模式（生产构建）下的资源路径确实会发生变化。下面给你一步步拆解解决方案：

一、先明确路径变化的原因 #

• iOS端：不管开发还是生产模式，RN都会把你项目里的HTML文件当作普通资源打包进APP的bundle中，require('../assets/documents/document.html')能直接返回正确的资源URI，所以加载没问题。
• Android端：开发模式下metro会临时处理资源路径，但生产构建时，RN会把你项目assets目录下的所有文件复制到Android原生项目的android/app/src/main/assets目录下，此时原来的相对路径就失效了，必须用Android原生的本地资源访问格式：file:///android_asset/[你的文件路径]。

二、正确的跨平台实现方案 #

1. 先配置Metro识别HTML文件 #

确保你的metro.config.js（项目根目录下）里添加了html作为可解析的资源扩展名，否则metro可能会忽略你的HTML文件：

module.exports = {
  resolver: {
    assetExts: ['html', 'js', 'json', 'png', ...], // 把html加到已有的扩展名列表里
  },
};

2. 平台区分加载路径 #

通过Platform模块判断当前系统，分别给iOS和Android设置对应的source：

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

const MyScreen = () => {
  // 封装获取HTML资源的方法
  const getHtmlSource = () => {
    if (Platform.OS === 'ios') {
      // iOS直接用require即可
      return require('../assets/documents/document.html');
    } else {
      // Android下，路径对应Android原生assets目录下的文件
      // 你的项目assets/documents/document.html会被复制到android/app/src/main/assets/documents/document.html
      return { uri: 'file:///android_asset/documents/document.html' };
    }
  };

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

export default MyScreen;

3. 额外注意：HTML内引用其他资源的情况 #

如果你的HTML里还引用了本地CSS、JS或图片，Android端也要调整路径：

• 比如HTML里引用同目录下的style.css，iOS可以直接用./style.css，Android要改成file:///android_asset/documents/style.css；
• 或者统一用相对路径，确保HTML和依赖资源的相对位置在打包后保持不变（RN会完整复制assets目录的结构到Android的assets目录，所以相对位置是一致的，这种情况下相对路径也能生效）。

三、验证生产模式的加载情况 #

如果你要测试生产模式的效果，不要用react-native run-android，而是执行：

# 先打包Android APK
cd android && ./gradlew assembleRelease
# 或者生成bundle后运行
react-native run-android --variant=release

这样就能确认生产模式下HTML是否能正常加载了。

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