Принесите вид сверху Модаля, используя стиль zIndex с React-Native

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

Вы должны изменить Z-индекс модальных а не один из представления (и Z-индекс стоимости 1 будет достаточно):

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

Элемент с большим Z-индекс в целом покрывает элемент с нижним (MDN docs).

EDIT:

Другим решением является изменение порядка элементов:

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

С помощью этого решения вам не нужно z-index, потому что модальный уже на вершине зрения.