Wie wird die Bildbreite auf 100% und die Höhe auf "Automatisch" eingestellt?

Ich versuche, eine Liste von Bildern in einer Bildlaufansicht anzuzeigen. Die Breite sollte 100% betragen, die Höhe sollte automatisch sein und das Seitenverhältnis beibehalten.

Die von mir durchgeführten Suchanfragen haben auf verschiedene Lösungen hingewiesen, die den Hintergrund im Vollbildmodus darstellen.

const styles = StyleSheet.create({
    image: {
        width: null,
        height: 300,
        resizeMode: 'cover'
    }
});

<ScrollView style={{flex: 1}}>
    <Image style={styles.image} source={require('../../../images/collection-imag1.png')}/>
    <Image style={styles.image} source={require('../../../images/collection-imag2.png')}/>
</ScrollView>

Ich habe verschiedene Kombinationen von width: null, height: null, flex: 1, alignSelf usw. ausprobiert. Die obige Lösung funktioniert fast, außer dass die Höhe nicht dynamisch ist. Teile des Bildes sind nicht sichtbar.

Antworten auf die Frage(8)

Ihre Antwort auf die Frage