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

警报

一个用于显示原生 iOS 警报对话框的 SwiftUI Alert 组件。

iOS

tvOS

Included in Expo Go

GitHub

npm

更新日志

Expo UI Alert 与官方 SwiftUI 警告 API 一致，并会显示一个原生 iOS 警告对话框，其中包含标题、操作按钮以及可选消息。

Alert 是居中的模态对应组件，与 ConfirmationDialog 相对；后者会作为从屏幕底部弹出的操作表呈现。二者共享相同的 trigger/actions/message 插槽模型，因此调用方只需更改组件名称即可在它们之间切换。

安装

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.

用法

基本警告

使用 Alert.Trigger 定义可见元素，并使用 Alert.Actions 提供对话框按钮。

BasicAlertExample.tsx

import { useState } from 'react';
import { Host, Alert, Button } from '@expo/ui/swift-ui';

export default function BasicAlertExample() {
  const [isPresented, setIsPresented] = useState(false);

  return (
    <Host matchContents>
      <Alert title="Saved" isPresented={isPresented} onIsPresentedChange={setIsPresented}>
        <Alert.Trigger>
          <Button label="Show alert" onPress={() => setIsPresented(true)} />
        </Alert.Trigger>
        <Alert.Actions>
          <Button label="OK" onPress={() => setIsPresented(false)} />
        </Alert.Actions>
      </Alert>
    </Host>
  );
}

取消和确认

将 role="cancel" 与确认按钮结合使用，以构建标准的“是/否”警告对话框。

CancelConfirmAlertExample.tsx

import { useState } from 'react';
import { Host, Alert, Button, Text } from '@expo/ui/swift-ui';

export default function CancelConfirmAlertExample() {
  const [isPresented, setIsPresented] = useState(false);

  return (
    <Host matchContents>
      <Alert title="Sign out?" isPresented={isPresented} onIsPresentedChange={setIsPresented}>
        <Alert.Trigger>
          <Button label="Sign out" onPress={() => setIsPresented(true)} />
        </Alert.Trigger>
        <Alert.Actions>
          <Button label="Sign out" onPress={() => console.log('Signed out')} />
          <Button label="Cancel" role="cancel" />
        </Alert.Actions>
        <Alert.Message>
          <Text>You will need to sign in again to access your account.</Text>
        </Alert.Message>
      </Alert>
    </Host>
  );
}

破坏性操作

在 Alert.Actions 内的 Button 上使用 role="destructive"，将其设置为破坏性操作的样式。

DestructiveAlertExample.tsx

import { useState } from 'react';
import { Host, Alert, Button, Text } from '@expo/ui/swift-ui';

export default function DestructiveAlertExample() {
  const [isPresented, setIsPresented] = useState(false);

  return (
    <Host matchContents>
      <Alert title="Delete account?" isPresented={isPresented} onIsPresentedChange={setIsPresented}>
        <Alert.Trigger>
          <Button label="Delete account" role="destructive" onPress={() => setIsPresented(true)} />
        </Alert.Trigger>
        <Alert.Actions>
          <Button
            label="Delete"
            role="destructive"
            onPress={() => {
              console.log('Deleted');
              setIsPresented(false);
            }}
          />
          <Button label="Cancel" role="cancel" />
        </Alert.Actions>
        <Alert.Message>
          <Text>This permanently deletes your account and all data. This cannot be undone.</Text>
        </Alert.Message>
      </Alert>
    </Host>
  );
}

API

import { Alert } from '@expo/ui/swift-ui';

Component

`Alert`

iOS

tvOS

Type: React.Element<AlertProps>

Alert presents a SwiftUI alert with a title, optional message, and action buttons.

See: Official SwiftUI documentation.

Props of the Alert component.

AlertProps

`children`

iOS

tvOS

Type: React.ReactNode

The contents of the alert. Should include Alert.Trigger, Alert.Actions, and optionally Alert.Message.

`isPresented`

iOS

tvOS

Optional • Type: boolean

Whether the alert is presented.

`onIsPresentedChange`

iOS

tvOS

Optional • Type: (isPresented: boolean) => void

A callback that is called when the isPresented state changes.

`title`

iOS

tvOS

Type: string

The title of the alert.

Inherited props

CommonViewModifierProps