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

Question

zIndex 最近被引入 React-Native 以更改 View 在层堆栈中的位置。

虽然，我无法将View 放在Modal 组件之上。

我的代码如下所示：

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

我想我可以停止使用 <Modal> 并创建一个常规动画 <View>，其行为类似于 Modal，但我宁愿找到其他解决方案。

有什么想法吗？

Answer 1

const styles =  StyleSheet.create({
  modal: {
    backgroundColor: 'white',
    margin: 0, // This is the important style you need to set
    alignItems: undefined,
    justifyContent: undefined,
  }

<Modal isVisible={true} style={styles.modal}>
  <View style={{ flex: 1 }}>
    <Text>Hello!</Text>
 </View>
</Modal>

Answer 2

我一直在努力解决同样的问题，最后，我解决了。这是我发现的：

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

二、解决办法： 要使第二个模态在第一个模态上打开，您需要安排模态打开的顺序，这意味着您打开父模态然后打开子模态。 为此，我使用了 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 - 我使用useEffect() 触发模态打开道具，然后调用异步函数，该函数将在上述第一步等待openDialog() 函数，然后在调用第一个函数后设置打开状态。

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

这是您如何控制打开预先安排好的模态并相互叠加的方式

Answer 3

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

顺便说一句，模式的 react-native-community 版本也是基于 react-native 模式构建的，所以会有同样的问题。这里有一个关于不同js实现的讨论： https://github.com/react-native-community/react-native-modal/issues/145

Answer 4

无法使用模态。因为无论 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>
  );
}

Answer 5

您必须更改模态而不是视图之一的 z-index（值 1 的 z-index 就足够了）：

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

具有较大 z-index 的元素通常会覆盖具有较低 z-index 的元素 (MDN docs)。

编辑：

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

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

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