web-dev-qa-db-fra.com

Comment régler la largeur de l'image sur 100% et la hauteur sur automatique dans la réponse native?

J'essaie d'afficher une liste d'images dans une vue à défilement. La largeur doit être de 100%, tandis que la hauteur doit être automatique, en conservant les proportions.

Les recherches que j'ai effectuées ont mis en évidence diverses solutions qui donnent un style de fond plein écran.

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é diverses combinaisons de largeur: null, height: null, flex: 1, alignSelf, etc. La solution ci-dessus fonctionne presque, sauf que la hauteur n'est pas dynamique. Certaines parties de l'image ne sont pas visibles.

javascriptimagereactjsreact-native
29
Prabhakar Bhat

"resizeMode" n'est pas une propriété de style. Devrait être déplacé dans la variable Props du composant Image, comme 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')} /> 
...

La hauteur de l'image ne deviendra pas automatiquement car le composant Image est requis à la fois en largeur et en hauteur dans style props. Vous devez donc calculer vous-même en utilisant getSize () method et vous pouvez voir dans cette réponse .

Il y a beaucoup de bibliothèques open source utiles, la liste est affichée ci-dessous.

24
Lwin Kyaw Myat

Donc, après avoir réfléchi pendant un moment, j’ai réussi à atteindre la hauteur: auto dans une image réactive-native . Vous devez connaître les dimensions de votre image pour que ce piratage fonctionne. Ouvrez simplement votre image dans n’importe quelle visionneuse et vous obtiendrez les dimensions de votre image dans les informations de fichier .pour référence la taille de l’image que j’ai utilisée est 541 x 362

Première importation de dimensions de react-native

import { Dimensions } from 'react-native';

alors vous devez obtenir les dimensions de la fenêtre

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

Calculez maintenant le ratio comme 

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

maintenant le style ajouter à votre image 

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

Vous devez toujours définir la largeur et la hauteur d'une Image. Il ne va pas automatiquement dimensionner les choses pour vous. Le React Native docs le dit .

Vous devez mesurer la hauteur totale de ScrollView à l'aide de onLayout et définir la hauteur de Images en fonction de celle-ci. Si vous utilisez resizeMode sur cover, les proportions de votre Image seront conservées, mais elles seront évidemment coupées si leur taille est supérieure au conteneur.

5
rclai

Pour les tags d'image, vous pouvez utiliser ce type de style, cela a fonctionné pour moi:

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