Snackbar

一种简短的通知，会显示在屏幕底部，在不打扰用户的情况下提供反馈。

Android

Included in Expo Go

GitHub

npm

更新日志

Bundled version:

~56.0.6

Expo UI 提供了两个组件，映射了 Jetpack Compose 的 Snackbar API：

SnackbarHost 封装了 Compose 的 SnackbarHost 和 SnackbarHostState。只需在布局中放置一次，然后在 ref 上调用 showSnackbar。Snackbar 会根据 duration 自动消失，也可以通过操作按钮或可选的关闭图标将其关闭。
Snackbar 是 SnackbarHost 的仅用于样式的子组件。传入它可以覆盖颜色，或将操作放到新的一行。它对应于 Compose 中 SnackbarHost(hostState) { data -> Snackbar(data, ...) } 里的 snackbar lambda 参数。

Material 3 snackbar 显示消息 'Item archived'，并带有一个 Undo 操作

安装

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.

使用

显示 snackbar

在布局中放置一次 SnackbarHost，然后在其 ref 上调用 showSnackbar 来显示消息。返回的 promise 在 snackbar 消失后会解析为 'actionPerformed' 或 'dismissed'。

SnackbarExample.tsx

import { useRef } from 'react';
import {
  Box,
  Button,
  Column,
  Host,
  SnackbarHost,
  Text,
  type SnackbarHostRef,
} from '@expo/ui/jetpack-compose';
import { align, fillMaxSize, fillMaxWidth, padding } from '@expo/ui/jetpack-compose/modifiers';

export default function SnackbarExample() {
  const hostRef = useRef<SnackbarHostRef>(null);

  const onArchive = async () => {
    const result = await hostRef.current?.showSnackbar({
      message: 'Item archived',
      actionLabel: 'Undo',
      duration: 'short',
    });
    if (result === 'actionPerformed') {
      // 用户点击了 Undo，恢复该项目。
    }
  };

  return (
    <Host style={{ flex: 1 }}>
      <Box modifiers={[fillMaxSize()]}>
        <Column modifiers={[padding(16, 16, 16, 16)]}>
          <Button onClick={onArchive}>
            <Text>Archive</Text>
          </Button>
        </Column>

        <Box modifiers={[align('bottomCenter'), fillMaxWidth()]}>
          <SnackbarHost ref={hostRef} />
        </Box>
      </Box>
    </Host>
  );
}

自定义样式

向 SnackbarHost 传入一个 Snackbar 子组件，以覆盖颜色，或将操作放到新的一行。Snackbar 本身不接受内容，消息和操作都来自每次 showSnackbar 调用。

StyledSnackbar.tsx

import { useRef } from 'react';
import {
  Box,
  Button,
  Column,
  Host,
  Snackbar,
  SnackbarHost,
  Text,
  type SnackbarHostRef,
} from '@expo/ui/jetpack-compose';
import { align, fillMaxSize, fillMaxWidth, padding } from '@expo/ui/jetpack-compose/modifiers';

export default function StyledSnackbar() {
  const hostRef = useRef<SnackbarHostRef>(null);

  const onSave = () => {
    hostRef.current?.showSnackbar({
      message: 'Saved',
      actionLabel: 'Undo',
    });
  };

  return (
    <Host style={{ flex: 1 }}>
      <Box modifiers={[fillMaxSize()]}>
        <Column modifiers={[padding(16, 16, 16, 16)]}>
          <Button onClick={onSave}>
            <Text>Save</Text>
          </Button>
        </Column>

        <Box modifiers={[align('bottomCenter'), fillMaxWidth()]}>
          <SnackbarHost ref={hostRef}>
            <Snackbar
              containerColor="#1E1E2E"
              contentColor="#CDD6F4"
              actionContentColor="#F38BA8"
              dismissActionContentColor="#CDD6F4"
            />
          </SnackbarHost>
        </Box>
      </Box>
    </Host>
  );
}

API

import { Snackbar, SnackbarHost } from '@expo/ui/jetpack-compose';

Components

`Snackbar`

Android

Type: React.Element<SnackbarProps>

Styling configuration for the snackbar shown by SnackbarHost. Pass as a child to override colors or place the action on a new line.

SnackbarProps

`actionContentColor`

Android

Optional • Type: ColorValue

The content color used for the action button.

`actionOnNewLine`

Android

Optional • Type: boolean • Default: false

Whether the action should be placed on a new line below the message. Useful for long action labels.

`containerColor`

Android

Optional • Type: ColorValue

The background color of the snackbar container.

`contentColor`

Android

Optional • Type: ColorValue

The preferred content color used for the message text.

`dismissActionContentColor`

Android

Optional • Type: ColorValue

The content color used for the dismiss-action icon button.

`modifiers`

Android

Optional • Type: ModifierConfig[]

Modifiers for the component.

`SnackbarHost`

Android

Type: React.Element<SnackbarHostProps>

A Material 3 SnackbarHost that displays snackbars triggered via its ref's showSnackbar method.

SnackbarHostProps

`children`

Android

Optional • Type: React.ReactNode

Optional Snackbar child supplying styling for shown snackbars. Mirrors Compose's SnackbarHost(hostState) { data -> Snackbar(data, ...) } lambda.

`modifiers`

Android

Optional • Type: ModifierConfig[]

Modifiers for the component.

`ref`

Android

Optional • Type: Ref<SnackbarHostRef>

Ref exposing the imperative showSnackbar method.

Types

`SnackbarDuration`

Android

Literal Type: string

How long the snackbar is shown. Mirrors Compose's SnackbarDuration enum.

Acceptable values are: 'short' | 'long' | 'indefinite'

`SnackbarHostRef`

Android

Property	Type	Description
showSnackbar	`(options: SnackbarShowOptions) => Promise<SnackbarResult>`	Shows a snackbar and resolves with `'actionPerformed'` when the user taps the action, or `'dismissed'` when it times out or the dismiss-action button is tapped. Subsequent calls queue and show after the current snackbar is dismissed.

`SnackbarResult`

Android

Literal Type: string

Reason a snackbar invocation resolved. Mirrors Compose's SnackbarResult enum.

Acceptable values are: 'actionPerformed' | 'dismissed'

`SnackbarShowOptions`

Android

Property	Type	Description
actionLabel(optional)	`string`	Label for the optional action button. When omitted, no action button is shown.
duration(optional)	`SnackbarDuration`	How long to show the snackbar. Defaults to `'short'` when an `actionLabel` is not provided, and `'indefinite'` when it is, matching Compose.
message	`string`	The message body of the snackbar.
withDismissAction(optional)	`boolean`	Whether to show a trailing close (X) icon button to dismiss the snackbar. Default:`false`