HorizontalFloatingToolbar

一个用于显示浮动操作栏的 Jetpack Compose HorizontalFloatingToolbar 组件。

Android

GitHub

npm

更新日志

Bundled version:

~55.0.0-beta.0

Expo UI HorizontalFloatingToolbar 与官方的 Jetpack Compose FloatingActionButton API 保持一致，并显示一个悬浮在内容之上的水平工具栏，包含操作按钮。

安装

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.

用法

带 FloatingActionButton 的工具栏

将 IconButton 作为工具栏项目的直接子元素，并将 HorizontalFloatingToolbar.FloatingActionButton 用于主要操作。

ToolbarWithFABExample.tsx

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

export default function ToolbarWithFABExample() {
  return (
    <Host matchContents>
      <HorizontalFloatingToolbar>
        <IconButton onClick={() => console.log('Edit pressed')}>
          <Icon source={require('./assets/edit.xml')} contentDescription="编辑" />
        </IconButton>
        <IconButton onClick={() => console.log('Share pressed')}>
          <Icon source={require('./assets/share.xml')} contentDescription="分享" />
        </IconButton>
        <HorizontalFloatingToolbar.FloatingActionButton onPress={() => console.log('Add pressed')}>
          <Icon source={require('./assets/add.xml')} contentDescription="添加" />
        </HorizontalFloatingToolbar.FloatingActionButton>
      </HorizontalFloatingToolbar>
    </Host>
  );
}

API

import { HorizontalFloatingToolbar } from '@expo/ui/jetpack-compose';

Components

`HorizontalFloatingToolbar`

Android

Type: React.Element<HorizontalFloatingToolbarProps>

Renders a HorizontalFloatingToolbar component. A horizontal toolbar that floats above content, typically used for action buttons.

HorizontalFloatingToolbarProps

`children`

Android

Type: React.ReactNode

The children of the component.

`modifiers`

Android

Optional • Type: ExpoModifier[]

Modifiers for the component.

`variant`

Android

Optional • Literal type: string • Default: 'standard'

The variant of the horizontal floating toolbar.

Acceptable values are: 'standard' | 'vibrant'

`HorizontalFloatingToolbarFloatingActionButton`

Android

Type: React.Element<FloatingActionButtonProps>

FloatingActionButton component for HorizontalFloatingToolbar. This component marks its children to be rendered in the FAB slot.