使用react-native-render-html自定义标签提示无注册渲染器如何解决

react-native-render-html默认仅支持解析HTML5标准标签，你自定义的<red>不属于标准标签范畴，且tagsStyles属性仅对内置的标准标签生效，因此会触发未注册自定义渲染器的报错。

方案1：注册自定义标签渲染器（适用于必须使用自定义标签的场景） #

先定义自定义标签的渲染规则，再将渲染器配置到RenderHtml组件的renderers属性中即可，完整可运行代码示例如下：

import React from 'react';
import { useWindowDimensions, Text } from 'react-native';
import RenderHtml from 'react-native-render-html';

export default function App() {
  const { width } = useWindowDimensions();
  const source = {
    html: `
<red>
  dsfsd
</red>
`,
  };

  // 定义自定义标签渲染器
  const renderers = {
    red: ({ TDefaultRenderer, children, ...rest }) => (
      <TDefaultRenderer {...rest}>
        {/* 自定义标红样式 */}
        <Text style={{ color: 'red' }}>{children}</Text>
      </TDefaultRenderer>
    )
  };

  return (
    <RenderHtml
      contentWidth={width}
      source={source}
      renderers={renderers}
      // 可选：添加该属性消除自定义标签的告警提示
      customTags={['red']}
    />
  );
}

方案2：使用标准标签加类名（更轻量的实现方式，无需自定义渲染器） #

如果你不需要强制使用自定义标签，完全可以用HTML标准的<span>标签加自定义类名实现同等效果，代码更简单：

import React from 'react';
import { useWindowDimensions } from 'react-native';
import RenderHtml from 'react-native-render-html';

export default function App() {
  const { width } = useWindowDimensions();
  const source = {
    html: `
<span class="red">
  dsfsd
</span>
`,
  };

  // 给自定义类名配置样式
  const classesStyles = {
    red: {
      color: 'red'
    }
  };

  return (
    <RenderHtml
      contentWidth={width}
      source={source}
      classesStyles={classesStyles}
    />
  );
}

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