React Native元素重叠问题：不使用外部库的解决方法

我遇到了弹出菜单与下方卡片内容重叠的问题，这个菜单是CustomerMenuPopUpSeeMore组件，内部包含多个可点击选项，嵌套在其他组件中，打开特定卡片的菜单时就会出现重叠。

组件代码 #

import React, { useState } from "react";
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
import { AntDesign } from "@expo/vector-icons";

const CustomerMenuPopUpSeeMore = ({ id, onDelete }) => {
  return (
    <View style={styles.container}>
      <View style={styles.itemsContainer}>
        <TouchableOpacity style={styles.item} onPress={() => onDelete(id)}>
          <Text style={styles.label}>Delete</Text>
          <AntDesign name="delete" color="white" size={20} />
        </TouchableOpacity>
        <TouchableOpacity style={styles.item}>
          <Text style={styles.label}>SMS</Text>
          <AntDesign name="message1" color="white" size={20} />
        </TouchableOpacity>
        <TouchableOpacity style={styles.item}>
          <Text style={styles.label}>Email</Text>
          <AntDesign name="mail" color="white" size={20} />
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    overflow: 'visible',
  },
  label: {
    color: "white",
  },
  itemsContainer: {
    backgroundColor: "rgba(0,0,0,1)",
    borderRadius: 5,
    minWidth: 130,
    borderWidth: 3,
    borderColor: 'red',
    overflow: 'visible',
  },
  item: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    padding: 15,
  },
});

export default CustomerMenuPopUpSeeMore;

组件使用方式 #

{openMenuId === customer.id && (
  <View style={styles.menu}>
    <CustomerMenuPopUpSeeMore
      id={customer.id}
      onDelete={handleDelete}
    />
  </View>
)}

菜单容器样式 #

menu: {
  position: "absolute",
  top: 11,
  right: 55,
  zIndex: 100
},

解决方法 #

问题根源在于CustomerMenuPopUpSeeMore组件的container样式设置了flex:1，这会让容器强制占满父组件的可用空间，而父容器是绝对定位的，导致容器高度超出菜单内容本身，覆盖下方卡片。

修改步骤：

1. 移除container样式中的flex:1，让容器根据内部菜单内容自适应高度：

container: {
  overflow: 'visible',
},

2. （可选）给菜单容器menu添加alignSelf: 'flex-end'，确保菜单靠右对齐，避免和卡片内容挤压：

menu: {
  position: "absolute",
  top: 11,
  right: 55,
  zIndex: 100,
  alignSelf: 'flex-end'
},

3. 检查卡片所在容器的zIndex，确保其值小于弹窗的100，避免卡片覆盖弹窗。

这样修改后，弹窗容器只会占据菜单内容所需的空间，不会和下方卡片重叠。

内容的提问来源于stack exchange，提问作者Emmanuel Muswalo