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> 사용을 중지하고 Modal처럼 행동 할 일반 애니메이션 <View>을 만들 수도 있겠죠,하지만 난 오히려 또 다른 해결책을 찾을 것입니다 :

내 코드는 다음과 같습니다.

아이디어가 있으십니까?

Answer 1

넌 모달하지 뷰의 하나의 Z- 색인 (그리고 충분 값 1의 Z- 색인)를 변경해야 :

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

일반적으로 더 큰 Z- 색인 인 요소 하위 요소 (MDN docs)를 포함합니다.

는 편집 : 모달 뷰의 상단에 이미 있기 때문에 당신이 z-index 필요하지 않습니다이 솔루션을

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

:는

또 다른 해결책은 요소의 순서를 변경하는 것입니다.