使用带有React-Native的zIndex样式将视图置于Modal之上

Question

zIndex最近已经介绍了React-Native来改变View层堆栈中a的位置.

虽然,我无法将View一个Modal组件放在首位.

我的代码看起来像这样:

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

我想我可以停止使用<Modal>并创建一个<View>表现得像的常规动画Modal,但我宁愿找到另一个解决方案.

任何的想法？

Answer 1

不幸的zIndex是，再多的操作也不会带来高于 react-native 的东西Modal。该Modal组件是一个本机视图，位于您的本机应用程序的其余部分之上。将一些东西放在它上面的唯一方法是在模态本身中放置一些东西，或者交替使用仅 js 实现的模态。

顺便说一句，反应原生社区版本的 modal 也是建立在反应原生模式上的，所以会有同样的问题。这里有关于不同 js 实现的讨论：https : //github.com/react-native-community/react-native-modal/issues/145

Answer 2

您必须更改模式的 z 索引而不是视图的 z 索引（并且 z 索引值1就足够了）：

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

z-index 较大的元素通常会覆盖 z-index 较小的元素（MDN 文档）。

编辑：

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

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

使用此解决方案，您不需要z-index，因为模式已经位于视图顶部。