Snackbar

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

Android

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~57.0.0

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

SnackbarHost 封装了 Compose 的 SnackbarHost 和 SnackbarHostState。在布局中只放置一次，然后在 ref 上调用 showSnackbar。Snackbar 会根据 duration 自动消失，也可以通过操作按钮或可选的关闭图标手动关闭。
Snackbar 是 SnackbarHost 的仅用于样式的子组件。传入它可以覆盖颜色，或将操作放到新的一行。

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') {
      // 用户点击了撤销，恢复该项。
    }
  };

  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`

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`

Optional • Type: ColorValue

The content color used for the action button.

`actionOnNewLine`

Optional • Type: boolean • Default: false

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

`containerColor`

Optional • Type: ColorValue

The background color of the snackbar container.

`contentColor`

Optional • Type: ColorValue

The preferred content color used for the message text.

`dismissActionContentColor`

Optional • Type: ColorValue

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

`modifiers`

Optional • Type: ModifierConfig[]

Modifiers for the component.

`SnackbarHost`

Type: React.Element<SnackbarHostProps>

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

SnackbarHostProps

`children`

Optional • Type: ReactNode

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

`modifiers`

Optional • Type: ModifierConfig[]

Modifiers for the component.

`ref`

Optional • Type: Ref<SnackbarHostRef>

Ref exposing the imperative showSnackbar method.

Types

`SnackbarDuration`

Literal type: string

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

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

`SnackbarHostRef`

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`

Literal type: string

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

Acceptable values are: 'actionPerformed' | 'dismissed'

`SnackbarShowOptions`

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`