悬浮操作按钮

遵循 Material Design 3 的 Jetpack Compose 悬浮操作按钮组件。

Android

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~57.0.18

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

- 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.

用法

标准 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,
  Text,
} from '@expo/ui/jetpack-compose';
import {
  align,
  fillMaxSize,
  offset,
} from '@expo/ui/jetpack-compose/modifiers';

const ITEMS = Array.from(
  { length: 20 },
  (_, index) => `Item ${index + 1}`
);

export default function FloatingFABExample() {
  return (
    <Host style={{ flex: 1 }}>
      <Box modifiers={[fillMaxSize()]}>
        <LazyColumn modifiers={[fillMaxSize()]}>
          {ITEMS.map(item => (
            <ListItem key={item}>
              <ListItem.HeadlineContent>
                <Text>{item}</Text>
              </ListItem.HeadlineContent>
            </ListItem>
          ))}
        </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: 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

`FloatingActionButton`

Android

Type: React.Element<FloatingActionButtonProps>

Renders a Material Design 3 standard FloatingActionButton.

Wraps FloatingActionButton.

Example

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

<Host matchContents>
  <FloatingActionButton onClick={() => console.log('pressed')}>
    <FloatingActionButton.Icon>
      <Icon source={require('./assets/add.xml')} />
    </FloatingActionButton.Icon>
  </FloatingActionButton>
</Host>

Props shared by all FloatingActionButton variants.

FloatingActionButtonProps

`children`

Android

Type: ReactNode

Slot-based children (use .Icon sub-component).

`containerColor`

Android

Optional • Type: ColorValue

The background color of the button container. Defaults to FloatingActionButtonDefaults.containerColor (primary container).

`modifiers`

Android

Optional • Type: ModifierConfig[]

Modifiers for the component.

`onClick`

Android

Optional • Type: () => void

Callback invoked when the button is clicked.

`LargeFloatingActionButton`

Android

Type: React.Element<LargeFloatingActionButtonProps>

Renders a Material Design 3 large FloatingActionButton.

Wraps LargeFloatingActionButton.

Example

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

<Host matchContents>
  <LargeFloatingActionButton onClick={() => console.log('pressed')}>
    <LargeFloatingActionButton.Icon>
      <Icon source={require('./assets/add.xml')} />
    </LargeFloatingActionButton.Icon>
  </LargeFloatingActionButton>
</Host>

Props for the LargeFloatingActionButton component. Same as FloatingActionButtonProps.

LargeFloatingActionButtonProps

Inherited props

FloatingActionButtonProps

`SmallFloatingActionButton`

Android

Type: React.Element<SmallFloatingActionButtonProps>

Renders a Material Design 3 small FloatingActionButton.

Wraps SmallFloatingActionButton.

Example

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

<Host matchContents>
  <SmallFloatingActionButton onClick={() => console.log('pressed')}>
    <SmallFloatingActionButton.Icon>
      <Icon source={require('./assets/add.xml')} />
    </SmallFloatingActionButton.Icon>
  </SmallFloatingActionButton>
</Host>

Props for the SmallFloatingActionButton component. Same as FloatingActionButtonProps.

SmallFloatingActionButtonProps

Inherited props

FloatingActionButtonProps