HorizontalFloatingToolbar

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

Android

Bundled version:

~55.0.2

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

🌐 Expo UI HorizontalFloatingToolbar matches the official Jetpack Compose FloatingActionButton API and displays a horizontal toolbar that floats above content, containing action 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

带浮动操作按钮的工具栏

🌐 Toolbar with FloatingActionButton

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

🌐 Use IconButton as direct children for toolbar items, and HorizontalFloatingToolbar.FloatingActionButton for the primary action.

ToolbarWithFABExample.tsx

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

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

应用接口

🌐 API

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

Components