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

FloatingActionButton

遵循 Material Design 3 的 Jetpack Compose FloatingActionButton 组件。

Android

GitHub

npm

更新日志

Expo UI 提供四种 FloatingActionButton 变体，与 Material Design 3 FloatingActionButton API 对应：

SmallFloatingActionButton — 紧凑型 FAB
FloatingActionButton — 标准 FAB（默认尺寸）
LargeFloatingActionButton — 更大的 FAB
ExtendedFloatingActionButton — 带有图标和文本标签的 FAB，支持动画展开/折叠

每个组件都使用基于插槽的子组件（.Icon，以及对于 ExtendedFloatingActionButton 的 .Text）来组合内容。

注意：如果你需要在悬浮工具栏中使用多个操作按钮，请改用 HorizontalFloatingToolbar。

安装

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

StandardFABExample.tsx

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

export default function StandardFABExample() {
  return (
    <Host matchContents>
      <FloatingActionButton onClick={() => console.log('FAB pressed')}>
        <FloatingActionButton.Icon>
          <Icon source={require('./assets/add.xml')} />
        </FloatingActionButton.Icon>
      </FloatingActionButton>
    </Host>
  );
}

FAB 变体

FABVariantsExample.tsx

import {
  FloatingActionButton,
  Host,
  Icon,
  LargeFloatingActionButton,
  SmallFloatingActionButton,
} from '@expo/ui/jetpack-compose';
import { View } from 'react-native';

export default function FABVariantsExample() {
  return (
    <View style={{ flexDirection: 'row', gap: 16 }}>
      <Host matchContents>
        <SmallFloatingActionButton onClick={() => {}}>
          <SmallFloatingActionButton.Icon>
            <Icon source={require('./assets/add.xml')} />
          </SmallFloatingActionButton.Icon>
        </SmallFloatingActionButton>
      </Host>
      <Host matchContents>
        <FloatingActionButton onClick={() => {}}>
          <FloatingActionButton.Icon>
            <Icon source={require('./assets/add.xml')} />
          </FloatingActionButton.Icon>
        </FloatingActionButton>
      </Host>
      <Host matchContents>
        <LargeFloatingActionButton onClick={() => {}}>
          <LargeFloatingActionButton.Icon>
            <Icon source={require('./assets/add.xml')} />
          </LargeFloatingActionButton.Icon>
        </LargeFloatingActionButton>
      </Host>
    </View>
  );
}

ExtendedFloatingActionButton

ExtendedFABExample.tsx

import { ExtendedFloatingActionButton, Host, Icon, Text } from '@expo/ui/jetpack-compose';
import { useState } from 'react';

export default function ExtendedFABExample() {
  const [expanded, setExpanded] = useState(true);

  return (
    <Host matchContents>
      <ExtendedFloatingActionButton expanded={expanded} onClick={() => setExpanded(v => !v)}>
        <ExtendedFloatingActionButton.Icon>
          <Icon source={require('./assets/edit.xml')} />
        </ExtendedFloatingActionButton.Icon>
        <ExtendedFloatingActionButton.Text>
          <Text>编辑</Text>
        </ExtendedFloatingActionButton.Text>
      </ExtendedFloatingActionButton>
    </Host>
  );
}

悬浮于内容之上

使用带有 align('bottomEnd') 的 Compose Box，即可将 FAB 定位在可滚动内容之上，并且完全位于 Compose 层内。

FloatingFABExample.tsx

import {
  Box,
  FloatingActionButton,
  Host,
  Icon,
  LazyColumn,
  ListItem,
} from '@expo/ui/jetpack-compose';
import { align, fillMaxSize, fillMaxWidth, offset } from '@expo/ui/jetpack-compose/modifiers';

export default function FloatingFABExample() {
  return (
    <Host style={{ flex: 1 }}>
      <Box modifiers={[fillMaxSize()]}>
        <LazyColumn modifiers={[fillMaxSize()]}>{/* ...列表项... */}</LazyColumn>

        <FloatingActionButton
          modifiers={[align('bottomEnd'), offset(-16, -16)]}
          onClick={() => console.log('pressed')}>
          <FloatingActionButton.Icon>
            <Icon source={require('./assets/add.xml')} />
          </FloatingActionButton.Icon>
        </FloatingActionButton>
      </Box>
    </Host>
  );
}

自定义颜色

FABCustomColorExample.tsx

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

export default function FABCustomColorExample() {
  return (
    <Host matchContents>
      <ExtendedFloatingActionButton containerColor="#E8DEF8" onClick={() => console.log('pressed')}>
        <ExtendedFloatingActionButton.Icon>
          <Icon source={require('./assets/add.xml')} />
        </ExtendedFloatingActionButton.Icon>
        <ExtendedFloatingActionButton.Text>
          <Text>新建项目</Text>
        </ExtendedFloatingActionButton.Text>
      </ExtendedFloatingActionButton>
    </Host>
  );
}

API

import {
  SmallFloatingActionButton,
  FloatingActionButton,
  LargeFloatingActionButton,
  ExtendedFloatingActionButton,
} from '@expo/ui/jetpack-compose';

Components

`ExtendedFloatingActionButton`

Android

Type: React.Element<ExtendedFloatingActionButtonProps>

Renders a Material Design 3 ExtendedFloatingActionButton with animated label expansion.

Wraps ExtendedFloatingActionButton.

Example

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

<Host matchContents>
  <ExtendedFloatingActionButton expanded={true} onClick={() => console.log('pressed')}>
    <ExtendedFloatingActionButton.Icon>
      <Icon source={require('./assets/edit.xml')} />
    </ExtendedFloatingActionButton.Icon>
    <ExtendedFloatingActionButton.Text>
      <Text>Edit</Text>
    </ExtendedFloatingActionButton.Text>
  </ExtendedFloatingActionButton>
</Host>

Props for the ExtendedFloatingActionButton component.

ExtendedFloatingActionButtonProps

`children`

Android

Type: React.ReactNode

Slot-based children (use .Icon and .Text sub-components).

`expanded`

Android

Optional • Type: boolean • Default: true

Controls whether the label is shown (expanded) or hidden (collapsed).

Inherited Props

FloatingActionButtonProps