Реагировать Native: Показать изображение в полноэкранном режиме во вложенных компонентах

Question

У меня есть компонент иерархия

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

Component1 и Component2 имеют некоторую высоту.

Теперь, как показать изображение, вложенное в 3 компонента с некоторой высотой, в полноэкранном режиме, независимо от высоты его родительских компонентов?

Если я даю изображение как flex: 1, он будет просто настраиваться в flexbox Component3, тогда как я хочу показать изображение в полноэкранном режиме.

В настоящее время мой стиль Изображение:

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> 

этого нужно работы