Comment définir la largeur de l'image à 100% et la hauteur de l'auto à réagir natif?

Question

J'essaie d'afficher la liste des images dans un scrollview. La largeur doit être de 100%, tandis que la hauteur doit être automatique, en gardant les proportions.

Les recherches je ne l'ai souligné à diverses solutions qui donnent plein écran style d'arrière-plan.

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>

J'ai essayé différentes combinaisons de largeur: null, hauteur: null, flex: 1, alignSelf etc. La solution ci-dessus est presque de travail, à l'exception de la hauteur n'est pas dynamique. Les parties de l'image ne sont pas visibles.

Answer 1

Donc après avoir réfléchi pendant un certain temps, j'ai été en mesure d'atteindre height: auto à réagir indigènes de l'image. Vous avez besoin de connaître les dimensions de votre image pour ce hack de travail. Il suffit d'ouvrir votre image dans une image viewer et vous permettra d'obtenir les dimensions de votre image dans le fichier de renseignements. Pour référence, la taille de l'image que j'ai utilisé est de 541 x 362

Tout d'abord importer les Dimensions de réagir indigènes

import { Dimensions } from 'react-native';

ensuite, vous devez obtenir les dimensions de la fenêtre

const win = Dimensions.get('window');

Calculer le ratio de

const ratio = win.width/541; //541 is actual image width

maintenant, le ajouter du style à votre image

imageStyle: {
    width: win.width,
    height: 362 * ratio, //362 is actual height of image
}

Answer 2

"resizeMode" n'est pas le style de la propriété. Doit se déplacer à l'Image de la composante en Props comme le code ci-dessous.

const win = Dimensions.get('window');

const styles = StyleSheet.create({
    image: {
        flex: 1,
        alignSelf: 'stretch',
        width: win.width,
        height: win.height,
    }
});

...
    <Image 
       style={styles.image}
       resizeMode={'contain'}   /* <= changed  */
       source={require('../../../images/collection-imag2.png')} /> 
...

De l'Image en hauteur ne deviendrez pas automatiquement parce que l'Image est nécessaire à la fois la largeur et la hauteur en style props. Si vous avez besoin de calculer par vous-même à l'aide de getSize() la méthode et vous pouvez le voir dans cette réponse.

Il y a beaucoup de bibliothèques open source, on affiche la liste ci-dessous.

• réagir-native-auto-hauteur de l'image
• réagir-native-fullwidth-image
• réagir-native-fit-image

Answer 3

Vous devez toujours définir la largeur et la hauteur de l' Image. Il ne va pas automatiquement la taille des choses pour vous. La Réagir Natif docs dit.

Vous devez mesurer la hauteur totale de l' ScrollView l'aide onLayout et de régler la hauteur de l' Images, basée sur elle. Si vous utilisez resizeMode de cover il va garder le ratio d'aspect de votre Images, mais il sera bien évidemment de les recadrer si c'est plus grand que le contenant.

Answer 4

Pour la balise d'image vous pouvez utiliser ce type de style, il a travaillé pour moi:

imageStyle: {
    width: Dimensions.get('window').width - 23,
    resizeMode: "contain",
    height: 211,
 },