원주민 반작용 : 쇼 이미지를 전체 화면에 중첩 된 구성 요소

Question

에

<Component1> 
    <Component2> 
    <Component3> 
     <Image 
     .... 
     > 
    </Component3> 
    </Component2> 
<Component1> 

컴포넌트 1 및 컴포넌트 2는 약간의 높이가 나는 구성 요소 계층 구조를 가지고있다.

이제 부모 구성 요소의 높이에 관계없이 높이가 각각 3 개인 구성 요소에 중첩 된 이미지를 전체 화면으로 표시하려면 어떻게해야합니까?

이미지를 flex : 1로 지정하면 전체 화면으로 이미지를 표시하려는 반면 Component3의 flexbox에서는 조정됩니다.

image: { 
     position: 'absolute', 
     top: 0, 
     left: 0, 
     right: 0, 
     bottom: 0, 
    }, 

및 모드는 '커버'

컨테이너 (Component3) 스타일로 설정 크기를 조정 :

현재 내 이미지 스타일이다

container: { 
     alignItems: 'center', 
     justifyContent: 'center', 
    }, 

Answer 1

const styles = StyleSheet.create({ 
     bgImageWrapper: { 
      position: 'absolute', 
      top: 0, bottom: 0, left: 0, right: 0 
     }, 
     bgImage: { 
      flex: 1, 
      resizeMode: "stretch" 
     }, 
    }); 

<Component1> 
    <Component2> 
    <Component3> 
     <View style={styles.bgImageWrapper}> 
     <Image style={styles.bgImage} /> 
     </View> 
    </Component3> 
    </Component2> 
<Component1> 

이 하나해야 작품