获取获取请求后反应本机渲染 Html

Question

我正在使用react-native-render-html npm package 和 expo。我试图从useEffect中的网站获取一些数据并使用 package 来显示内容，但是我不断收到No source prop was provided. Nothing will be rendered的错误No source prop was provided. Nothing will be rendered No source prop was provided. Nothing will be rendered 。

我认为RenderHTML道具是在请求完成之前呈现的：

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

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

    useEffect(()=>{
        fetch('https://www.google.com')
        .then(response => response.text())
        .then(response => {setEventsHTML(response);console.log("render");});

        
    }, [eventsHTML]);
  return (
    <View>
        {!eventsHTML? <ActivityIndicator/> : <RenderHTML contentWidth={width} source={eventsHTML}/>}
    </View>
    // <Text>The data has {eventsHTML? 'loaded' : 'not loaded'}</Text>
    // <RenderHTML contentWidth={width} source={source}>Hello world</RenderHTML>
  )
}
export default EventsScreen;

H

Answer 1

渲染 html 第一组 html object 像这样：

const source = {
            html: eventsHTML,
        };

然后将此源 object 作为道具传递给 RenderHTML 组件，如下所示：

<RenderHTML contentWidth={width} source={source}/>