Expo中使用react-native-render-html渲染fetch数据时报错求助

核心问题分析 #

你的代码存在两个关键错误导致报错：

1. source属性格式错误：RenderHTML组件的source参数要求是包含html字段的对象（或uri字段），而非直接传入HTML字符串。
2. useEffect依赖项错误：将eventsHTML作为依赖项会触发无限循环请求，每次更新eventsHTML都会重新发起请求，干扰组件正常渲染逻辑。

修复后的完整代码 #

import React, { useEffect, useState } from 'react'
import { ActivityIndicator, StyleSheet, View } from 'react-native';
import RenderHTML from 'react-native-render-html';
import { useWindowDimensions } from 'react-native';

const EventsScreen = () => {
    const [eventsHTML, setEventsHTML] = useState(null);
    const { width } = useWindowDimensions();

    useEffect(() => {
        fetch('https://www.google.com')
            .then(response => response.text())
            .then(html => {
                setEventsHTML(html);
                console.log("HTML加载完成");
            })
            .catch(err => console.error("请求失败:", err)); // 新增错误捕获，便于排查问题
    }, []); // 依赖项改为空数组，仅在组件首次挂载时发起请求

    return (
        <View style={styles.container}>
            {!eventsHTML ? (
                <ActivityIndicator size="large" color="#0000ff" />
            ) : (
                <RenderHTML contentWidth={width} source={{ html: eventsHTML }} />
            )}
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    }
});

export default EventsScreen;

关键修复点说明 #

• 修正source参数格式：把source={eventsHTML}改为source={{ html: eventsHTML }}，匹配组件要求的参数结构。
• 调整useEffect依赖：依赖项设为空数组，避免重复发起请求引发的无限循环。
• 添加错误捕获：在fetch流程中加入catch块，方便排查请求失败的原因。
• 优化布局样式：给容器添加flex布局，让加载指示器居中显示，提升用户体验。

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