Docs
博客更新日志GitHub简中文档
首页指南EAS参考学习

Reference version

存档Expo SnackDiscord 和论坛新闻邮件
This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 55).

标签

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

iOS
tvOS

GitHub

npm

更新日志

For the complete documentation index, see llms.txt. Use this Use this file to discover all available pages.

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

安装

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="Favorites" 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="Custom Icon" 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="Settings" 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

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