56 lines
1.6 KiB
JavaScript
56 lines
1.6 KiB
JavaScript
import { View, Text, TouchableOpacity, Modal } from "react-native";
|
|
import React from "react";
|
|
import { useTailwind } from "tailwind-rn";
|
|
|
|
export default function MyModal({
|
|
visible,
|
|
setVisible,
|
|
title,
|
|
content,
|
|
confirm,
|
|
}) {
|
|
const tailwind = useTailwind();
|
|
return (
|
|
<Modal
|
|
visible={visible}
|
|
statusBarTranslucent
|
|
transparent={true}
|
|
style={tailwind("flex-1")}
|
|
>
|
|
<View
|
|
style={{
|
|
backgroundColor: "rgba(0,0,0,0.5)",
|
|
...tailwind("flex-1 items-center justify-center"),
|
|
}}
|
|
>
|
|
<View style={tailwind("bg-white w-2/3 p-2 rounded-lg")}>
|
|
<Text style={tailwind("text-base font-semibold text-center p-2")}>
|
|
{title}
|
|
</Text>
|
|
<Text style={tailwind("text-sm text-gray-400 text-center pb-2")}>
|
|
{content}
|
|
</Text>
|
|
<View style={tailwind("flex-row justify-around")}>
|
|
<TouchableOpacity
|
|
onPress={() => setVisible(false)}
|
|
style={tailwind(
|
|
"border-r border-t border-gray-100 basis-1/2 pt-1 justify-center items-center"
|
|
)}
|
|
>
|
|
<Text style={tailwind("text-base text-gray-400")}>取消</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
onPress={confirm}
|
|
style={tailwind(
|
|
"border-t border-gray-100 basis-1/2 pt-1 justify-center items-center"
|
|
)}
|
|
>
|
|
<Text style={tailwind("text-base")}>确认</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
);
|
|
}
|