打字机效果无法正常工作RenderHtml组件（React - Native）

Question

我有一个基于聊天的应用程序，我在其中得到 html 格式的响应，我想用打字机效果渲染它。我正在使用下面的打字机包和渲染 html

'react-native-typewriter' 用于打字机，react-native-render-html 用于渲染 html 内容。

打字机效果不起作用，请查找下面的代码片段。

import RenderHtml from 'react-native-render-html';
import TypeWriter from 'react-native-typewriter';


export default function App() {
    return (
        <TypeWriter typing={1}
        onTypingEnd={() => console.log('logg')}
        minDelay={1}
        maxDelay={1}
        >
            <RenderHtml
              source={{ html:'<p>hi i am rendering html</p>'}}
            />
        </TypeWriter>
}

我尝试了多种方法来渲染它，但没有成功。我想要的是在 React Native 中渲染具有打字效果的 html 内容。如果有人能帮助我那就太好了。

Answer 1

由于 TypeWriter 是 Text 组件的包装器，所以它不能与 HTML 一起使用，所以我找到了另一种方法，这样我们就可以为 html 内容提供打字机效果。

我正在调用 printSentenceSet(result?.data?.id, resText)。

const printSentenceSet = (id, sentence, speed = 50) => {
    let index = 0;
  
    let timer = setInterval(function() {
      const char = sentence[index];
      
      if (char === '<') {
        index = sentence.indexOf('>', index);  
      }
      setCompResObj(
        {
          [id]: sentence.slice(0, index)
        }
      )
      if (++index === sentence.length) {
        clearInterval(timer);
      }
    }, speed);
  }

compResObj 是一个 useState 变量

<RenderHTML 
   contentWidth={width}
   tagsStyles={mixedStyle} 
   source={{html:compResObj[props.currentMessage._id]}} 
/>