在模态的顶部使用zIndex风格和反应堆本机

zIndex has been introduced recently to React-Native to change the position of a View in the stack of layers.

zIndex最近被引入到反应堆本机，用于更改视图在层堆栈中的位置。

Although, I'm not able to bring a View on top of a Modal component.

虽然，我不能在模态组件的顶部显示视图。

My code looks like this:

我的代码是这样的:

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

I guess I could stop using <Modal> and create a regular animated <View> that would behave like the Modal, but I'd rather find another solution.

我想我可以停止使用，并创建一个常规的动画，它的行为类似于模态，但我宁愿找到另一个解决方案。

Any idea?

任何想法?

1 个解决方案

#1

You have to change the z-index of the modal not the one of the view (and a z-index of value 1 would suffice):

你必须改变模态的z指数而不是视图的z指数(值1的z指数就足够了):

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

An element with a larger z-index generally covers an element with a lower one (MDN docs).

一个带有较大z索引的元素通常包含一个低的元素(MDN文档)。

EDIT:

编辑:

Another solution is to change the order of the elements:

另一个解决办法是改变元素的顺序:

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

With this solution you don't need z-index because the modal is already on top of the view.

使用这个解决方案，您不需要z索引，因为模态已经在视图的顶部。

#1