IconButton

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

Android

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~56.0.26

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

安装

Terminal

- npx expo install @expo/ui

- yarn expo install @expo/ui

- pnpm expo install @expo/ui

- bun 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`	-