Text：是什么、文本显示及 React Native

React Native 中的 Text 是什么

Text 是一个用于显示文本内容的 React Native 组件。与存在许多语义标签用于文本的网页开发不同，在 React Native 中，所有文本元素都通过 Text 创建。该组件可以显示纯文本以及带有嵌套 Text 和样式化片段的复杂结构。

Text 自动处理 换行，控制字体系列、大小、颜色和对齐方式。该组件支持触摸事件（onPress），无需额外包装器即可创建可点击链接。一个重要限制：Text 不能直接放在 View 中——只能放在其他 Text 组件中或作为直接内容。

根据 React Native Nested Text，2024，嵌套的 Text 组件从父级继承样式。这允许在顶层设置基本样式，并为特定片段覆盖单个属性——类似于 span 在网页中使用 CSS 的工作方式。

Text 组件的属性和 API

Text 组件提供了一系列 props 用于管理显示、行为和可访问性。主要类别：样式 props（字体、大小、颜色、对齐）、显示 props（numberOfLines、lineBreakMode）和交互式 props（onPress、onLongPress）。

文本显示 props

numberOfLines 限制显示的行数，并在末尾添加省略号。ellipsizeMode 控制省略号的位置（head、middle、tail、clip）。adjustsFontSizeToFit 自动减小字体大小以使文本适应指定边界。lineBreakMode 决定如何截断超出 numberOfLines 的文本。

交互式 props

Text 支持 onPress 和 onLongPress 用于处理触摸。这允许在不使用 TouchableOpacity 的情况下创建文本链接。onTextLayout 返回渲染后文本的位置信息——对动画和定位很有用。

平台 props

在 iOS 上，提供了 disabled（禁用文本）、selectable（启用选择）、dataDetectorTypes（自动识别链接、电话、地址）。在 Android 上，提供了 selectable（通过 textSelectable）、includeFontPadding（删除多余间距）。

Text 与 HTML 元素 p 和 span 的区别

虽然 Text 在视觉上类似于 HTML 标签 p 和 span，但架构上的差异是显著的。React Native 缺少带有语义文本元素的 DOM 模型——所有文本节点都通过一个带有不同 props 的 Text 组件处理。

关键区别——通过 Text 嵌套进行样式继承。如果外部 Text 具有 fontSize: 18 和 color: blue，则所有嵌套的 Text 都继承这些样式。任何 prop 都可以通过设置特定值在内部 Text 中覆盖。这节省了代码并使结构更清晰。

文本样式和字体

Text 支持大多数字体相关的 CSS 属性：fontFamily、fontSize、fontWeight、fontStyle、color、letterSpacing、lineHeight、textAlign、textDecorationLine、textTransform。在 React Native 中，字体在平台级别连接，而不是通过 @font-face。

连接自定义字体

要使用自定义字体，需要将它们添加到 assets/fonts 文件夹并在 react-native.config.js 中指定。重新构建应用程序后，字体通过 fontFamily 可用。React Native 不直接支持网络字体（Google Fonts）——需要下载 .ttf 或 .otf 文件。

样式继承和级联

Text 中的继承机制不同于 CSS。样式仅从 Text 传递到嵌套的 Text，而不是从 View 传递到 Text。如果需要为整个应用程序设置字体，请使用 Text 组件的 defaultProps 或自定义包装组件。

<Text style={{ fontSize: 18, color: '#333' }}>
    This text is 18px and color #333
    <Text style={{ fontWeight: 'bold', color: '#007AFF' }}>
        bold and blue
    </Text>
    back to #333 color
</Text>

在此示例中，外部 Text 设置了 fontSize: 18 和 color: #333。内部 Text 继承了 fontSize（18），但将 fontWeight 覆盖为 bold，将 color 覆盖为 #007AFF。外部 Text 只继承自己的样式。这完全类似于 HTML 中嵌套 span 的工作方式。

Text 的实际示例

让我们看看 React Native 中使用 Text 的两个典型场景：使用嵌套格式化文本以及创建带有行限制的可点击组件。

示例 1：带格式的新闻卡片

在此示例中，Text 用于显示带有突出显示元素的多行文本：标题、日期和带链接的内容。

const NewsCard = ({ title, date, content }) => (
    <View style={styles.card}>
        <Text style={styles.title}>{title}</Text>
        <Text style={styles.date}>{date}</Text>
        <Text style={styles.content}>
            {content}
            {' ' }
            <Text
                style={styles.link}
                onPress={() => Linking.openURL(url)}
            >
                Read more
            </Text>
        </Text>
    </View>
);

在此结构中，有三个独立的 Text 组件（标题、日期、内容），每个都有各自的样式。在内容 Text 内部，嵌套了另一个带有 onPress 用于链接的 Text。这种模式用于新闻 feed、博客和评论。

示例 2：带行限制的文本

要显示带省略号的文本预览，可以使用 numberOfLines。这是列表中的产品卡片和文章的标准模式。

<Text
    numberOfLines={2}
    ellipsizeMode="tail"
    style={styles.preview}
>
    {longDescription}
</Text>

numberOfLines = 2 属性将文本限制为两行。如果文本更长，React Native 会自动在第二行末尾添加省略号。参数 ellipsizeMode: 'tail' 表示省略号应在末尾（head、middle、clip 也可用）。