React Native 高仿 Material 设计对话框组件
import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { Dialog } from 'react-native-paper';
const MyDialog = ({ visible, closeDialog, title, content }) => {
return (
<Dialog visible={visible} onDismiss={closeDialog}>
<Dialog.Title>{title}</Dialog.Title>
<Dialog.Content>
<Text>{content}</Text>
</Dialog.Content>
<Dialog.Actions>
<TouchableOpacity onPress={closeDialog}>
<Text>取消</Text>
</TouchableOpacity>
<TouchableOpacity onPress={closeDialog}>
<Text>确定</Text>
</TouchableOpacity>
</Dialog.Actions>
</Dialog>
);
};
export default MyDialog;
这段代码演示了如何使用react-native-paper
库中的Dialog
组件来创建一个高仿Material设计风格的对话框。对话框具有标题、内容区域和操作按钮,并且可以通过visible
属性控制其显示与否,onDismiss
属性用于定义关闭对话框时的行为。
评论已关闭