如何替换react-native-render-html的默认组件为自定义组件？

react-native-render-html完全支持替换默认渲染组件，核心是通过renderers配置项实现，以下是将<p>标签对应的默认Text组件替换为native-base的Text组件的具体操作：

1. 导入依赖 #

import React from 'react';
import { RenderHTML } from 'react-native-render-html';
import { Text } from 'native-base';

2. 编写自定义渲染函数 #

创建一个渲染函数，用来输出native-base的Text组件：

const customParagraphRenderer = (htmlAttribs, children, convertedCSSStyles, passProps) => {
  // 可在此处理样式、属性等逻辑
  return <Text {...htmlAttribs} style={convertedCSSStyles}>{children}</Text>;
};

3. 配置并使用RenderHTML #

把自定义渲染器绑定到对应的HTML标签（这里是<p>）：

const renderers = {
  p: customParagraphRenderer
};

// 组件中使用示例
const App = () => {
  const htmlContent = '<p>text</p>';
  return <RenderHTML contentWidth={300} source={{ html: htmlContent }} renderers={renderers} />;
};

这样处理后，原本渲染react-native默认<Text>的<p>标签，会输出native-base的<Text>组件，满足自定义组件替换需求。

如果要替换多个标签的默认组件，只需在renderers对象中添加更多键值对，键为HTML标签名，值为对应的自定义渲染函数即可。

内容的提问来源于stack exchange，提问作者Tomáš Gabriel