Mise à l'échelle automatique de la hauteur des images avec React Native

Question

Dans mon application React Native, je récupère des images depuis une API avec des dimensions inconnues. Comment puis-je mettre à l'échelle automatiquement la hauteur si je connais la largeur souhaitée ?

Exemple :

J'ai réglé la largeur sur Dimensions.get('window').width . Comment régler la hauteur et garder le même ratio ?

export default class MyComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      imgUrl: 'http://someimg.com/coolstuff.jpg'
    }
  }

  componentDidMount() {
    // sets the image url to state
    this.props.getImageFromAPi()
  }

  render() {
    return (
      <View>
        <Image 
          source={uri: this.state.imgUrl}
          style={styles.myImg}
        />
        <Text>Some description</Text>
      </View>
    )
  }
}

const styles = StyleSheet.create(
  myImg: {
    width: Dimensions.get('window').width,
    height: >>>???what goes here???<<<
  }
)

Answer 1

Essayez ça :

 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 passe l'URL comme une prop appelée uri . Vous pouvez spécifier votre width prop en tant que Dimensions.get('window').width et ça devrait suffire.

Notez que cela fonctionne également si vous savez à quoi vous voulez fixer la hauteur et que vous devez redimensionner la largeur pour maintenir le rapport. Dans ce cas, vous devez spécifier le paramètre height au lieu de la width un.

Answer 2

Il y a une propriété resizeMode définissez-le comme "contenant".

Exemple :

<Image
    source={require('./local_path_to/your_image.png')}
    style={{ width: 30 }}
    resizeMode="contain"
 />

Source : https://facebook.github.io/react-native/docs/image#resizemode

Answer 3

Jetez un coup d'œil à cette bibliothèque react-native-scalable-image . Il fait 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>'}}
   />
);

Answer 4

Essayez d'abord ceci et voyez si cela fonctionne pour vous : https://github.com/facebook/react-native/commit/5850165795c54b8d5de7bef9f69f6fe6b1b4763d

Si ce n'est pas le cas, vous pouvez implémenter votre propre composant image. Mais au lieu de prendre la largeur comme prop, vous surchargez onLayout qui vous donne la largeur souhaitée afin que vous puissiez calculer la hauteur. Cela fonctionne mieux si vous ne connaissez pas la largeur et que vous voulez que RN fasse la mise en page pour vous. L'inconvénient est le suivant onLayout est appelé après un passage de la mise en page et du rendu. Vous pouvez donc constater que vos composants se déplacent un peu.

Answer 5

Voici l'essentiel d'une solution assez simple qui tire parti des éléments suivants @Haitao Li La proposition de la Commission d'utiliser le rapport d'aspect :

https://gist.github.com/tpraxl/02dc4bfcfa301340d26a0bf2140cd8b9

Pas de magie ni de calculs nécessaires. Du pur "CSS" si vous connaissez les dimensions de l'image originale.