IconButton

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

Android

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~58.0.1

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

安装

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,
  Surface,
} from '@expo/ui/jetpack-compose';

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

图标按钮变体

使用不同的图标按钮组件来体现不同程度的强调效果。

IconButtonVariantsExample.tsx

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

export default function IconButtonVariantsExample() {
  return (
    <Host matchContents>
      <Surface>
        <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>
      </Surface>
    </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: 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`	-