使用带有React-Native的zIndex风格的Modal顶部的视图

Question

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

虽然，我无法在Modal组件的基础上带上View。

我的代码如下所示：

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

我想我可以停止使用<Modal>创建一个正规的动画<View>会表现得像在Modal，但我宁愿找到另一种解决方案。

有什么想法？

Answer 1

你必须改变的模态不是视图中的所述一个的z索引（和的值1的z-index就足够了）：

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

具有较大的z-index通常的元件覆盖较低的元素（MDN docs）。

编辑：

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

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

有了这个解决方案，您不需要z-index，因为模式已经在视图的顶部。