javascript - tamaño - ¿Cómo configurar el ancho de la imagen para que sea 100% y la altura para que se auto reaccione de forma nativa?

insertar imagen html url

Question

Estoy tratando de mostrar la lista de imágenes en una vista de desplazamiento. El ancho debe ser del 100%, mientras que la altura debe ser automática, manteniendo la relación de aspecto.

Las búsquedas que hice apuntaban a varias soluciones que dan estilo de fondo de pantalla completa.

const styles = StyleSheet.create({
    image: {
        width: null,
        height: 300,
        resizeMode: ''cover''
    }
});

<ScrollView style={{flex: 1}}>
    <Image style={styles.image} source={require(''../../../images/collection-imag1.png'')}/>
    <Image style={styles.image} source={require(''../../../images/collection-imag2.png'')}/>
</ScrollView>

He probado varias combinaciones de ancho: nulo, alto: nulo, flex: 1, alinearse, etc. La solución anterior casi funciona, excepto que el alto no es dinámico. Partes de la imagen no son visibles.

Answer 1

Así que después de pensar por un tiempo pude alcanzar la altura: auto en la imagen nativa de reacción. Necesitas saber las dimensiones de tu imagen para que funcione este truco. Simplemente abra su imagen en cualquier visor de imágenes y obtendrá las dimensiones de su imagen en la información del archivo. Para referencia el tamaño de la imagen que utilicé es 541 x 362.

Primeras dimensiones de importación de reaccion-nativo

import { Dimensions } from ''react-native'';

Entonces tienes que obtener las dimensiones de la ventana.

const win = Dimensions.get(''window'');

Ahora calcula la razón como

const ratio = win.width/541; //541 is actual image width

ahora el estilo añadir a su imagen como

imageStyle: {
    width: win.width,
    height: 362 * ratio, //362 is actual height of image
}

Answer 2

Siempre tienes que configurar el ancho y alto de una Image . No va a dimensionar automáticamente las cosas para ti. Los doctores React Native lo dicen .

Debería medir la altura total de ScrollView utilizando onLayout y establecer la altura de las Image función de ello. Si usa resizeMode of cover mantendrá la relación de aspecto de sus Image , pero obviamente las recortará si es más grande que el contenedor.

Answer 3

"resizeMode" no es una propiedad de estilo. Debe moverse a los Props del componente de imagen como el código de abajo.

const win = Dimensions.get(''window'');

const styles = StyleSheet.create({
    image: {
        flex: 1,
        alignSelf: ''stretch'',
        width: win.width,
        height: win.height,
    }
});

...
    <Image 
       style={styles.image}
       resizeMode={''contain''}   /* <= changed  */
       source={require(''../../../images/collection-imag2.png'')} /> 
...

La altura de la imagen no se convertirá automáticamente porque el componente de la imagen se requiere tanto de ancho como de alto en los style props . Por lo tanto, debe calcular usted mismo utilizando el método getSize() y puede verlo en esta respuesta .

Hay muchas bibliotecas de código abierto útiles, la lista se muestra a continuación.

• react-native-auto-height-image
• react-native-fullwidth-image
• react-native-fit-image