React Native 展示富文本（HTML标签）

本文使用 react-native-render-html 第三方组件来实现。

安装

yarn add react-native-render-html

使用

import RenderHtml from 'react-native-render-html'; // 引入
import { useWindowDimensions } from 'react-native';

const htmlContent = '<p>123...</p>';
const { width } = useWindowDimensions();

const htmlStyles = {
    p: {
        fontSize: 12,
        color: '#333333',
    }
}

return (
    <RenderHtml source={{ html: htmlContent }} contentWidth={width} tagsStyles={htmlStyles} />
)

设置 contentWidth 是为了正确处理屏幕旋转和图像缩放，不设置的话可能会导致在屏幕旋转后布局变得不一致，也会出现警告。如图： 

要想全局控制整体样式，需要设置 tagsStyles 属性，需要根据每个标签做适配，开发成本有些大。 

注意

如果传入的 source 为空，就会出现以下警告：

解决方法：添加判断。

<View>
  {
    htmlContent  ? (<RenderHtml source={{ html: htmlContent  }} contentWidth={width} tagsStyles={htmlStyles} />) : (<></>)
  }
</View>