Automatique de l'échelle de hauteur de l'image à Réagir Natif

Essayez ceci:

 import React, { Component, PropTypes } from "react";
import { Image } from "react-native";
export default class ScaledImage extends Component {
constructor(props) {
super(props);
this.state = { source: { uri: this.props.uri } };
}
componentWillMount() {
Image.getSize(this.props.uri, (width, height) => {
if (this.props.width && !this.props.height) {
this.setState({
width: this.props.width,
height: height * (this.props.width / width)
});
} else if (!this.props.width && this.props.height) {
this.setState({
width: width * (this.props.height / height),
height: this.props.height
});
} else {
this.setState({ width: width, height: height });
}
});
}
render() {
return (
<Image
source={this.state.source}
style={{ height: this.state.height, width: this.state.width }}
/>
);
}
}
ScaledImage.propTypes = {
uri: PropTypes.string.isRequired,
width: PropTypes.number,
height: PropTypes.number
};

Je suis de passage à l'URL comme un accessoire appelé uri. Vous pouvez spécifier votre width accessoire comme Dimensions.get('window').width et qui devrait couvrir.

Noter que cela fonctionne aussi si vous savez ce que vous voulez définir la hauteur et vous avez besoin de redimensionner la largeur de maintenir le rapport. Dans ce cas, vous devez spécifier le height prop à la place de la width un.

Jetez un oeil à cette bibliothèque réagir-native-évolutif-image. C'est exactement ce que vous demandez.

import React from 'react';
import { Dimensions } from 'react-native';
import Image from 'react-native-scalable-image';
const image = (
<Image
width={Dimensions.get('window').width} //height will be calculated automatically
source={{uri: '<image uri>'}}
/>
);

D'abord essayer cela et voir si cela fonctionne pour vous: https://github.com/facebook/react-native/commit/5850165795c54b8d5de7bef9f69f6fe6b1b4763d

Si elle ne le fait pas, alors vous pouvez mettre en place votre propre composant de l'image. Mais au lieu de prendre la largeur prop, vous remplacer onLayout méthode qui vous donne à la largeur désirée de sorte que vous pouvez calculer la hauteur. Cela fonctionne mieux si vous ne connaissez pas la largeur et souhaitez RN à faire la mise en page pour vous. L'inconvénient est onLayout est appelée après un passage de la présentation et le rendu. Donc, vous remarquerez peut-être vos composants à se déplacer un peu.

La solution proposée fonctionne, mais vous devez télécharger l'image, une fois pour déterminer la taille et une autre pour en montrer l'image, c'est une approche différente, l'image est chargée, au carré d'abord et redimensionnée.

import React, { Component, } from "react";
import { Image } from "react-native";
import PropTypes from 'prop-types'
export default class ScaledImage extends Component {
state = {}
componentWillMount() {
const { uri, width, height } = this.props;
this.setState({ source: { uri }, width: width || height, height: height || width });
}
render() {
return (
<Image
source={this.state.source}
onLoad={(value) => {
const { height, width } = value.nativeEvent.source;
if (this.props.width && !this.props.height) {
this.setState({
width: this.props.width,
height: height * (this.props.width /width)
});
} else if (!this.props.width && this.props.height) {
this.setState({
width: width * (this.props.height /height),
height: this.props.height
});
} else {
this.setState({ width: width, height: height });
}
}}
style={{ height: this.state.height, width: this.state.width }}
/>
);
}
}
ScaledImage.propTypes = {
uri: PropTypes.string.isRequired,
width: PropTypes.number,
height: PropTypes.number
};

Vous avez 3 numéros :

1. largeur de l'Image
2. hauteur de l'Image
3. largeur de l'Écran

et vous devriez mettre "la largeur de l'Écran" dans la largeur de style et aussi de calculer
hauteur de l'installation dans le style ??!!

componentWillMount() {
Image.getSize(this.props.product.image, (width, height) => {
const screenWidth = Math.round(Dimensions.get('window').width);  
this.setState({screenWidth:screenWidth});
Calculatedheight = screenWidth * height /width ;
this.setState({Calculatedheight : Calculatedheight });
});
}

et

<Image
source={{uri: product.image,cache: 'only-if-cached'}}
style={{ height: this.state.screenHeight , width: this.state.Calculatedheight }}
/>