博客更新日志 GitHub 简中文档

首页指南 EAS 参考学习

Reference version

存档 Expo Snack Discord 和论坛新闻邮件

This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 56).

标签

一个用于显示带有图标的文本的 SwiftUI Label 组件。

iOS

tvOS

Included in Expo Go

GitHub

npm

更新日志

Expo UI Label 与官方 SwiftUI Label API 一致，并在图标旁显示标题。

Form 中带有 SF Symbols 的三行 Label

安装

Terminal

- npx expo install @expo/ui

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

用法

带 SF Symbol 的基础标签

BasicLabelExample.tsx

import { Host, Label } from '@expo/ui/swift-ui';

export default function BasicLabelExample() {
  return (
    <Host matchContents>
      <Label title="收藏" systemImage="star.fill" />
    </Host>
  );
}

使用自定义图标

使用 icon 属性提供一个自定义 React 节点作为图标，而不是 SF Symbol。

LabelCustomIconExample.tsx

import { Host, Label, Image } from '@expo/ui/swift-ui';

export default function LabelCustomIconExample() {
  return (
    <Host matchContents>
      <Label title="自定义图标" icon={<Image systemName="sparkles" size={20} color="purple" />} />
    </Host>
  );
}

仅图标

使用 labelStyle 修饰符并设置为 iconOnly 来仅显示图标。即使图标不可见，也请始终提供 title 以保证无障碍访问。

LabelIconOnlyExample.tsx

import { Host, Label } from '@expo/ui/swift-ui';
import { labelStyle } from '@expo/ui/swift-ui/modifiers';

export default function LabelIconOnlyExample() {
  return (
    <Host matchContents>
      <Label title="设置" systemImage="gear" modifiers={[labelStyle('iconOnly')]} />
    </Host>
  );
}

API

import { Label } from '@expo/ui/swift-ui';

Component

`Label`

iOS

tvOS

Type: React.Element<LabelProps>

Renders a native label view, which could be used in a list or section.

LabelProps

`children`

iOS

tvOS

Optional • Type: React.ReactNode

Custom title view. Accepts any React node (for example, a VStack with title and subtitle). When provided, this takes precedence over title.

Deprecated: Use foregroundStyle modifier instead.

`color`

iOS

tvOS

Optional • Type: ColorValue

The color of the label icon.

`icon`

iOS

tvOS

Optional • Type: React.ReactNode

Custom icon view to be displayed in the label. When provided, this takes precedence over systemImage.

`systemImage`

iOS

tvOS

Optional • Type: SFSymbol

The name of the SFSymbol to be displayed in the label.

`title`

iOS

tvOS

Optional • Type: string

The title text to be displayed in the label.

Inherited Props

CommonViewModifierProps