ConfirmationDialog

用于显示确认提示的 SwiftUI ConfirmationDialog 组件。

iOS

tvOS

Included in Expo Go

Recommended version:

~57.0.22

Expo UI ConfirmationDialog 与官方 SwiftUI confirmationDialog API 相匹配，并渲染带有标题、操作和可选消息的操作表样式对话框。

ConfirmationDialog asking the user to confirm a destructive action

安装

🌐 Installation

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.

用法

🌐 Usage

基本确认对话框

🌐 Basic confirmation dialog

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

🌐 Use ConfirmationDialog.Trigger to define the visible element and ConfirmationDialog.Actions to provide the dialog buttons.

BasicConfirmationDialogExample.tsx

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

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

  return (
    <Host style={{ flex: 1 }}>
      <ConfirmationDialog
        title="你确定吗？"
        isPresented={isPresented}
        onIsPresentedChange={setIsPresented}
        titleVisibility="visible">
        <ConfirmationDialog.Trigger>
          <Button
            label="Show dialog"
            onPress={() => setIsPresented(true)}
          />
        </ConfirmationDialog.Trigger>
        <ConfirmationDialog.Actions>
          <Button
            label="Confirm"
            onPress={() => setIsPresented(false)}
          />
          <Button label="Cancel" role="cancel" />
        </ConfirmationDialog.Actions>
      </ConfirmationDialog>
    </Host>
  );
}

破坏性操作确认

🌐 Destructive action confirmation

在 ConfirmationDialog.Actions 内对 Button 使用 role="destructive" 来将其样式设为破坏性操作。

🌐 Use role="destructive" on a Button inside ConfirmationDialog.Actions to style it as a destructive action.

DestructiveConfirmationDialogExample.tsx

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

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

  return (
    <Host style={{ flex: 1 }}>
      <ConfirmationDialog
        title="删除项目？"
        isPresented={isPresented}
        onIsPresentedChange={setIsPresented}
        titleVisibility="visible">
        <ConfirmationDialog.Trigger>
          <Button
            label="Delete"
            role="destructive"
            onPress={() => setIsPresented(true)}
          />
        </ConfirmationDialog.Trigger>
        <ConfirmationDialog.Actions>
          <Button
            label="Delete"
            role="destructive"
            onPress={() => {
              console.log('Deleted');
              setIsPresented(false);
            }}
          />
          <Button label="Cancel" role="cancel" />
        </ConfirmationDialog.Actions>
        <ConfirmationDialog.Message>
          <Text>This action cannot be undone.</Text>
        </ConfirmationDialog.Message>
      </ConfirmationDialog>
    </Host>
  );
}

带消息和多种操作

🌐 With message and multiple actions

使用 ConfirmationDialog.Message 在标题下显示描述性消息，并为不同的选择包含多个操作按钮。

🌐 Use ConfirmationDialog.Message to display a descriptive message below the title, and include multiple action buttons for different choices.

MultiActionConfirmationDialogExample.tsx

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

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

  return (
    <Host style={{ flex: 1 }}>
      <ConfirmationDialog
        title="保存更改？"
        isPresented={isPresented}
        onIsPresentedChange={setIsPresented}
        titleVisibility="visible">
        <ConfirmationDialog.Trigger>
          <Button
            label="Close document"
            onPress={() => setIsPresented(true)}
          />
        </ConfirmationDialog.Trigger>
        <ConfirmationDialog.Actions>
          <Button
            label="Save"
            onPress={() => console.log('Saved')}
          />
          <Button
            label="Discard"
            role="destructive"
            onPress={() => console.log('Discarded')}
          />
          <Button label="Cancel" role="cancel" />
        </ConfirmationDialog.Actions>
        <ConfirmationDialog.Message>
          <Text>
            You have unsaved changes. What would you like to do?
          </Text>
        </ConfirmationDialog.Message>
      </ConfirmationDialog>
    </Host>
  );
}

隐藏标题

🌐 Hidden title

将 titleVisibility="hidden" 设置为隐藏对话框标题，同时仍显示操作和消息。你仍然应该提供一个 title 以便无障碍访问。

🌐 Set titleVisibility="hidden" to hide the dialog title while still showing the actions and message. You should still provide a title for accessibility.

HiddenTitleConfirmationDialogExample.tsx

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

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

  return (
    <Host style={{ flex: 1 }}>
      <ConfirmationDialog
        title="隐藏标题"
        isPresented={isPresented}
        onIsPresentedChange={setIsPresented}
        titleVisibility="hidden">
        <ConfirmationDialog.Trigger>
          <Button
            label="Show dialog"
            onPress={() => setIsPresented(true)}
          />
        </ConfirmationDialog.Trigger>
        <ConfirmationDialog.Actions>
          <Button
            label="OK"
            onPress={() => setIsPresented(false)}
          />
          <Button label="Cancel" role="cancel" />
        </ConfirmationDialog.Actions>
        <ConfirmationDialog.Message>
          <Text>Only the message and actions are visible.</Text>
        </ConfirmationDialog.Message>
      </ConfirmationDialog>
    </Host>
  );
}

应用接口

🌐 API

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

Component

`ConfirmationDialog`

iOS

tvOS

Type: React.Element<ConfirmationDialogProps>

ConfirmationDialog presents a confirmation dialog with a title, optional message, and action buttons.

See: https://developer.apple.com/documentation/swiftui/view/confirmationdialog(_:ispresented:titlevisibility:actions:message:)

Props of the ConfirmationDialog component.

ConfirmationDialogProps

`children`

iOS

tvOS

Type: ReactNode

The contents of the confirmation dialog. Should include ConfirmationDialog.Trigger, ConfirmationDialog.Actions, and optionally ConfirmationDialog.Message.

`isPresented`

iOS

tvOS

Optional • Type: boolean

Whether the confirmation dialog 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 confirmation dialog.

`titleVisibility`

iOS

tvOS

Optional • Literal type: string • Default: 'automatic'

The visibility of the dialog title.

Acceptable values are: 'automatic' | 'hidden' | 'visible'

Inherited props

CommonViewModifierProps