React-native-paper菜单被其他元素遮挡，尽管使用了zIndex。我该如何将该元素置于顶层？

Question

我正在使用react-native-paper中的Menu组件作为模态框标题栏上的选项菜单。

以下是模态框的屏幕截图：

包含Menu的父标签有兄弟元素（在标题下方）。 由于这个层次结构，似乎菜单被渲染在其他元素之下。 我尝试通过指定position:"absolute", zIndex: 100来覆盖这些重叠的元素。 但是，zIndex对它所遮盖的方式没有影响。我尝试将zIndex从1变化到1500，但也没有效果。

以下是菜单组件包装器（ModalOptions）的代码：

const ModalOptions = () => {
  const [visible, setVisible] = React.useState(false);
  const openMenu = () => setVisible(true);
  const closeMenu = () => setVisible(false);

  return (
    <Provider>
      <View>
        <Menu
          style={{ backgroundColor: "#222", borderWidth: 2, top:150, left:-100 , position: 'absolute', zIndex:100 }}
          visible={visible}
          onDismiss={closeMenu}
          anchor={
            <TouchableOpacity onPress={openMenu}>
              <ThreeDotIcon size={35} color={colors.darkGrey} />
            </TouchableOpacity>
          }>
          ...
        </Menu>
      </View>
    </Provider>
  );
};

我猜我的zIndex使用不正确... 如果是这样，我应该如何使用它呢？

如果不是，是否有其他方法可以完成此操作？

或者我需要重新格式化代码，以增加菜单的层级， 但我真的不想走这条路。

- Suraj Ingle

---

嗨Suraj，你找到解决方案了吗？ - Hend El-Sahli

@HendEl-Sahli 是的，事实证明问题出在使用zIndex上。zIndex在IOS上的工作方式是正确的。然而，在Android上实现相同的效果，我们需要增加elevation的值而不是zIndex。 - Suraj Ingle

好的，我来试一下， 感谢您回复我 - Hend El-Sahli

Answer 1

您可以使用一个View将提供程序包装起来，样式为{{zIndex: 100}}，如下所示。

<View style={{zIndex: 100}}>
  <Provider>
      <View>
        <Menu
          style={{ backgroundColor: "#222", borderWidth: 2, top:150, left:-100 , position: 'absolute', zIndex:100 }}
          visible={visible}
          onDismiss={closeMenu}
          anchor={
            <TouchableOpacity onPress={openMenu}>
              <ThreeDotIcon size={35} color={colors.darkGrey} />
            </TouchableOpacity>
          }>
          ...
        </Menu>
      </View>
    </Provider>
</View>

- Leo N

---

原来问题出在使用zIndex上。zIndex在IOS上的表现如预期一样。然而，为了在Android上实现相同的效果，我们需要增加elevation的值，而不是zIndex。 - Suraj Ingle