javascript - 尽管使用了 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>