按钮

用于显示原生按钮的 SwiftUI 按钮组件。

iOS

tvOS

Included in Expo Go

Recommended version:

~57.0.3

信息有关跨平台使用，请参阅通用 Button —— 它会根据平台呈现相应的原生组件。

Expo UI 按钮与官方 SwiftUI Button API 一致，并支持通过 buttonStyle、controlSize 以及其他修饰符进行样式设置。

🌐 Expo UI Button matches the official SwiftUI Button API and supports styling via the buttonStyle, controlSize, and other modifiers.

Two iOS 26 Liquid Glass buttons — a glassProminent Get started above a glass Learn more

安装

🌐 Installation

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.

用法

🌐 Usage

基础按钮

🌐 Basic button

BasicButtonExample.tsx

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

export default function BasicButtonExample() {
  return (
    <Host matchContents>
      <Button label="Press me" onPress={() => alert('Pressed!')} />
    </Host>
  );
}

带系统图片的按钮

🌐 Button with system image

ButtonWithImageExample.tsx

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

export default function ButtonWithImageExample() {
  return (
    <Host matchContents>
      <Button
        label="Download"
        systemImage="arrow.down.circle"
        onPress={() => alert('Downloading...')}
      />
    </Host>
  );
}

仅图标按钮

🌐 Icon-only button

使用 labelStyle 修饰符仅显示图标，同时保留标签以便无障碍访问。

🌐 Use the labelStyle modifier to show only the icon while keeping the label for accessibility.

IconOnlyButtonExample.tsx

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

export default function IconOnlyButtonExample() {
  return (
    <Host matchContents>
      <Button
        label="Settings"
        systemImage="gear"
        modifiers={[labelStyle('iconOnly')]}
        onPress={() => alert('Settings')}
      />
    </Host>
  );
}

按钮样式

🌐 Button styles

使用 buttonStyle 修饰符来更改按钮的外观。可用的样式有：bordered、borderedProminent、borderless、plain、glass 和 glassProminent。

🌐 Use the buttonStyle modifier to change the button's appearance. Available styles are: bordered, borderedProminent, borderless, plain, glass, and glassProminent.

注意：只有在使用 Xcode 26 构建并运行 iOS 26 及以上版本时，才可使用 glass 和 glassProminent 样式。

ButtonStylesExample.tsx

import { Host, Button, VStack } from '@expo/ui/swift-ui';
import { buttonStyle } from '@expo/ui/swift-ui/modifiers';

export default function ButtonStylesExample() {
  return (
    <Host matchContents>
      <VStack spacing={8}>
        <Button label="Bordered" modifiers={[buttonStyle('bordered')]} />
        <Button label="Bordered Prominent" modifiers={[buttonStyle('borderedProminent')]} />
        <Button label="Borderless" modifiers={[buttonStyle('borderless')]} />
        <Button label="Plain" modifiers={[buttonStyle('plain')]} />
      </VStack>
    </Host>
  );
}

按钮边框形状

🌐 Button border shape

使用 buttonBorderShape 修饰符来更改样式化按钮的形状。可用的形状有：automatic、capsule、roundedRectangle 和 circle（iOS 17 及以上）。

🌐 Use the buttonBorderShape modifier to change the shape of a styled button. Available shapes are: automatic, capsule, roundedRectangle, and circle (iOS 17+).

ButtonBorderShapeExample.tsx

import { Host, Button } from '@expo/ui/swift-ui';
import {
  buttonStyle,
  controlSize,
  buttonBorderShape,
  labelStyle,
} from '@expo/ui/swift-ui/modifiers';

export default function ButtonBorderShapeExample() {
  return (
    <Host matchContents>
      <Button
        label="Favorite"
        systemImage="heart.fill"
        modifiers={[
          buttonStyle('glass'),
          controlSize('extraLarge'),
          labelStyle('iconOnly'),
          buttonBorderShape('circle'),
        ]}
        onPress={() => alert('Favorited')}
      />
    </Host>
  );
}

控件大小

🌐 Control sizes

使用 controlSize 修饰符来调整按钮大小。可用的尺寸有：mini、small、regular、large 和 extraLarge。

🌐 Use the controlSize modifier to adjust the button size. Available sizes are: mini, small, regular, large, and extraLarge.

注意： extraLarge 尺寸仅在 iOS 17 及以上版本可用。

ControlSizeExample.tsx

import { Host, Button, VStack } from '@expo/ui/swift-ui';
import { buttonStyle, controlSize } from '@expo/ui/swift-ui/modifiers';

export default function ControlSizeExample() {
  return (
    <Host matchContents>
      <VStack spacing={8}>
        <Button label="Mini" modifiers={[controlSize('mini'), buttonStyle('bordered')]} />
        <Button label="Small" modifiers={[controlSize('small'), buttonStyle('bordered')]} />
        <Button label="Regular" modifiers={[controlSize('regular'), buttonStyle('bordered')]} />
        <Button label="Large" modifiers={[controlSize('large'), buttonStyle('bordered')]} />
      </VStack>
    </Host>
  );
}

按钮角色

🌐 Button roles

使用 role 属性来指示按钮的语义角色。可用的角色有：default、cancel 和 destructive。

🌐 Use the role prop to indicate the semantic role of the button. Available roles are: default, cancel, and destructive.

ButtonRolesExample.tsx

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

export default function ButtonRolesExample() {
  return (
    <Host matchContents>
      <VStack spacing={8}>
        <Button label="Default" role="default" />
        <Button label="Cancel" role="cancel" />
        <Button label="Delete" role="destructive" />
      </VStack>
    </Host>
  );
}

有色按钮

🌐 Tinted button

使用 tint 修饰符来更改按钮的颜色。

🌐 Use the tint modifier to change the button's color.

TintedButtonExample.tsx

import { Host, Button } from '@expo/ui/swift-ui';
import { tint } from '@expo/ui/swift-ui/modifiers';

export default function TintedButtonExample() {
  return (
    <Host matchContents>
      <Button label="Custom Color" modifiers={[tint('#FF6347')]} />
    </Host>
  );
}

按钮已禁用

🌐 Disabled button

使用 disabled 修饰符来禁用按钮。

🌐 Use the disabled modifier to disable the button.

DisabledButtonExample.tsx

import { Host, Button } from '@expo/ui/swift-ui';
import { disabled } from '@expo/ui/swift-ui/modifiers';

export default function DisabledButtonExample() {
  return (
    <Host matchContents>
      <Button label="Disabled" modifiers={[disabled()]} />
    </Host>
  );
}

自定义标签内容

🌐 Custom label content

你可以将自定义组件作为 children 传递，以实现更复杂的按钮标签内容。

🌐 You can pass custom components as children for more complex button label content.

CustomContentExample.tsx

import { Host, Button, VStack, Image, Text } from '@expo/ui/swift-ui';

export default function CustomContentExample() {
  return (
    <Host matchContents>
      <Button onPress={() => console.log('Pressed!')}>
        <VStack spacing={4}>
          <Image systemName="folder" />
          <Text>Folder</Text>
        </VStack>
      </Button>
    </Host>
  );
}

应用接口

🌐 API

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

Component

`Button`

Type: React.Element<ButtonProps>

Displays a native button component.

Example

import { Button } from '@expo/ui/swift-ui';
import { buttonStyle, controlSize, tint, disabled } from '@expo/ui/swift-ui/modifiers';

<Button
  role="destructive"
  onPress={handlePress}
  label="Delete"
  modifiers={[
    buttonStyle('bordered'),
    controlSize('large'),
    tint('#FF0000'),
    disabled(true)
  ]}
/>

ButtonProps

`children`

Optional • Literal type: union

Custom content for the button label. Use this for custom label views. Only nested elements are supported, not plain strings.

Acceptable values are: ReactElement<unknown, string | JSXElementConstructor<any>> | ReactElement[]

`label`

Optional • Type: string

The text label for the button. Use this for simple text buttons.

`onPress`

Optional • Type: () => void

A callback that is called when the button is pressed.

`role`

Optional • Type: ButtonRole

Indicates the role of the button.

`systemImage`

Optional • Type: SFSymbols7_0

A string describing the system image to display in the button. Only used when label is provided.

`target`

Optional • Type: string

Target identifier for the button, used for identifying which button was pressed in widgets and live activities.

Inherited Props

CommonViewModifierProps

Types

`ButtonRole`

Literal Type: string

The role of the button.

default - The default button role.
cancel - A button that cancels the current operation.
destructive - A button that deletes data or performs a destructive action.

Acceptable values are: 'default' | 'cancel' | 'destructive'