visual - Escala automática de altura de imagen con React Native

vscode auto close tags jsx

Question

En mi aplicación React Native, estoy obteniendo imágenes de una API con dimensiones desconocidas. ¿Cómo escala automáticamente la altura si conozco el ancho deseado?

Ejemplo:

Establecí el ancho a Dimensions.get(''window'').width . ¿Cómo establecer la altura y mantener la misma proporción?

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

Aquí hay una idea general de una solución bastante simple que aprovecha la propuesta de para usar aspectRatio:

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

No hay magia ni cálculos necesarios. Puro "CSS" si conoces las dimensiones de la imagen original.

Answer 2

Echa un vistazo a esta biblioteca react-native-scalable-image . Hace exactamente lo que estás pidiendo.

Answer 3

Hay una propiedad resizeMode configurada en ''contener''

Ejemplo:

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

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

Answer 4

Primero intente esto y vea si funciona para usted: https://github.com/facebook/react-native/commit/5850165795c54b8d5de7bef9f69f6fe6b1b4763d

Si no lo hace, entonces puede implementar su propio componente de imagen. Pero en lugar de tomar ancho como prop, anula el método onLayout que te da el ancho deseado para que puedas calcular la altura. Esto funciona mejor si no sabes el ancho y quieres que RN haga el diseño por ti. El inconveniente es que onLayout se llama después de un paso de diseño y representación. Por lo tanto, es posible que note que sus componentes se mueven un poco.

Answer 5

Prueba esto:

 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
};

Estoy pasando la URL como un prop llamado uri . Puede especificar su prop de width como Dimensions.get(''window'').width y eso debería cubrirlo.

Tenga en cuenta que esto también funcionará si sabe a qué desea configurar la altura y necesita cambiar el tamaño del ancho para mantener la proporción. En ese caso, debe especificar la height puntal en lugar del width .

Answer 6

La versión TypeScript de @TheJizel responde con propiedad de style opcional y devolución de llamada de failure en 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}]}/>
    }
}

Ejemplo de uso:

<ScaledImage style={styles.scaledImage} uri={this.props.article.coverImageUrl} width={Dimensions.get(''window'').width}/>