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>