尽管使用了 zIndex，但 React-native-paper 菜单隐藏在其他元素后面。我如何将元素置于顶部？

Question

我正在使用来自react-native-paper 的Menu 组件作为modal-header 上的选项菜单。

下面是模态的截图：

包含Menu 的父标签具有兄弟元素（标题下方的内容）。 似乎由于这种层次结构，菜单正在其他元素下呈现。 我尝试通过分配possition:"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... 如果是这样，我应该如何使用它？

如果没有，还有其他方法可以完成吗？

或者我可能需要重新格式化代码以增加菜单的层次结构 但我真的不喜欢这样。

Answer 1

您可以使用 View 来包装带有 style={{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>