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

图标按钮

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

Android

Included in Expo Go

GitHub

npm

更新日志

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

Filled、filled tonal 和 standard Material 3 图标按钮

安装

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.

用法

基础图标按钮

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

BasicIconButtonExample.tsx

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

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

图标按钮变体

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

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`

Android

Type: React.Element<IconButtonProps>

A filled icon button with a solid background.

`FilledTonalIconButton`

Android

Type: React.Element<IconButtonProps>

A filled tonal icon button with a muted background.

`IconButton`

Android

Type: React.Element<IconButtonProps>

A standard icon button with no background.

IconButtonProps

`children`

Android

Type: React.ReactNode

Content to display inside the icon button.

`colors`

Android

Optional • Type: IconButtonColors

Colors for icon button elements.

`enabled`

Android

Optional • Type: boolean • Default: true

Whether the icon button is enabled for user interaction.

`modifiers`

Android

Optional • Type: ModifierConfig[]

Modifiers for the component.

`onClick`

Android

Optional • Type: () => void

Callback that is called when the icon button is clicked.

`shape`

Android

Optional • Type: ShapeJSXElement

The shape of the icon button.

`OutlinedIconButton`

Android

Type: React.Element<IconButtonProps>

An outlined icon button with a border and no fill.

Types

`IconButtonColors`

Android

Colors for icon button elements.

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