React Native 中的重叠元素：避免外部库

Question

我想澄清一下，我不喜欢使用任何外部库来解决这个问题。 我遇到的问题是元素重叠，如下面的屏幕截图所示：

我有一个 CustomerMenuPopUpSeeMore 组件，它由视图中的多个 TouchableOpacity 元素组成。该组件在另一个组件内部使用，当我打开特定卡片的菜单时，元素重叠。

这是 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;

然后按如下方式使用 CustomerMenuPopUpSeeMore：

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

菜单容器的样式是：

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

Answer 1

我认为您正在使用平面列表来渲染上述项目，zIndex 的行为对于平面列表是不同的，您可以检查here。 您只需要向您的 PopUp 组件添加一个 zIndex 样式并使其非常高。它应该可以解决您的问题。