[英]React Native - modals overlay
Modal 1 -- Component 1
|
Component 2
|
Modal 2 -- Component 3
I have a scenario like the 'drawing' above, where component 3 is initialized in component 2 which is initialized in component 1.我有一个像上面的“绘图”这样的场景,其中组件 3 在组件 2 中初始化,组件 2 在组件 1 中初始化。
Component 1 and 3 each holds a component with a modal.组件 1 和 3 各包含一个带有模态的组件。
If component 3's modal is open.如果组件 3 的模态是打开的。 The modal from component 1 is hidden behind it if it's opened.
如果打开,组件 1 中的模态将隐藏在其后面。 I however want it to be on top of the stack and in the front view.
但是,我希望它位于堆栈顶部和前视图中。
I tried with ordering things in the code, and i tried with zIndex with position either absolute or relative.我尝试在代码中排序,并尝试使用 zIndex 和 position 绝对或相对。
{position: 'relative/absolute', overlay: {zIndex: 99}};
but neither seems to work.但似乎都不起作用。
I've looked into similar posts but was unable to find an answer that work's.我查看了类似的帖子,但找不到有效的答案。
How can i force modal 1 to always be visible if other modals are opened from a 'higher' component in the stack如果从堆栈中的“更高”组件打开其他模式,我如何强制模式 1 始终可见
You could use Modal component or some other module.您可以使用模态组件或其他一些模块。
But if you want to create your own modal you can follow this pattern.但是如果你想创建自己的模态,你可以遵循这个模式。
in your main component App, have 2 child components在您的主组件 App 中,有 2 个子组件
<App>
<Home /> //All components/navigation are here
{
isModalOpen && <Modal />
}
</App>
Set Modal style to something like position:absolute, left: 0, right: 0, top: 0, bottom: 0将模态样式设置为 position:absolute, left: 0, right: 0, top: 0, bottom: 0
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.