优化弹窗被GuideBar遮挡的问题

src/components/UserInfo/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef, useContext } from "react";
 import Taro, { useDidShow } from "@tarojs/taro";
 import { View, Text, Image, Button } from "@tarojs/components";
 import "./index.scss";
@@ -10,6 +10,7 @@ import { useUserActions } from "@/store/userStore";
 import { UserInfoType } from "@/services/userService";
 import { useCities, useProfessions } from "@/store/pickerOptionsStore";
 import { formatNtrpDisplay } from "@/utils/helper";
+import FamilyContext from '@/context';
 
 // 用户信息接口
 // export interface UserInfo {
@@ -71,6 +72,7 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
   set_user_info,
   onTab,
 }) => {
+  const { handleGrandchildTrigger } = useContext(FamilyContext);
   const { updateUserInfo } = useUserActions();
 
   // 使用 useRef 记录上一次的 user_info，只在真正变化时打印
@@ -102,6 +104,14 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
     set_form_data({ ...user_info });
   });
 
+  useEffect(() => {
+    const visibles = [gender_picker_visible, location_picker_visible, ntrp_picker_visible, occupation_picker_visible]
+    const showGuideBar = visibles.every(item => !item)
+    if (showGuideBar) {
+      handleGrandchildTrigger(false)
+    }
+  }, [gender_picker_visible, location_picker_visible, ntrp_picker_visible, occupation_picker_visible])
+
   // 职业数据
   const professions = useProfessions();
 
@@ -132,6 +142,7 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
   // };
   // 处理编辑弹窗
   const handle_open_edit_modal = (field: string) => {
+    handleGrandchildTrigger(true)
     if (field === "gender") {
       setGenderPickerVisible(true);
       return;
@@ -150,9 +161,11 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
     }
     if (field === "nickname") {
       // 手动输入
+      handleGrandchildTrigger(true)
       setEditingField(field);
       setEditModalVisible(true);
     } else {
+      handleGrandchildTrigger(true)
       setEditingField(field);
       setEditModalVisible(true);
     }
@@ -256,6 +269,7 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
     handle_field_edit("occupation", `${country} ${province} ${city}`);
   };
   const handle_edit_modal_cancel = () => {
+    handleGrandchildTrigger(false);
     setEditModalVisible(false);
     setEditingField("");
   };

src/context/index.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+
+// 定义Context类型
+interface FamilyContextType {
+    handleGrandchildTrigger: (data: any) => void;
+}
+
+// 创建Context对象
+const FamilyContext = React.createContext < FamilyContextType > ({
+    handleGrandchildTrigger: () => { }
+});
+
+export default FamilyContext;

src/main_pages/index.tsx

@@ -10,6 +10,7 @@ import ListPageContent from "./components/ListPageContent";
 import MessagePageContent from "./components/MessagePageContent";
 import MyselfPageContent from "./components/MyselfPageContent";
 import "./index.scss";
+import FamilyContext from '@/context';
 
 type TabType = "list" | "message" | "personal";
 
@@ -22,6 +23,7 @@ const MainPage: React.FC = () => {
   const [isFilterPopupVisible, setIsFilterPopupVisible] = useState(false);
   const [isShowInputCustomerNavBar, setIsShowInputCustomerNavBar] = useState(false);
   const [listPageScrollToTopTrigger, setListPageScrollToTopTrigger] = useState(0);
+  const [showGuideBar, setShowGuideBar] = useState(true);
 
   const { fetchUserInfo } = useUserActions();
 
@@ -155,7 +157,12 @@ const MainPage: React.FC = () => {
     return null;
   };
 
+  const handleGrandchildTrigger = (value) => {
+    setShowGuideBar(!value)
+  }
+
   return (
+    <FamilyContext.Provider value={{ handleGrandchildTrigger }}>
       <View className="main-page">
         {/* 自定义导航栏 */}
         {renderCustomNavbar()}
@@ -189,13 +196,19 @@ const MainPage: React.FC = () => {
         </View>
 
         {/* 底部导航栏 */}
+        {
+          showGuideBar ?
             <GuideBar
               currentPage={currentTab}
               guideBarClassName={guideBarZIndex === 'low' ? 'guide-bar-low-z-index' : 'guide-bar-high-z-index'}
               onTabChange={handleTabChange}
               onPublishMenuVisibleChange={handlePublishMenuVisibleChange}
-      />
+            /> :
+            null
+        }
+
       </View>
+    </FamilyContext.Provider>
   );
 };