Reagieren Nativ: Bild in Vollbild in verschachtelten Komponenten

Question

I-Komponenten-Hierarchie als

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

Component1 und Component2 gewisse Höhe haben.

Wie zeige ich nun das Bild, in 3 Komponenten mit jeweils einer Höhe geschachtelt, im Vollbild unabhängig von der Höhe seiner Elternteile?

Wenn ich Bild als flex gebe: 1, Es wird sich nur in Component3 Flexbox anpassen, während ich das Bild im Vollbildmodus anzeigen möchte.

Zur Zeit mein Bild Stil ist:

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

and Resize-Modus 'Abdeckung' gesetzt

Sein Behälter (Component3) Stil:

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> 

dies sollte man funktioniert