警报

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

iOS

tvOS

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~57.0.18

Expo UI Alert 与官方 SwiftUI alert API 保持一致，并会展示一个原生 iOS 警告对话框，包含标题、操作，以及可选的消息。

Alert 是 ConfirmationDialog 的居中模态对应组件，后者会以从屏幕底部弹出的操作表形式渲染。两者共享相同的触发器／操作／消息槽位模型，因此调用方只需更改组件名称即可在它们之间切换。

安装

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.

用法

基本警告框

使用 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 style={{ flex: 1 }}>
      <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 style={{ flex: 1 }}>
      <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 style={{ flex: 1 }}>
      <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="删除"
            role="destructive"
            onPress={() => {
              console.log('已删除');
              setIsPresented(false);
            }}
          />
          <Button label="取消" 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