Expo应用生产构建（APK）中HTML无法渲染问题求助

核心原因 #

Expo Go开发环境与生产打包时的本地资源处理机制存在差异。你当前使用Asset.fromModule的方式在开发环境能正常获取资源，但打包后资源路径无法被正确解析，导致fetch操作失败，最终HTML内容为空，页面呈现空白状态。

解决方案 #

1. 配置app.json确保资源被打包 #

在项目根目录的app.json中，将HTML文件所在目录添加到assets数组，确保打包工具能正确识别并包含这些资源：

{
  "expo": {
    "assets": [
      "./assets/topicIntro/"
    ]
  }
}

2. 改用expo-file-system读取本地文件 #

expo-asset在生产打包后的路径处理容易出现异常，换成expo-file-system直接读取文件更稳定可靠：
首先安装依赖：

npx expo install expo-file-system

然后修改组件代码：

import { useState, useEffect } from "react";
import RenderHtml from "react-native-render-html";
import {
  StyleSheet,
  Modal,
  View,
  TouchableOpacity,
  useWindowDimensions,
  ScrollView,
  ActivityIndicator,
} from "react-native";
import * as FileSystem from "expo-file-system";

import Icon from "./Icon";
import colors from "../utility/colors";


const TopicSummary = ({ isVisible, onClose, topicId }) => {
  const { width, height } = useWindowDimensions();
  const [htmlContent, setHtmlContent] = useState("");
  const [loading, setLoading] = useState(false);

  // 打包后资源会被映射到documentDirectory下的assets目录
  const contentFilePath = FileSystem.documentDirectory + "assets/topicIntro/article.html";


  useEffect(() => {
    const readHtmlFile = async () => {
      try {
        setLoading(true);
        // 直接读取文件内容
        const html = await FileSystem.readAsStringAsync(contentFilePath);
        setHtmlContent(html);
      } catch (error) {
        console.error("读取HTML文件失败:", error);
        // 添加错误提示，避免页面完全空白
        setHtmlContent("<p>内容加载失败，请重试</p>");
      } finally {
        setLoading(false);
      }
    };

    // 仅当Modal显示时执行加载逻辑
    if (isVisible) {
      readHtmlFile();
    }
  }, [isVisible, contentFilePath]);

  return (
    <Modal visible={isVisible} animationType="slide">
      <ScrollView>
        <View style={styles.container}>
          {/* 补充关闭按钮，原代码未渲染该组件 */}
          <TouchableOpacity style={styles.closeBtn} onPress={onClose}>
            <Icon name="close" color={colors.dark} />
          </TouchableOpacity>
          
          {loading && <ActivityIndicator color="blue" size="large" />}
         
          <RenderHtml
            source={{
              html: htmlContent,
            }}
            contentWidth={width}
          />
        </View>
      </ScrollView>
    </Modal>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: "#fff",
  },
  closeBtn: {
    alignSelf: "flex-end",
    marginBottom: 16,
  },
});

3. 额外注意事项 #

• 确认HTML文件路径与app.json配置的目录完全对应，避免路径拼写错误
• 在catch块中添加错误提示，防止因加载失败导致页面完全空白
• 为useEffect添加contentFilePath作为依赖，确保路径变化时能重新加载内容

验证步骤 #

1. 执行打包命令：npx expo build:android
2. 安装生成的APK文件，测试HTML内容是否正常显示

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