在反应导航模式上方显示视图

Question

我有一个自定义的 snackbar 组件，它的 zIndex 高于其他视图，并且在应用程序中具有绝对位置。

只要没有打开模式，小吃店就可以正常工作。问题是，我有带嵌套模态的嵌套导航，并且 snackbar 组件需要始终位于顶部。

目前，我的屏幕选项是：

{ presentation: 'modal' }

Others like

containedModal

work, but gives me stacked headers for all the parent modals.我喜欢

modal

演示文稿在 iO 上的显示方式。有什么想法可以在应用程序根目录的任何模态上方显示绝对视图吗？

Answer 1

RN 中的 Z-index 与在网络上的工作方式不同——有关更多信息，请参阅文档。组件呈现为一棵树，第一个项目在底部并堆叠直到最后一个项目在顶部。

因此，您可以通过在其他所有内容之外和之后渲染它，将组件置于其他所有内容之上。即

// App.js

const App = () => {
  return (
    <>
      <NavigationContainer>
        <MainStack />
      </NavigationContainer>
      <Snackbar />
    </>
  );
};

您应该使用

position: 'absolute'

设置要显示在顶部的组件的样式。如果你想通过组件传递触摸，你还应该在根视图上使用

pointerEvents='box-none'

。