react-native-render-html@6.3.4如何设置所有文本默认字号？

不需要逐一配置每个标签，有两种简洁的方式实现所有文本强制使用统一默认字号：

方法一：使用defaultTextProps全局设置Text样式 #

defaultTextProps会传递给所有由HTML组件生成的Text元素，直接在这里定义字号即可覆盖所有文本样式：

import HTML from 'react-native-render-html';

const htmlContent = `
<div>
    <div>text in div</div>
    <span>text in span</span>
    <span><b>text in bold</b></span>
</div>
`;

export default function App() {
  return (
    <HTML
      html={htmlContent}
      defaultTextProps={{
        style: { fontSize: 16 } // 这里设置统一的默认字号
      }}
    />
  );
}

方法二：通过stylesheet重置全局样式 #

利用stylesheet配置覆盖默认的标签样式，确保所有容器和文本标签都继承统一的字号：

import HTML from 'react-native-render-html';

const htmlContent = `
<div>
    <div>text in div</div>
    <span>text in span</span>
    <span><b>text in bold</b></span>
</div>
`;

const customStylesheet = {
  body: {
    fontSize: 16,
  },
  div: {
    fontSize: 'inherit', // 继承body的字号
  },
  span: {
    fontSize: 'inherit',
  },
  b: {
    fontSize: 'inherit', // 确保粗体文本也继承字号，不使用默认放大
  },
  // 其他可能包含文本的标签都设置为inherit
};

export default function App() {
  return (
    <HTML
      html={htmlContent}
      stylesheet={customStylesheet}
    />
  );
}

说明 #

• 方法一更简单直接，适合完全统一所有文本字号的场景，不管原HTML标签的默认样式是什么。
• 方法二更灵活，允许你针对特定标签做额外调整，同时保证字号统一。

内容的提问来源于stack exchange，提问作者Christopher Belknap