企业官网建设流程全解析

• UI组件
• 移动开发
• 前端

Text 是 react-native-elements 中最基础也最常用的排版组件，用于“以不同字号显示文字”（Text displays words and characters of various sizes）。本文以 4.0.0-beta.0 版本 Text 文档 与其 Usage 示例 为骨架，完整覆盖h1～h4标题层级、配套样式属性和主题接入方式，并结合 packages/base/src/Text/Text.tsx 源码与单元测试，深入讲解其字体缩放、平台字体、默认配色等底层实现。读完你既能直接上手用 Text 排版，也能理解它为何在不同设备上字号会变化、以及如何用 Theme 体系统一定制全局文字样式。

Text 是什么

Text 是对 React Native 原生<Text>的轻量封装，在原生组件能力之上增加了两样东西：

• 内置标题层级：通过h1～h4四个布尔开关，一行代码即可得到 40 / 34 / 28 / 22 四种基准字号的标题文本；
• 主题系统接入：Text 注册进withTheme(Text, 'Text')主题组件体系（见 packages/themed/src/Text/index.tsx），默认文字颜色取自主题的colors.black，并支持通过theme.components.Text做全局默认样式覆盖。

从 Text 源码 看，组件使用React.forwardRef转发 ref 到原生NativeText，并把accessibilityRole固定为"text"，天然具备无障碍语义。所有原生 TextProps（numberOfLines、selectable、onPress等）都会通过...rest原样透传，因此它是原生 Text 的"超集"，不损失任何原生能力。

快速上手：四个标题层级

在 Usage 可运行示例 中，Text 的使用方式如下：

import React from 'react'; import { StyleSheet, View } from 'react-native'; import { Text, useTheme } from 'react-native-elements'; type TextComponentProps = {}; const TextComponent: React.FunctionComponent<TextComponentProps> = () => { const { theme } = useTheme(); return ( <> <View style={styles.view}> <Text style={styles.text} h1 h1Style={{ color: theme?.colors?.secondary }}> Heading 1 </Text> <Text style={styles.text} h2 h2Style={{ color: theme?.colors?.success }}> Heading 2 </Text> <Text style={styles.text} h3 h3Style={{ color: theme?.colors?.warning }}> Heading 3 </Text> <Text style={styles.text} h4 h4Style={{ color: theme?.colors?.primary }}> Heading 4 </Text> </View> </> ); }; const styles = StyleSheet.create({ view: { margin: 10 }, text: { textAlign: 'center', padding: 5 }, more: { marginVertical: 20 }, button: { width: 120, marginLeft: 'auto', marginRight: 'auto' }, }); export default TextComponent;

这段示例展示了 Text 的三个关键习惯用法：

1. h1～h4与h1Style～h4Style成对使用：hX决定基准字号，hXStyle只在该层级生效时追加样式（示例里给每个层级配了不同的主题色）；
2. useTheme()读取主题色：theme.colors.secondary / success / warning / primary都是 react-native-elements 预置主题调色板中的语义色（定义于 packages/base/src/helpers/colors.ts，由 packages/themed/src/config/colors.ts 再导出）；
3. style与层级样式可共存：style={styles.text}负责居中与内边距，标题字号与颜色交给hX/hXStyle处理。

未开启任何hX时，Text 就是一个普通的、继承父级字号的原生文本，可以用于正文、标签、按钮文字等任意场景。

Props 完整说明

以下是 Text 文档 中列出的全部属性，它们在 Text.tsx 的 TextProps 接口 中均有对应声明，默认值也与文档一致。

几点需要特别注意：

• h1～h4是布尔开关而非字号数值。文档中的 40 / 34 / 28 / 22 是基准字号，实际渲染时会经过normalize()按屏幕宽度做等比缩放（见下文"字号是如何计算的"），所以不同设备上最终字号并不严格等于这四个数值。
• hXStyle只有在对应hX开启时才会合并进样式。比如只写h4Style而不写h4，该样式不会生效——这与 Text.tsx 中条件展开的实现一一对应。
• style会被扁平化合并，且支持传入样式数组。测试用例 Text.test.tsx 验证了style={[{ color: 'red' }, { fontSize: 30 }]}这种写法会被正确合并为{ color: 'red', fontSize: 30 }。
• h1Style与h2Style等可覆盖字号本身：它们以样式数组的形式追加在默认字号之后（StyleSheet.flatten后数组后项优先），因此h1Style={{ fontSize: 20 }}可以覆盖h1的基准字号。

样式优先级与合并顺序

Text 的最终样式由 Text.tsx 第 70-85 行 的一段StyleSheet.flatten([...])决定，合并顺序严格固定：

StyleSheet.flatten([ { ...Platform.select({ android: { ...(fonts.android.regular as TextStyle) }, }), color: theme?.colors?.black, }, style, (h1 || h2 || h3 || h4) && (styles.bold as TextStyle), h1 && StyleSheet.flatten([{ fontSize: normalize(40) }, h1Style]), h2 && StyleSheet.flatten([{ fontSize: normalize(34) }, h2Style]), h3 && StyleSheet.flatten([{ fontSize: normalize(28) }, h3Style]), h4 && StyleSheet.flatten([{ fontSize: normalize(22) }, h4Style]), ])

自底向上的覆盖规则可以概括为：

1. 基础层：默认文字颜色取theme.colors.black；Android 平台额外套用fonts.android.regular（即sans-serif常规字重）；
2. style层：用户传入的通用样式；
3. 加粗层：只要h1～h4任一开启，就套用styles.bold——在 Android 上对应 fonts.android.bold（sans-serif+fontWeight: 'bold'）；
4. 层级层：对应hX的字号（经normalize缩放）与该层级专属的hXStyle，hXStyle排在其后、优先级最高。

也就是说，四个标题层级默认自带加粗效果，hXStyle是优先级最高的覆盖入口。需要说明的是，styles.bold目前只在 Android 平台做了字体族映射（Platform.select仅含 android 分支），iOS 上的加粗依赖默认字体渲染；这是 Text.tsx 第 94-102 行 的源码结构呈现出的现状。

字号是如何计算的：normalize 与响应式缩放

文档标注的 40 / 34 / 28 / 22 并不是硬编码的最终字号，而是先交给 packages/base/src/helpers/normalizeText.tsx 处理：

import { moderateScale } from 'react-native-size-matters'; function normalize(number: number, factor = 0.25) { return moderateScale(number, factor); }

normalize内部使用react-native-size-matters的moderateScale(size, factor)：它基于屏幕宽度与基准宽度（375）的比例计算缩放，factor=0.25表示只按比例缩放 25%、其余 75% 保持绝对值，避免小屏上文字过小、大屏上文字失控。

这一点在单元测试中得到印证。Text.test.tsx 在 Jest 测试环境下断言：

• <Text h1 />→ 字号 ≈ 51.4
• <Text h2 />→ 字号 ≈ 43.7
• <Text h3 />→ 字号 ≈ 36
• <Text h4 />→ 字号 ≈ 28.3

测试环境模拟的屏幕宽度使 40 / 34 / 28 / 22 分别放大到了上述数值。这正说明：Text 的字号是响应式的，会随设备屏幕宽度变化；如果你需要完全固定字号，可以在style或hXStyle中显式传入fontSize覆盖。

与主题系统的深度集成

Text 在 packages/themed/src/Text/index.tsx 中以withTheme<TextProps>(Text, 'Text')方式注册，'Text'就是它的主题组件 key。结合 withTheme 实现，你可以在应用层面获得两层定制能力：

1. 全局默认样式：通过theme.components.Text设置所有 Text 的默认 props：

import { ThemeProvider } from 'react-native-elements'; const theme = { components: { Text: { h1Style: { fontSize: 44, fontWeight: '800' }, style: { color: '#333' }, }, }, }; export default function App() { return <ThemeProvider theme={theme}>{/* 应用内容 */}</ThemeProvider>; }

withTheme 会将components.Text与用户传入 props 做深合并，且对以Style/style结尾的属性采用数组合并策略（见 withTheme.tsx 的 combineByStyles），即主题样式与组件内样式拼接共存，而不是互相覆盖。如果components.Text是函数，还可以接收(props, theme)做动态计算（withTheme.tsx 第 48-50 行）。

2. 默认色与语义色：未提供ThemeProvider时，withTheme 会回退到lightColors与默认 spacing（withTheme.tsx 第 36-45 行），Text 的默认颜色theme.colors.black即来源于此。这也是为什么示例里可以用theme?.colors?.primary / secondary / success / warning给不同标题层级着色——颜色系统本身是主题驱动的。

在示例应用中查看真实效果

仓库的 example 应用 中提供了 Text 各层级的完整演示页面（含默认标题、带样式标题与组合用法），运行example应用后即可在设备/模拟器上直观对比h1～h4的实际渲染差异。若想快速验证组件行为，也可以直接运行 Text 的单元测试（依赖 jest）：

# 在仓库根目录安装依赖后，进入 packages/base 运行 yarn jest packages/base/src/Text/__tests__/Text.test.tsx

测试覆盖了快照渲染、四个层级的字号断言、children 渲染以及 style 数组合并等关键行为（Text.test.tsx），是理解 Text 语义的权威参照。

小结

react-native-elements 的 Text 组件把 React Native 原生 Text 扩展为一个带四级标题体系、响应式字号与主题化默认样式的排版原语：h1～h4提供开箱即用的标题字号，hXStyle提供层级专属微调，style兜底通用样式，theme.components.Text则实现全局统一定制。理解其样式合并顺序与normalize缩放机制后，你可以在任何页面里精准控制文字层级，同时保持跨设备的一致性排版。

• UI组件
• 移动开发
• 前端