Échelle automatique de la hauteur de l'image avec natif React

dans mon application native React, je récupère des images d'une API aux dimensions inconnues. Comment puis-je ajuster automatiquement la hauteur si je connais la largeur désirée?

Exemple:

j'ai mis la largeur à Dimensions.get('window').width. Comment régler la hauteur et garder le même rapport?

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???<<<
  }
)
24
demandé sur David Nathan 2017-02-11 02:06:43
la source

6 ответов

essaye 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 prop Dimensions.get('window').width et ça devrait le couvrir.

Notez 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 l' height prop au lieu de width.

21
répondu TheJizel 2018-09-12 13:32:47
la source

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

3
répondu Ihor Burlachenko 2017-09-09 18:25:13
la source

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, alors vous pouvez implémenter votre propre composant image. Mais au lieu de prendre width comme prop, vous outrepassez onLayout méthode qui vous donne la largeur désirée pour que vous puissiez calculer la hauteur. Cela fonctionne mieux si vous ne connaissez pas la largeur et voulez RN faire la mise en page pour vous. L'inconvénient est onLayout est appelée après un passage de mise en page et de rendu. Vous remarquerez peut-être que vos composants bougent un peu.

1
répondu Haitao Li 2017-02-11 08:20:08
la source

voici un gist pour une solution assez simple qui exploite @Haitao Li

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

pas de magie et pas de calculs nécessaires. Pur " CSS " si vous connaissez les dimensions de l'image originale.

1
répondu Thomas Praxl 2017-12-28 21:32:56
la source

dactylographié version de la réponse @TheJizel avec optionnel style propriété et failure rappel Image.getSize:

import * as React from 'react'
import {Image} from 'react-native'

interface Props {
    uri: string
    width?: number
    height?: number
    style?
}

interface State {
    source: {}
    width: number
    height: number
}

export default class ScaledImage extends React.Component<Props, State> {
    constructor(props) {
        super(props)
        this.state = {
            source: {uri: this.props.uri},
            width: 0,
            height: 0,
        }
    }

    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})
            }
        }, (error) => {
            console.log("ScaledImage:componentWillMount:Image.getSize failed with error: ", error)
        })
    }

    render() {
        return <Image source={this.state.source} style={[this.props.style, {height: this.state.height, width: this.state.width}]}/>
    }
}

Exemple d'utilisation:

<ScaledImage style={styles.scaledImage} uri={this.props.article.coverImageUrl} width={Dimensions.get('window').width}/>
1
répondu KlimczakM 2018-04-17 15:04:26
la source

Il y a une propriété resizeMode le mettre à 'contain'

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

0
répondu Nedko Dimitrov 2018-08-17 18:15:24
la source

Autres questions sur