AlertDialog
用于显示原生警告对话框的 Jetpack Compose AlertDialog 组件。
Expo UI AlertDialog 与官方 Jetpack Compose AlertDialog API 匹配,并显示一个带有标题、消息文本以及确认/取消按钮的模态对话框。
🌐 Expo UI AlertDialog matches the official Jetpack Compose AlertDialog API and displays a modal dialog with a title, message text, and confirm/dismiss buttons.
安装
🌐 Installation
- npx expo install @expo/uiIf you are installing this in an existing React Native app, make sure to install expo in your project.
用法
🌐 Usage
基本警告对话框
🌐 Basic alert dialog
import { useState } from 'react'; import { Host, AlertDialog, Button } from '@expo/ui/jetpack-compose'; export default function BasicAlertDialogExample() { const [visible, setVisible] = useState(false); return ( <Host matchContents> <Button onPress={() => setVisible(true)}>Show Alert</Button> <AlertDialog visible={visible} title="确认操作" text="Are you sure you want to proceed?" confirmButtonText="Confirm" dismissButtonText="Cancel" onConfirmPressed={() => { console.log('Confirmed'); setVisible(false); }} onDismissPressed={() => { console.log('Dismissed'); setVisible(false); }} /> </Host> ); }
应用接口
🌐 API
import { AlertDialog } from '@expo/ui/jetpack-compose';
Component
Type: React.Element<AlertDialogProps>
Renders an AlertDialog component.
AlertDialogButtonColorsThe colors for the confirm button.
AlertDialogButtonColorsThe colors for the dismiss button.
() => voidCallback that is called when the user tries to confirm the dialog.
() => voidCallback that is called when the user tries to dismiss the dialog.
Types
| Property | Type | Description |
|---|---|---|
| containerColor(optional) | ColorValue | The background color of the button. |
| contentColor(optional) | ColorValue | The text color of the button. |