React Native中RenderHtml组件打字机效果失效问题求助

问题原因 #

react-native-typewriter 只能处理直接子节点的文本内容，无法穿透到 RenderHtml 组件内部访问其渲染出的文本节点，所以嵌套使用时打字机效果完全失效。

解决方案 #

方案1：转纯文本后使用打字机（无格式保留） #

如果不需要保留HTML格式（如加粗、换行等），可以先把HTML转成纯文本，再用react-native-typewriter渲染。

1. 安装HTML转文本库：

npm install html-to-text

2. 代码实现：

import React from 'react';
import TypeWriter from 'react-native-typewriter';
import { convert } from 'html-to-text';

export default function App() {
  const htmlContent = '<p>hi i am rendering html</p>';
  // 将HTML转换为纯文本
  const plainText = convert(htmlContent);

  return (
    <TypeWriter 
      typing={1}
      onTypingEnd={() => console.log('打字结束')}
      minDelay={50}
      maxDelay={50}
    >
      {plainText}
    </TypeWriter>
  );
}

方案2：自定义渲染器保留格式实现打字机 #

如果需要保留HTML格式（如段落、加粗、斜体等），可以通过react-native-render-html的自定义渲染器，结合状态控制文本逐字显示。

1. 安装HTML解析库（用于提取文本总长度）：

npm install htmlparser2

2. 代码实现：

import React, { useState, useEffect, useRef } from 'react';
import RenderHtml from 'react-native-render-html';
import { Text } from 'react-native';
import { parse } from 'htmlparser2';

export default function App() {
  const htmlContent = '<p>hi i am rendering html</p><p>这是另一段带<strong>加粗</strong>的文本</p>';
  const [currentLength, setCurrentLength] = useState(0);
  const totalTextLengthRef = useRef(0);
  const timerRef = useRef(null);

  // 解析HTML获取所有文本的总长度
  useEffect(() => {
    let fullText = '';
    parse(htmlContent, {
      ontext(text) {
        fullText += text;
      },
      onend() {
        totalTextLengthRef.current = fullText.length;
      }
    });

    // 启动打字机定时器，控制逐字显示
    timerRef.current = setInterval(() => {
      setCurrentLength(prev => {
        if (prev >= totalTextLengthRef.current) {
          clearInterval(timerRef.current);
          return prev;
        }
        return prev + 1;
      });
    }, 50); // 调整此值控制打字速度，单位为毫秒

    return () => clearInterval(timerRef.current);
  }, [htmlContent]);

  // 自定义文本渲染器，截断文本到当前显示长度
  const renderers = {
    text: ({ children, ...props }) => {
      let accumulated = 0;
      let displayedText = '';
      // 遍历所有文本节点，累计长度直到达到currentLength
      for (const text of children) {
        const textLen = text.length;
        if (accumulated + textLen <= currentLength) {
          displayedText += text;
          accumulated += textLen;
        } else {
          const remaining = currentLength - accumulated;
          displayedText += text.slice(0, remaining);
          accumulated += remaining;
          break;
        }
      }
      return <Text {...props}>{displayedText}</Text>;
    }
  };

  return (
    <RenderHtml
      source={{ html: htmlContent }}
      renderers={renderers}
    />
  );
}

注意事项 #

• 方案2会完整保留HTML的格式（如段落换行、加粗样式），适合聊天场景需要展示富文本的需求。
• 可调整定时器的间隔时间（如50ms改成30ms）加快打字速度，反之则减慢。
• 如果HTML内容动态变化，useEffect会自动重新计算总长度并重启打字机效果。

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