Javascript 使用zIndex样式和React Native将视图置于模态之上

最近引入了

zIndex

，以对更改

视图

在层堆栈中的位置作出本机反应

尽管如此，我无法将

视图

置于

模态

组件之上

我的代码如下所示：

render() {
  return (
    <View>
      <Modal visible>
        {props.children}
      </Modal>
      <View style={{ zIndex: 1000 }}>
        <Text>Loading...</Text>
      </View>
    </View>
  );
}

render（）{
返回(
{props.children}
加载。。。
);
}

我想我可以停止使用

并创建一个常规的动画

，它的行为类似于

模式

，但我宁愿找到另一个解决方案

---

有什么想法吗？

您必须更改模式的z索引，而不是视图的z索引（值为

1

的z索引就足够了）：

render（）{
返回(
{props.children}
加载。。。
);
}

具有较大z索引的元素通常覆盖具有较低z索引的元素（）

编辑：

另一种解决方案是更改元素的顺序：

render() {
  return (
    <View>
      <View>
        <Text>Loading...</Text>
      </View>
      <Modal visible>
        {props.children}
      </Modal>
    </View>
  );
}

render（）{
返回(
加载。。。
{props.children}
);
}

---

使用此解决方案，您不需要

z-index

，因为模式已经位于视图顶部。

使用模式是不可能的。无论屏幕上给它和其他组件的zIndex是什么，都应该始终显示模态

它将始终显示给您，除非您将其设置为visible=false

实现你想要的。您可以使用带有zIndex技巧的绝对定位视图前后移动此视图

render() {
  return (
    <View>
       <View style={{position:'absolute',top:0,bottom:0,left:0,right:0,zIndex:visible?-1:2}}>
          {props.children}
       </View>
       <View style={{ zIndex: 1 }}>
          <Text>Loading...</Text>
       </View>
     </View>
  );
}

render（）{
返回(
{props.children}
加载。。。
);
}
不幸的是，再多的
zIndex
操作都不会带来高于react-native
模式的东西。
Modal
组件是一个本机视图，位于react本机应用程序的其余部分之上。将某些内容置于其之上的唯一方法是将某些内容置于模态本身，或者交替使用模态的仅js实现

顺便说一句，modal的react本地社区版本也构建在react本地modal的基础上，因此也存在同样的问题。这里讨论了不同的js实现：
我一直在努力解决同样的问题，最终我解决了它。以下是我的发现：

首先，问题是：
问题是，模式出现在所有屏幕层的顶部，这意味着它将显示在所有应用程序元素上，因此，如果同时打开两个模式，应用程序将使其相互关联，因为应用程序不知道模式的顺序，因此，你会在另一个后面看到你的模式

第二，解决方案：
要使第二个模态在第一个模态上打开，您需要安排模态打开的顺序，这意味着您先打开父模态，然后打开子模态。
为了做到这一点，我使用了promise，它允许我这样做，例如：-

1-创造承诺

const [isOpen, setOpen] = useState({ backDrop: false, modal: false }); // modals open state

function openDialog() {
    return new Promise((resolve) => {
        setOpen((previous) => ({ ...previous, backDrop: props.isOpen }))
        resolve()
    })
}

2-我使用
useffect（）
触发模态打开道具，然后调用异步函数，该函数将在上面的第一步等待
openDialog（）
函数，然后在调用第一个函数后设置打开状态

useEffect(() => {
    (async function () {
        await openDialog()
        setOpen((previous) => ({ ...previous, modal: props.isOpen }))
    }())
}, [props.isOpen])

这就是你如何控制打开预先安排好的模态，并使它们相互重叠的方法
这个解决方案不起作用。我的模态视图的zIndex为1，加载视图的zIndex为10。你必须交换它们。
z-index
越大，视图层次结构中的元素越“高”。尝试在模态上设置一个10的
z-index
。在我的例子中，我无法更改元素的顺序。不幸的是：（OP试图将视图覆盖在模态的顶部，而不是相反的方式（这是默认的）这将不起作用，因为模态将始终位于“应用程序”的顶部你找到解决方案了吗？我正在为同样的问题挣扎。2019年仍然没有解决方案？
useEffect(() => {
    (async function () {
        await openDialog()
        setOpen((previous) => ({ ...previous, modal: props.isOpen }))
    }())
}, [props.isOpen])