web-dev-qa-db-fra.com

Image 'contenir' resizeMode ne fonctionne pas dans réagit natif

J'utilise React Native sur un véritable appareil Android . Lors de la création d'une application très simple avec uniquement la fonction de rendu suivante sur le composant principal de l'application ...

render() {
  <Image
    source={{uri:'http://resizing.flixster.com/DeLpPTAwX3O2LszOpeaMHjbzuAw=/53x77/dkpu1ddg7pbsk.cloudfront.net/movie/11/16/47/11164719_ori.jpg'}}
    style={
      {
        flex: 1,
        resizeMode: 'contain',
        backgroundColor: 'yellow'
      }          
    } />
}

Je reçois le résultat suivant sur mon appareil: screenshot_2016-04-05-11-05-41

Comme vous pouvez le constater, tout l’arrière-plan est jaune, ce qui nous indique que l’élément d’image prend effectivement la taille de l’écran. Mais il est juste rendu incorrect . Le 'cover' resizeMode fonctionne comme prévu (et le mode 'stretch' également) . C'est le mode 'contenir' qui ne fonctionne pas (le plus important de mon point de vue) . Le problème s'aggrave lorsque vous placez l'image sur un ListView, car l'image ne s'affiche même pas.

UPDATE 1 Comme le fait remarquer Frederick, "contenir" ne fonctionne que lorsque l'image est plus grande que la taille du conteneur. Alors, comment faire en sorte que l’image prenne toute la taille du conteneur tout en conservant son rapport de format?? chargé. Aucun des événements associés au composant Image ne fournit ces informations.

UPDATE 2 Bonne nouvelle. J'utilise maintenant React Native v0.24.1 et il semble que le mode 'contenir' de l'image fonctionne maintenant comme prévu, même lorsque la taille réelle de l'image est plus petite que celle de son conteneur. La solution de zvona est bonne onLayout vous donnera la taille d'affichage de l'image dans laquelle l'image est rendue, mais PAS la taille réelle de l'image chargée). Pour le moment, je ne connais aucun moyen de connaître la taille réelle de l'image (supposons que vous récupériez l'image à partir d'une ressource réseau et que vous ne connaissiez pas la taille, ce qui pourrait être très important si vous souhaitez calculer son rapport d'aspect).

react-nativereact-native-listview
15
user3621841

Ma réponse àMISE &AGRAVE; JOURpartie de la question:

<Image source={{uri:'...'}} onLayout={this.onImageLayout} />

où:

onImageLayout: function(data){
  console.log('layout', data.nativeEvent.layout);
}

Celles-ci doivent être proportionnées à la largeur et à la hauteur de l'appareil, que vous obtenez avec:

const {
  Dimensions,
  .
  .
  .
} = React;

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

Et si vous voulez obtenir la largeur/hauteur sous forme de pourcentages dans les styles, vous définissez simplement, par exemple:

const styles = StyleSheet.create({
  image: {
    width: windowWidth * 0.75,
    height: windowHeight * 0.33
  }          
});
6
zvona

C'est la dernière solution:

Image.resizeMode.contain ne fonctionne pas avec la dernière version de react native, je l'utilise comme ceci:

import ImageResizeMode from 'react-native/Libraries/Image/ImageResizeMode'

<Image source={image} resizeMode={ImageResizeMode.contain} />
4
Sagar Chavada

C'est ce qui a fonctionné pour moi avec le dernier réactif natif 0.37:

<Image source={require('../images/my-image.png')} resizeMode={Image.resizeMode.center} />

Répondre à la partie updated de la question. Vous pouvez obtenir la taille d'image pour des images externes à l'aide de Image.getSize . 

Pour les images locales, un moyen moins documenté de calculer la taille et de calculer ainsi le rapport de format est d'utiliser resolveAssetSource, qui est un module react-native (aucun besoin de bibliothèque externe):

let resolveAssetSource = require('resolveAssetSource')
let { width, height } = resolveAssetSource(image_source)
let aspectRatio = width / height
4
ragamufin

"Conteneur" ne redimensionne votre image que lorsque la taille de l'image est supérieure au conteneur que vous essayez de l'adapter. Dans ce cas, votre conteneur s'affiche en plein écran. L'image que vous chargez via l'URL est bien plus petite car elle ne mesure que 53 x 77 pixels. Donc, il ne sera pas redimensionné.

Je pense que "couvrir" devrait faire ce que vous essayez de réaliser. Cependant, en raison de la taille de l'image, l'image ne sera pas très jolie si elle est ainsi grossie. Fait un exemple ici: https://rnplay.org/apps/X5eMEw

0
Frederick Motte