文档
BlogChangelogStar us on GitHub
首页指南EASReferenceLearn

Reference version

存档Expo SnackDiscord and forums新闻邮件

This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

文本

用于显示带样式文本内容的组件。

Android
iOS
Web
Included in Expo Go

GitHub

npm

更新日志

Recommended version:
~56.0.26

一个用于显示文本的组件。默认会适配平台配色方案（浅色/深色），并通过 textStyle 暴露一组选定的排版属性。

安装

Terminal
- npx expo install @expo/ui
- yarn expo install @expo/ui
- pnpm expo install @expo/ui
- bun expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

使用

基本文本

TextExample.tsx
import { Host, Text } from '@expo/ui';

export default function TextExample() {
  return (
    <Host matchContents>
      <Text>你好，世界！</Text>
    </Host>
  );
}

带样式的文本

对字体排版相关属性（字号、字重、对齐方式）使用 textStyle。

StyledTextExample.tsx
import { Host, Text } from '@expo/ui';

export default function StyledTextExample() {
  return (
    <Host matchContents>
      <Text textStyle={{ fontSize: 24, fontWeight: '700', textAlign: 'center' }}>标题</Text>
    </Host>
  );
}

截断长文本

使用 numberOfLines 将长文本限制为指定行数，并在末尾显示省略号。

TruncatedTextExample.tsx
import { Host, Text } from '@expo/ui';

export default function TruncatedTextExample() {
  return (
    <Host style={{ flex: 1 }}>
      <Text numberOfLines={1}>
        一行很长的文本，在无法单行显示时会被截断。
      </Text>
    </Host>
  );
}

API

import { Text } from '@expo/ui';

Component

Text

Android
iOS
Web

Type: React.Element<TextProps>

A component for displaying styled text content.

Props for the Text component.

TextProps

children

Android
iOS
Web
Optional • Type: string

The text content to display.

disabled

Android
iOS
Web
Optional • Type: boolean

Whether the component is disabled. Disabled components do not respond to user interaction.

hidden

Android
iOS
Web
Optional • Type: boolean

Whether the component is hidden.

modifiers

Android
iOS
Optional • Type: ModifierConfig[]

Platform-specific modifier escape hatch. Pass an array of modifier configs from @expo/ui/swift-ui/modifiers or @expo/ui/jetpack-compose/modifiers.

numberOfLines

Android
iOS
Web
Optional • Type: number

Maximum number of lines to display. Text is truncated with an ellipsis when exceeded.

onAppear

Android
iOS
Web
Optional • Type: () => void

Called when the component appears on screen.

onDisappear

Android
iOS
Web
Optional • Type: () => void

Called when the component is removed from screen.

onPress

Android
iOS
Web
Optional • Type: () => void

Called when the component is pressed.

style

Android
iOS
Web
Optional • Type: Pick<ViewStyle, 'padding' | 'paddingHorizontal' | 'paddingVertical' | 'paddingTop' | 'paddingBottom' | 'paddingLeft' | 'paddingRight' | 'backgroundColor' | 'borderRadius' | 'borderWidth' | 'borderColor' | 'opacity' | 'width' | 'height'>

Platform-agnostic style properties. These are translated to SwiftUI modifiers on iOS and Jetpack Compose modifiers on Android.

testID

Android
iOS
Web
Optional • Type: string

Identifier used to locate the component in end-to-end tests.

textStyle

Android
iOS
Web
Optional • Type: { color: string, fontFamily: string, fontSize: number, fontWeight: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900', letterSpacing: number, lineHeight: number, textAlign: 'center' | 'left' | 'right' }

Text-specific styling (font, color, alignment).