React Native adapta el ancho de la imagen mientras que la relación ancho/alto de la imagen se mantiene igual

Pudiera darse el caso de que encuentres algún fallo en tu código o trabajo, recuerda probar siempre en un entorno de testing antes aplicar el código al trabajo final.

Solución:

Usar el modo de cambio de tamaño cover y establezca el ancho en ScreenWidth / 2, puede recuperar el ancho de la pantalla usando el componente Dimensiones

//Get screen width using Dimensions component 
var width = Dimensions.get('window');
//....
//In image style 
image:
   width: width * 0.5

//In render function

Editar agregando desbordamiento

//add overflow : visible 

Las imágenes locales se pueden representar sin dar un ancho y una altura fijos, pero, para las imágenes remotas, debe proporcionar las dimensiones, ya que los nativos de reacción no pueden calcularlas en tiempo de ejecución. Entonces, lo siguiente funciona para mí.

y aplicar los siguientes estilos.

thumbContainer: 
    width: '100%',
    height: 400,
  ,
  thumbnail: 
    flex: 1,
    width: undefined,
    height: undefined,
    resizeMode: 'cover'
  ,

Este código funcionó para mí

Reseñas y calificaciones

---

---

Utiliza Nuestro Buscador