Blog Changelog Star Us on GitHub

首页指南 EAS Reference Learn

Reference version

存档 Expo Snack Discord and forums 新闻邮件

标签

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

iOS

tvOS

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~57.0.0

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

在表单中包含 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: 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: ReactNode

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

`systemImage`

iOS

tvOS

Optional • Type: SFSymbols7_0

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