IconButton

Jetpack Compose IconButton 组件用于显示原生 Material3 图标按钮。

Android

Included in Expo Go

Recommended version:

~57.0.3

Expo UI 提供四个图标按钮组件，这些组件与官方 Jetpack Compose IconButton API 相匹配：IconButton、FilledIconButton、FilledTonalIconButton 和 OutlinedIconButton。所有变体共享相同的属性，并接受可组合的子组件作为内容。

🌐 Expo UI provides four icon button components that match the official Jetpack Compose IconButton API: IconButton, FilledIconButton, FilledTonalIconButton, and OutlinedIconButton. All variants share the same props and accept composable children for content.

Filled, filled tonal, and standard Material 3 icon buttons

安装

🌐 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 icon button

一个没有背景的标准图标按钮，通常用于工具栏操作。

🌐 A standard icon button with no background, typically used for toolbar actions.

BasicIconButtonExample.tsx

import { Host, IconButton, Icon } from '@expo/ui/jetpack-compose';

export default function BasicIconButtonExample() {
  return (
    <Host matchContents>
      <IconButton onClick={() => alert('Pressed!')}>
        <Icon source={require('./assets/settings.xml')} size={24} />
      </IconButton>
    </Host>
  );
}

图标按钮变体

🌐 Icon button variants

使用不同的图标按钮组件来传达不同程度的强调。

🌐 Use different icon button components to convey varying levels of emphasis.

IconButtonVariantsExample.tsx

import {
  Host,
  IconButton,
  FilledIconButton,
  FilledTonalIconButton,
  OutlinedIconButton,
  Icon,
  Row,
} from '@expo/ui/jetpack-compose';

export default function IconButtonVariantsExample() {
  return (
    <Host matchContents>
      <Row horizontalArrangement={{ spacedBy: 8 }}>
        <IconButton onClick={() => {}}>
          <Icon source={require('./assets/star.xml')} size={24} />
        </IconButton>
        <FilledIconButton onClick={() => {}}>
          <Icon source={require('./assets/star.xml')} size={24} />
        </FilledIconButton>
        <FilledTonalIconButton onClick={() => {}}>
          <Icon source={require('./assets/star.xml')} size={24} />
        </FilledTonalIconButton>
        <OutlinedIconButton onClick={() => {}}>
          <Icon source={require('./assets/star.xml')} size={24} />
        </OutlinedIconButton>
      </Row>
    </Host>
  );
}

应用接口

🌐 API

import {
  IconButton,
  FilledIconButton,
  FilledTonalIconButton,
  OutlinedIconButton,
} from '@expo/ui/jetpack-compose';

Components

`FilledIconButton`

Type: React.Element<IconButtonProps>

A filled icon button with a solid background.

`FilledTonalIconButton`

Type: React.Element<IconButtonProps>

A filled tonal icon button with a muted background.

`IconButton`

Type: React.Element<IconButtonProps>

A standard icon button with no background.

IconButtonProps

`children`

Type: ReactNode

Content to display inside the icon button.

`colors`

Only for:

Android

Optional • Type: IconButtonColors

Colors for icon button elements.

`enabled`

Optional • Type: boolean • Default: true

Whether the icon button is enabled for user interaction.

`modifiers`

Optional • Type: ModifierConfig[]

Modifiers for the component.

`onClick`

Optional • Type: () => void

Callback that is called when the icon button is clicked.

`shape`

Optional • Type: ShapeJSXElement

The shape of the icon button.

`OutlinedIconButton`

Type: React.Element<IconButtonProps>

An outlined icon button with a border and no fill.

Types

`IconButtonColors`

Colors for icon button elements.

Property	Type	Description
containerColor(optional)	`ColorValue`	-
contentColor(optional)	`ColorValue`	-
disabledContainerColor(optional)	`ColorValue`	-
disabledContentColor(optional)	`ColorValue`	-