@beppla/tapas-ui 1.0.54 → 1.0.56

package/components/DataCell/DataCell.tsx

@@ -1,9 +1,50 @@
-import React, { useCallback, useMemo, useState } from "react";
+import React, { useCallback, useMemo, useState, useEffect } from "react";
 import { View, Text, Pressable, ViewProps, TextStyle, StyleProp } from "react-native";
 import { withTheme, makeStyles } from "@rneui/themed";
 import TapasIcon from "../Icons/TapasIcon";
 // import { TapasDropdown } from "../Dropdown/Dropdown";
 
+// 全局下拉菜单状态管理
+const globalDropdownState: {
+  activeColumn: number | null;
+  activeRow: number | null;
+  closeAll: () => void;
+  onDropdownStateChange?: (columnIndex: number | null, rowIndex: number | null) => void;
+} = {
+  activeColumn: null,
+  activeRow: null,
+  closeAll: () => {},
+  onDropdownStateChange: undefined,
+};
+
+// 注册和注销下拉菜单的函数
+const registerDropdown = (columnIndex: number, rowIndex: number, closeCallback: () => void) => {
+  globalDropdownState.activeColumn = columnIndex;
+  globalDropdownState.activeRow = rowIndex;
+  globalDropdownState.closeAll = closeCallback;
+  // 通知状态变化
+  globalDropdownState.onDropdownStateChange?.(columnIndex, rowIndex);
+};
+
+const unregisterDropdown = () => {
+  globalDropdownState.activeColumn = null;
+  globalDropdownState.activeRow = null;
+  globalDropdownState.closeAll = () => {};
+  // 通知状态变化
+  globalDropdownState.onDropdownStateChange?.(null, null);
+};
+
+const closeAllDropdowns = () => {
+  if (globalDropdownState.closeAll) {
+    globalDropdownState.closeAll();
+  }
+};
+
+// 设置下拉菜单状态变化监听器
+const setDropdownStateChangeListener = (callback: (columnIndex: number | null, rowIndex: number | null) => void) => {
+  globalDropdownState.onDropdownStateChange = callback;
+};
+
 export type DataType = 
   | "text" 
   | "number" 
@@ -90,6 +131,14 @@ export interface TapasDataCellProps extends ViewProps {
   minHeight?: number;
   /** 是否为空白单元格 */
   isBlank?: boolean;
+  /** 下拉菜单状态变化回调 */
+  onDropdownStateChange?: (isOpen: boolean) => void;
+  /** Grid 相关信息，用于计算下拉菜单位置 */
+  gridInfo?: {
+    totalRows?: number;
+    rowHeight?: number;
+    gridHeight?: number;
+  };
 }
 
 const TapasDataCell: React.FC<TapasDataCellProps> = ({
@@ -122,6 +171,8 @@ const TapasDataCell: React.FC<TapasDataCellProps> = ({
   disabled = false,
   minHeight = 40,
   isBlank = false,
+  onDropdownStateChange,
+  gridInfo,
   style,
   ...otherProps
 }) => {
@@ -224,6 +275,111 @@ const TapasDataCell: React.FC<TapasDataCellProps> = ({
   // 下拉菜单状态
   const [dropdownVisible, setDropdownVisible] = useState(false);
   const [dropdownPosition, setDropdownPosition] = useState({ top: 32, right: 0 });
+  
+  // 计算下拉菜单的最佳位置
+  const calculateDropdownPosition = useCallback(() => {
+    // 更准确地计算下拉菜单的实际高度
+    const itemHeight = 32; // 每个选项的高度
+    const borderWidth = 2; // 边框宽度
+    const padding = 8; // 内边距
+    const shadowHeight = 4; // 阴影高度
+    
+    // 考虑文本长度对高度的影响
+    const maxTextLength = Math.max(...actions.map(action => action.label.length));
+    const textHeightAdjustment = maxTextLength > 10 ? 4 : 0; // 长文本可能需要更多高度
+    
+    // 计算下拉菜单的宽度（考虑文本长度）
+    // const minWidth = 120; // 最小宽度
+    // const textWidth = maxTextLength * 8; // 估算文本宽度
+    // const _actualWidth = Math.max(minWidth, textWidth + 24); // 24px 为内边距和图标空间
+    
+    const actualHeight = actions.length * itemHeight + borderWidth + padding + shadowHeight + textHeightAdjustment;
+    
+    const buttonHeight = 32; // 按钮高度
+    const cellHeight = gridInfo?.rowHeight || 56; // 使用传入的 rowHeight 或默认值
+    const gridHeight = gridInfo?.gridHeight || 400; // 使用传入的 gridHeight 或默认值
+    
+    // 根据行索引估算当前单元格在 Grid 中的位置
+    const currentRowIndex = rowIndex || 0;
+    
+    // 计算当前单元格距离 Grid 底部的距离
+    const currentCellBottom = (currentRowIndex + 1) * cellHeight;
+    const spaceBelow = gridHeight - currentCellBottom;
+    
+    // 计算上方可用空间
+    const currentCellTop = currentRowIndex * cellHeight;
+    const spaceAbove = currentCellTop;
+    
+    // 添加安全边距，确保下拉菜单不会紧贴边界
+    const safetyMargin = 8;
+    const requiredSpace = actualHeight + safetyMargin;
+    
+    // 智能选择显示位置
+    if (requiredSpace > spaceBelow && requiredSpace <= spaceAbove) {
+      // 下方空间不够，但上方空间足够，显示在上方
+      return {
+        top: -actualHeight - 4, // 按钮上方，留 4px 间距
+        right: 0,
+      };
+    } else if (requiredSpace > spaceBelow && requiredSpace > spaceAbove) {
+      // 上下空间都不够，选择空间较大的一侧
+      if (spaceAbove > spaceBelow) {
+        return {
+          top: -actualHeight - 4, // 按钮上方
+          right: 0,
+        };
+      } else {
+        return {
+          top: buttonHeight + 4, // 按钮下方
+          right: 0,
+        };
+      }
+    } else {
+      // 下方空间足够，显示在下方
+      return {
+        top: buttonHeight + 4, // 按钮下方，留 4px 间距
+        right: 0,
+      };
+    }
+  }, [actions.length, rowIndex, gridInfo]);
+
+  // 全局下拉菜单管理
+  useEffect(() => {
+    const closeDropdown = () => {
+      setDropdownVisible(false);
+      unregisterDropdown();
+    };
+
+    // 注册当前下拉菜单
+    if (dropdownVisible) {
+      registerDropdown(columnIndex || 0, rowIndex || 0, closeDropdown);
+    } else {
+      unregisterDropdown();
+    }
+
+    // 清理函数
+    return () => {
+      unregisterDropdown();
+    };
+  }, [dropdownVisible, columnIndex, rowIndex]);
+
+  // 通知父组件下拉菜单状态变化
+  useEffect(() => {
+    onDropdownStateChange?.(dropdownVisible);
+  }, [dropdownVisible, onDropdownStateChange]);
+
+  // 监听全局关闭事件
+  useEffect(() => {
+    // const _handleGlobalClose = () => {
+    //   if (globalDropdownState.activeColumn !== columnIndex || 
+    //       globalDropdownState.activeRow !== rowIndex) {
+    //     setDropdownVisible(false);
+    //   }
+    // };
+
+    // 这里可以添加全局事件监听器
+    // 为了简化，我们在点击其他单元格时关闭当前下拉菜单
+  }, [columnIndex, rowIndex]);
 
   // 渲染操作按钮
   const renderActions = () => {
@@ -267,23 +423,34 @@ const TapasDataCell: React.FC<TapasDataCellProps> = ({
 
     // 多个操作显示下拉菜单
     return (
-      <View style={styles.dropdownContainer}>
+      <View style={[
+        styles.dropdownContainer,
+        {
+          // 只有当前激活的下拉菜单容器才有高 z-index
+          zIndex: globalDropdownState.activeColumn === columnIndex && globalDropdownState.activeRow === rowIndex ? 2147483646 : 1,
+        }
+      ]}>
         <Pressable
           style={styles.actionButton}
           onPress={(event) => {
             // 阻止事件冒泡，避免触发外层的 attachCellPress
             event.stopPropagation();
             
-            if (!dropdownVisible) {
-              // 在 React Native 中，我们使用相对定位
-              // 由于 Grid 的 overflow: hidden 限制，我们使用更高的 z-index 和绝对定位
-              setDropdownPosition({
-                top: 32, // 按钮下方 32px
-                right: 0, // 从右边缘对齐
-              });
+            if (dropdownVisible) {
+              // 如果当前下拉菜单已经打开，直接关闭
+              setDropdownVisible(false);
+            } else {
+              // 如果当前下拉菜单关闭，先关闭其他所有下拉菜单，然后打开当前菜单
+              closeAllDropdowns();
+              
+              // 计算并设置下拉菜单位置
+              setDropdownPosition(calculateDropdownPosition());
+              
+              // 延迟打开当前下拉菜单，确保其他菜单已关闭
+              setTimeout(() => {
+                setDropdownVisible(true);
+              }, 0);
             }
-            
-            setDropdownVisible(!dropdownVisible);
           }}
           disabled={disabled}
         >
@@ -450,7 +617,10 @@ const useStyles = makeStyles((theme, props?: {
     },
     dropdownContainer: {
       position: "relative",
-      zIndex: 1000,
+      // 默认使用较低的 z-index，只有激活的下拉菜单容器才有高 z-index
+      zIndex: 1,
+      // 确保容器本身不会创建新的 stacking context
+      isolation: "auto",
     },
     dropdownMenu: {
       position: "absolute", // 使用绝对定位
@@ -467,9 +637,11 @@ const useStyles = makeStyles((theme, props?: {
       shadowRadius: 3.84,
       elevation: 5,
       minWidth: 120,
-      zIndex: 9999,
+      zIndex: 2147483647, // 更高的 z-index，确保显示在所有元素之上
       // 确保下拉菜单不被父容器的 overflow 隐藏
       overflow: "visible",
+      // 确保下拉菜单在正确的层级上
+      isolation: "isolate",
     },
     dropdownItem: {
       paddingHorizontal: 12,
@@ -495,4 +667,4 @@ export default withTheme(TapasDataCell);
 
 // Export aliases for compatibility
 export const DataCell = withTheme(TapasDataCell);
-export { TapasDataCell };
+export { TapasDataCell, setDropdownStateChangeListener };

package/components/Grid/StaticFixedSizeGrid.tsx

@@ -58,6 +58,7 @@ const ItemWrapper: React.FC<any> = ({ data, columnIndex, rowIndex, style }) => {
     columnHeaderHeight,
     border,
     theme,
+    hasActions,
   } = data;
 
   if (
@@ -68,13 +69,17 @@ const ItemWrapper: React.FC<any> = ({ data, columnIndex, rowIndex, style }) => {
     return null;
   }
   
+  // 检测当前列是否有 actions 按钮
+  const shouldShowActions = hasActions && hasActions(columnIndex ?? 0, rowIndex ?? 0);
+  
   // 确保传递正确的参数给children函数
   const childrenProps: ChildrenProps = {
     columnIndex: columnIndex ?? 0,
     rowIndex: rowIndex ?? 0,
     style: {
       ...style,
-      overflow: "visible",
+      // 根据 hasActions 决定是否允许 overflow: "visible"
+      overflow: shouldShowActions ? "visible" : "hidden",
       borderBottom: border
         ? `1px solid ${theme.grey3 ?? "rgba(0, 0, 0, 0.12)"}`
         : "none",
@@ -210,6 +215,7 @@ const InnerElementType = forwardRef(
                 columnHeaderHeight,
               }}
               style={{
+                // 保持列头的 overflow: "hidden" 以确保正确的滚动行为
                 overflow: "hidden",
                 // borderTopLeftRadius: theme?.radius?.mini ?? 4,
                 backgroundColor:
@@ -223,7 +229,11 @@ const InnerElementType = forwardRef(
         )}
         <div ref={ref} {...rest} style={{
           ...style,
-          width: rest.width - stickyColumnsWidth // 使用正确的 grid 宽度减去 sticky 列宽度
+          width: totalWidth,
+          // width: rest.width, // 使用正确的 grid 宽度减去 sticky 列宽度
+          // width: rest.width - stickyColumnsWidth, // 使用正确的 grid 宽度减去 sticky 列宽度
+          // position: "sticky", // 固定容器位置，不随滚动移动
+          // left: 0, // 固定在左侧
         }}>
           {scrollLeft > 0 && (
             <StickyColumn
@@ -231,7 +241,7 @@ const InnerElementType = forwardRef(
                 backgroundColor: theme?.background ?? "#F9F2E8",
                 zIndex: 5,
                 top: 0,
-                width: stickyColumnsWidth,
+                width: 1, // 左侧阴影条宽度应该是 1
                 height: height,
                 left: 0,
                 marginTop: headersRender ? -1 * (columnHeaderHeight || 40) : 0,
@@ -268,7 +278,7 @@ const InnerElementType = forwardRef(
                 top: 0,
                 width: stickyColumnsWidth,
                 height: columnHeaderHeight || 40,
-                left: width - stickyColumnsWidth - (border ? 1 : 0),
+                left: width - stickyColumnsWidth - (border ? 1 : 0), // 使用总宽度计算位置
                 marginTop:
                   scrollLeft === 0
                     ? -1 * (columnHeaderHeight || 40)
@@ -278,7 +288,6 @@ const InnerElementType = forwardRef(
                 borderLeft: border
                   ? `1px solid ${theme?.grey3 ?? "rgba(0, 0, 0, 0.12)"}`
                   : "none",
-                // borderTopRightRadius: theme?.radius?.mini ?? 4,
               }}
             >
               <VariableSizeGrid
@@ -292,8 +301,7 @@ const InnerElementType = forwardRef(
                 width={stickyColumnsWidth}
                 itemData={{ ItemRenderer: headersRender, stickyColumnIndices }}
                 style={{
-                  overflow: "visible",
-                  // borderTopRightRadius: theme?.radius?.mini ?? 4,
+                  overflow: "hidden",
                   backgroundColor:
                     columnHeaderBackgroundColor ||
                     (theme?.colors?.grey4 ?? "rgba(0, 0, 0, 0.08)"),
@@ -309,7 +317,7 @@ const InnerElementType = forwardRef(
                 backgroundColor: theme?.background ?? "#F9F2E8",
                 zIndex: 2,
                 top: headersRender ? columnHeaderHeight || 40 : 0,
-                left: `calc(100% - ${stickyColumnsWidth + (border ? 1 : 0)}px)`,
+                left: width - stickyColumnsWidth - (border ? 1 : 0), // 使用总宽度计算位置
                 width: stickyColumnsWidth,
                 height: "100%",
                 position: "sticky",
@@ -329,7 +337,9 @@ const InnerElementType = forwardRef(
                 rowHeight={rowHeight}
                 width={stickyColumnsWidth}
                 itemData={{ ItemRenderer, stickyColumnIndices, border, hasActions: hasActionsFn }}
-                style={{ overflow: "visible" }}
+                style={{ 
+                  overflow: hasActions ? "visible": "hidden" 
+                }}
               >
                 {StickyColumnCell}
               </VariableSizeGrid>
@@ -433,7 +443,8 @@ const StickyList = ({
             : rest.theme.radius.mini ?? 4,
           scrollbarWidth: "none",
           msOverflowStyle: "none",
-          overflow: "visible", // 允许下拉菜单显示
+          // 移除 overflow: "visible"，恢复 Grid 的正常滚动功能
+          // Modal 下拉菜单不需要这个设置
         }}
         itemData={{
           ItemRenderer: children,

package/package/commonjs/DataCell/DataCell.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.TapasDataCell = exports.DataCell = void 0;
+exports.setDropdownStateChangeListener = exports.default = exports.TapasDataCell = exports.DataCell = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _themed = require("@rneui/themed");
@@ -14,6 +14,40 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 // import { TapasDropdown } from "../Dropdown/Dropdown";
 
+// 全局下拉菜单状态管理
+const globalDropdownState = {
+  activeColumn: null,
+  activeRow: null,
+  closeAll: () => {},
+  onDropdownStateChange: undefined
+};
+
+// 注册和注销下拉菜单的函数
+const registerDropdown = (columnIndex, rowIndex, closeCallback) => {
+  globalDropdownState.activeColumn = columnIndex;
+  globalDropdownState.activeRow = rowIndex;
+  globalDropdownState.closeAll = closeCallback;
+  // 通知状态变化
+  globalDropdownState.onDropdownStateChange?.(columnIndex, rowIndex);
+};
+const unregisterDropdown = () => {
+  globalDropdownState.activeColumn = null;
+  globalDropdownState.activeRow = null;
+  globalDropdownState.closeAll = () => {};
+  // 通知状态变化
+  globalDropdownState.onDropdownStateChange?.(null, null);
+};
+const closeAllDropdowns = () => {
+  if (globalDropdownState.closeAll) {
+    globalDropdownState.closeAll();
+  }
+};
+
+// 设置下拉菜单状态变化监听器
+const setDropdownStateChangeListener = callback => {
+  globalDropdownState.onDropdownStateChange = callback;
+};
+exports.setDropdownStateChangeListener = setDropdownStateChangeListener;
 const TapasDataCell = ({
   value,
   dataType = "text",
@@ -47,6 +81,8 @@ const TapasDataCell = ({
   disabled = false,
   minHeight = 40,
   isBlank = false,
+  onDropdownStateChange,
+  gridInfo,
   style,
   ...otherProps
 }) => {
@@ -148,6 +184,114 @@ const TapasDataCell = ({
     right: 0
   });
 
+  // 计算下拉菜单的最佳位置
+  const calculateDropdownPosition = (0, _react.useCallback)(() => {
+    // 更准确地计算下拉菜单的实际高度
+    const itemHeight = 32; // 每个选项的高度
+    const borderWidth = 2; // 边框宽度
+    const padding = 8; // 内边距
+    const shadowHeight = 4; // 阴影高度
+
+    // 考虑文本长度对高度的影响
+    const maxTextLength = Math.max(...actions.map(action => action.label.length));
+    const textHeightAdjustment = maxTextLength > 10 ? 4 : 0; // 长文本可能需要更多高度
+
+    // 计算下拉菜单的宽度（考虑文本长度）
+    // const minWidth = 120; // 最小宽度
+    // const textWidth = maxTextLength * 8; // 估算文本宽度
+    // const _actualWidth = Math.max(minWidth, textWidth + 24); // 24px 为内边距和图标空间
+
+    const actualHeight = actions.length * itemHeight + borderWidth + padding + shadowHeight + textHeightAdjustment;
+    const buttonHeight = 32; // 按钮高度
+    const cellHeight = gridInfo?.rowHeight || 56; // 使用传入的 rowHeight 或默认值
+    const gridHeight = gridInfo?.gridHeight || 400; // 使用传入的 gridHeight 或默认值
+
+    // 根据行索引估算当前单元格在 Grid 中的位置
+    const currentRowIndex = rowIndex || 0;
+
+    // 计算当前单元格距离 Grid 底部的距离
+    const currentCellBottom = (currentRowIndex + 1) * cellHeight;
+    const spaceBelow = gridHeight - currentCellBottom;
+
+    // 计算上方可用空间
+    const currentCellTop = currentRowIndex * cellHeight;
+    const spaceAbove = currentCellTop;
+
+    // 添加安全边距，确保下拉菜单不会紧贴边界
+    const safetyMargin = 8;
+    const requiredSpace = actualHeight + safetyMargin;
+
+    // 智能选择显示位置
+    if (requiredSpace > spaceBelow && requiredSpace <= spaceAbove) {
+      // 下方空间不够，但上方空间足够，显示在上方
+      return {
+        top: -actualHeight - 4,
+        // 按钮上方，留 4px 间距
+        right: 0
+      };
+    } else if (requiredSpace > spaceBelow && requiredSpace > spaceAbove) {
+      // 上下空间都不够，选择空间较大的一侧
+      if (spaceAbove > spaceBelow) {
+        return {
+          top: -actualHeight - 4,
+          // 按钮上方
+          right: 0
+        };
+      } else {
+        return {
+          top: buttonHeight + 4,
+          // 按钮下方
+          right: 0
+        };
+      }
+    } else {
+      // 下方空间足够，显示在下方
+      return {
+        top: buttonHeight + 4,
+        // 按钮下方，留 4px 间距
+        right: 0
+      };
+    }
+  }, [actions.length, rowIndex, gridInfo]);
+
+  // 全局下拉菜单管理
+  (0, _react.useEffect)(() => {
+    const closeDropdown = () => {
+      setDropdownVisible(false);
+      unregisterDropdown();
+    };
+
+    // 注册当前下拉菜单
+    if (dropdownVisible) {
+      registerDropdown(columnIndex || 0, rowIndex || 0, closeDropdown);
+    } else {
+      unregisterDropdown();
+    }
+
+    // 清理函数
+    return () => {
+      unregisterDropdown();
+    };
+  }, [dropdownVisible, columnIndex, rowIndex]);
+
+  // 通知父组件下拉菜单状态变化
+  (0, _react.useEffect)(() => {
+    onDropdownStateChange?.(dropdownVisible);
+  }, [dropdownVisible, onDropdownStateChange]);
+
+  // 监听全局关闭事件
+  (0, _react.useEffect)(() => {
+    // const _handleGlobalClose = () => {
+    //   if (globalDropdownState.activeColumn !== columnIndex || 
+    //       globalDropdownState.activeRow !== rowIndex) {
+    //     setDropdownVisible(false);
+    //   }
+    // };
+
+    // 这里可以添加全局事件监听器
+    // 为了简化，我们在点击其他单元格时关闭当前下拉菜单
+  }, [columnIndex, rowIndex]);
+
   // 渲染操作按钮
   const renderActions = () => {
     if (!showActions || actions.length === 0 || isBlank) {
@@ -185,22 +329,30 @@ const TapasDataCell = ({
 
     // 多个操作显示下拉菜单
     return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-      style: styles.dropdownContainer
+      style: [styles.dropdownContainer, {
+        // 只有当前激活的下拉菜单容器才有高 z-index
+        zIndex: globalDropdownState.activeColumn === columnIndex && globalDropdownState.activeRow === rowIndex ? 2147483646 : 1
+      }]
     }, /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
       style: styles.actionButton,
       onPress: event => {
         // 阻止事件冒泡，避免触发外层的 attachCellPress
         event.stopPropagation();
-        if (!dropdownVisible) {
-          // 在 React Native 中，我们使用相对定位
-          // 由于 Grid 的 overflow: hidden 限制，我们使用更高的 z-index 和绝对定位
-          setDropdownPosition({
-            top: 32,
-            // 按钮下方 32px
-            right: 0 // 从右边缘对齐
-          });
+        if (dropdownVisible) {
+          // 如果当前下拉菜单已经打开，直接关闭
+          setDropdownVisible(false);
+        } else {
+          // 如果当前下拉菜单关闭，先关闭其他所有下拉菜单，然后打开当前菜单
+          closeAllDropdowns();
+
+          // 计算并设置下拉菜单位置
+          setDropdownPosition(calculateDropdownPosition());
+
+          // 延迟打开当前下拉菜单，确保其他菜单已关闭
+          setTimeout(() => {
+            setDropdownVisible(true);
+          }, 0);
         }
-        setDropdownVisible(!dropdownVisible);
       },
       disabled: disabled
     }, /*#__PURE__*/_react.default.createElement(_TapasIcon.default, {
@@ -321,7 +473,10 @@ const useStyles = (0, _themed.makeStyles)((theme, props) => {
     },
     dropdownContainer: {
       position: "relative",
-      zIndex: 1000
+      // 默认使用较低的 z-index，只有激活的下拉菜单容器才有高 z-index
+      zIndex: 1,
+      // 确保容器本身不会创建新的 stacking context
+      isolation: "auto"
     },
     dropdownMenu: {
       position: "absolute",
@@ -339,9 +494,12 @@ const useStyles = (0, _themed.makeStyles)((theme, props) => {
       shadowRadius: 3.84,
       elevation: 5,
       minWidth: 120,
-      zIndex: 9999,
+      zIndex: 2147483647,
+      // 更高的 z-index，确保显示在所有元素之上
       // 确保下拉菜单不被父容器的 overflow 隐藏
-      overflow: "visible"
+      overflow: "visible",
+      // 确保下拉菜单在正确的层级上
+      isolation: "isolate"
     },
     dropdownItem: {
       paddingHorizontal: 12,