增加隐私弹窗

components/MyModal/index.jsx

@@ -19,33 +19,51 @@ export default function MyModal({
     >
       <View
         style={{
-          backgroundColor: "rgba(0,0,0,0.5)",
+          backgroundColor: "#00000080",
           ...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")}>
+        <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-sm text-gray-400 text-center pb-2")}>
+          <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 border-t border-gray-100 basis-1/2 pt-1 justify-center items-center"
+                "border-r-2 border-t-2 border-[#2c2b2f] basis-1/2 pt-1 justify-center items-center"
               )}
             >
-              <Text style={tailwind("text-base text-gray-400")}>取消</Text>
+              <Text
+                style={tailwind(
+                  "text-[#FFFFFF80] text-base font-medium text-center"
+                )}
+              >
+                取消
+              </Text>
             </TouchableOpacity>
             <TouchableOpacity
               onPress={confirm}
               style={tailwind(
-                "border-t border-gray-100 basis-1/2 pt-1 justify-center items-center"
+                "border-t-2 border-[#2c2b2f] basis-1/2 pt-1 justify-center items-center"
               )}
             >
-              <Text style={tailwind("text-base")}>确认</Text>
+              <Text
+                style={tailwind("text-white text-base font-medium text-center")}
+              >
+                确认
+              </Text>
             </TouchableOpacity>
           </View>
         </View>

screeens/Login/PasswordLogin/index.jsx

@@ -11,14 +11,13 @@ import MyDivider from "../../../components/MyDivider";
 import baseRequest from "../../../utils/baseRequest";
 import { get } from "../../../utils/storeInfo";
 
-export default function PasswordLogin() {
+export default function PasswordLogin({ checked, setChecked }) {
   const { signIn } = useContext(AuthContext);
   const navigation = useNavigation();
   const tailwind = useTailwind();
   //获取环境变量
   const apiUrl = process.env.EXPO_PUBLIC_API_URL;
   //设置checkbox
-  const [checked, setChecked] = useState(false);
   const toggleCheckbox = () => setChecked(!checked);
   //保存区号、手机号、验证码
   const [regionCode, setRegionCode] = useState("86");

screeens/Login/PhoneNumLogin/index.jsx

@@ -11,12 +11,11 @@ import baseRequest from "../../../utils/baseRequest";
 import { get, save } from "../../../utils/storeInfo";
 import { generateSignature } from "../../../utils/crypto";
 
-export default function PhoneNumLogin() {
+export default function PhoneNumLogin({ checked, setChecked }) {
   const { signIn, inviterCode } = useContext(AuthContext);
   const navigation = useNavigation();
   const tailwind = useTailwind();
   //设置checkbox
-  const [checked, setChecked] = useState(false);
   const toggleCheckbox = () => setChecked(!checked);
   //重新获取验证码的计时器
   const [isCounting, setIsCounting] = useState(false);

screeens/Login/index.jsx

@@ -4,12 +4,14 @@ import {
   TouchableWithoutFeedback,
   Dimensions,
 } from "react-native";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Tab, TabView } from "@rneui/themed";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useTailwind } from "tailwind-rn";
 import PasswordLogin from "./PasswordLogin";
 import PhoneNumLogin from "./PhoneNumLogin";
+import PrivatyModal from "../../components/PrivatyModal";
+import { get, save } from "../../utils/storeInfo";
 
 export default function Login() {
   const tailwind = useTailwind();
@@ -21,6 +23,24 @@ export default function Login() {
   const windowWidth = Dimensions.get("window").width;
   const tabWidth = windowWidth / 2;
 
+  //未同意用户协议和隐私政策时展示隐私弹窗
+  const [isPrivatyModalOpen, setIsPrivatyModalOpen] = useState(false);
+  const [checked, setChecked] = useState(false);
+
+  //如果是第一次打开app则展示隐私弹窗，如果不是第一次打开app则直接勾选同意协议
+  useEffect(() => {
+    const handlePrivatyModal = async () => {
+      const notFirstTimeOpenApp = await get("not_first_time_open_app");
+      if (!notFirstTimeOpenApp) {
+        setIsPrivatyModalOpen(true);
+        save("not_first_time_open_app", 1);
+        return;
+      }
+      setChecked(true);
+    };
+    handlePrivatyModal();
+  }, []);
+
   return (
     <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
       <View
@@ -32,6 +52,14 @@ export default function Login() {
           ...tailwind("flex flex-1"),
         }}
       >
+        <PrivatyModal
+          visible={isPrivatyModalOpen}
+          setVisible={setIsPrivatyModalOpen}
+          confirm={() => {
+            setIsPrivatyModalOpen(false);
+            setChecked(true);
+          }}
+        />
         {/* tab栏 */}
         <Tab
           value={index}
@@ -76,10 +104,10 @@ export default function Login() {
           disableSwipe
         >
           <TabView.Item style={tailwind("w-full flex-1")}>
-            <PhoneNumLogin />
+            <PhoneNumLogin checked={checked} setChecked={setChecked} />
           </TabView.Item>
           <TabView.Item style={tailwind("w-full flex-1")}>
-            <PasswordLogin />
+            <PasswordLogin checked={checked} setChecked={setChecked} />
           </TabView.Item>
         </TabView>
       </View>

tailwind.css

@@ -269,10 +269,6 @@
   height: 2.25rem
 }
 
-.h-\[22rem\] {
-  height: 22rem
-}
-
 .h-\[3px\] {
   height: 3px
 }
@@ -381,6 +377,10 @@
   flex-basis: 50%
 }
 
+.basis-1\/3 {
+  flex-basis: 33.333333%
+}
+
 .flex-row {
   flex-direction: row
 }
@@ -479,6 +479,14 @@
   border-top-width: 1px
 }
 
+.border-r-2 {
+  border-right-width: 2px
+}
+
+.border-t-2 {
+  border-top-width: 2px
+}
+
 .border-dashed {
   border-style: dashed
 }
@@ -497,11 +505,6 @@
   border-color: #FFFFFF26
 }
 
-.border-gray-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(243 244 246 / var(--tw-border-opacity))
-}
-
 .border-gray-400 {
   --tw-border-opacity: 1;
   border-color: rgb(156 163 175 / var(--tw-border-opacity))

tailwind.json

@@ -342,11 +342,6 @@
 			"height": 36
 		}
 	},
-	"h-[22rem]": {
-		"style": {
-			"height": 352
-		}
-	},
 	"h-[3px]": {
 		"style": {
 			"height": 3
@@ -486,6 +481,11 @@
 			"flexBasis": "50%"
 		}
 	},
+	"basis-1/3": {
+		"style": {
+			"flexBasis": "33.333333%"
+		}
+	},
 	"flex-row": {
 		"style": {
 			"flexDirection": "row"
@@ -632,6 +632,16 @@
 			"borderTopWidth": 1
 		}
 	},
+	"border-r-2": {
+		"style": {
+			"borderRightWidth": 2
+		}
+	},
+	"border-t-2": {
+		"style": {
+			"borderTopWidth": 2
+		}
+	},
 	"border-dashed": {
 		"style": {
 			"borderStyle": "dashed"
@@ -663,15 +673,6 @@
 			"borderLeftColor": "#FFFFFF26"
 		}
 	},
-	"border-gray-100": {
-		"style": {
-			"--tw-border-opacity": 1,
-			"borderTopColor": "rgb(243 244 246 / var(--tw-border-opacity))",
-			"borderRightColor": "rgb(243 244 246 / var(--tw-border-opacity))",
-			"borderBottomColor": "rgb(243 244 246 / var(--tw-border-opacity))",
-			"borderLeftColor": "rgb(243 244 246 / var(--tw-border-opacity))"
-		}
-	},
 	"border-gray-400": {
 		"style": {
 			"--tw-border-opacity": 1,