74 lines
1.9 KiB
JavaScript
74 lines
1.9 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: "#00000080",
|
|
...tailwind("flex-1 items-center justify-center"),
|
|
}}
|
|
>
|
|
<View
|
|
style={tailwind("p-2 rounded-2xl bg-[#1E1C29] items-center w-3/4")}
|
|
>
|
|
<Text
|
|
style={tailwind(
|
|
"text-white text-xl font-semibold text-center mt-2"
|
|
)}
|
|
>
|
|
{title}
|
|
</Text>
|
|
<Text
|
|
style={tailwind("text-[#FFFFFF80] text-sm font-medium mt-2 mb-4")}
|
|
>
|
|
{content}
|
|
</Text>
|
|
<View style={tailwind("flex-row justify-around")}>
|
|
<TouchableOpacity
|
|
onPress={() => setVisible(false)}
|
|
style={tailwind(
|
|
"border-r-2 border-t-2 border-[#2c2b2f] basis-1/2 pt-1 justify-center items-center"
|
|
)}
|
|
>
|
|
<Text
|
|
style={tailwind(
|
|
"text-[#FFFFFF80] text-base font-medium text-center"
|
|
)}
|
|
>
|
|
取消
|
|
</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
onPress={confirm}
|
|
style={tailwind(
|
|
"border-t-2 border-[#2c2b2f] basis-1/2 pt-1 justify-center items-center"
|
|
)}
|
|
>
|
|
<Text
|
|
style={tailwind("text-white text-base font-medium text-center")}
|
|
>
|
|
确认
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
);
|
|
}
|