使用React-Native的zIndex样式将View置于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>，并创建一个像Modal一样的常规动画<View>，但我宁愿找到另一个解决方案。

任何想法?

Answer 1

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

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

Answer 2

不支持modal。因为无论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 3

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 4

我也遇到了同样的问题，最后我解决了。以下是我的发现:

首先，问题:问题是模态出现在所有屏幕层的顶部，这意味着它会显示在所有的应用元素上，所以如果你同时打开两个模态，应用会让它们彼此重叠，因为应用不知道模态应该是什么顺序，因此，你会看到你的模态在另一个的后面。

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

1 - create promise

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()来触发模态打开道具，然后调用一个async函数，该函数将等待上面第一步的openDialog()函数，然后在第一个函数调用后设置打开状态。

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

这是你如何控制打开预先安排的情态，并在彼此的顶部

Answer 5

你必须改变模态的z-index而不是视图的z-index(值为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，因为模式已经在视图的顶部