Las apps de React Native muestran imágenes (locales y remotas) y agrupan recursos (fuentes, etc.). Entender cómo cargar imágenes de forma eficiente, manejar diferentes resoluciones y optimizar el rendimiento de las imágenes es importante para una buena experiencia de usuario y rendimiento.
{ } ;
Las imágenes locales usan require (agrupadas); las imágenes remotas usan una uri. Las imágenes necesitan dimensiones explícitas (ancho/alto) — a diferencia de la web, no se ajustan automáticamente según el archivo.
→ RESOLUTION: provide @2x and @3x variants (logo.png, [email protected], [email protected]) → RN
picks the right one per device density (crisp on all screens)
→ resizeMode: cover / contain / stretch / center → how the image fits its box
✓ Use APPROPRIATELY-SIZED images (don't load huge images into small views — wastes
memory/bandwidth)
✓ FastImage (react-native-fast-image) → better remote image performance + CACHING
(caches images so they don't re-download; smoother than the default Image for lists)
✓ Use the right FORMAT (WebP for smaller sizes); lazy-load; placeholders while loading
✓ Images are a common source of memory issues / jank in lists → optimize them
Entender cómo manejar imágenes y recursos es valioso porque la mayoría de las apps muestran imágenes, y hacerlo de forma eficiente afecta tanto a la experiencia de usuario como al rendimiento, por lo que es conocimiento práctico útil.
Entender cargar imágenes — imágenes locales mediante require (agrupadas en tiempo de compilación), imágenes remotas mediante una uri, y el punto importante de que las imágenes necesitan dimensiones explícitas en React Native (a diferencia de la web, no se ajustan automáticamente) — es necesario para mostrar cualquier imagen.
Entender manejo de resolución (proporcionar variantes @2x/@3x para que React Native elija la correcta según la densidad del dispositivo para imágenes nítidas en diferentes pantallas) y resizeMode (cómo se ajustan las imágenes a su caja) es importante para que las imágenes se vean bien en las diversas densidades de pantalla de Android e iOS.
Más importante aún, entender optimización del rendimiento de imágenes es valioso porque las imágenes son una fuente común de problemas de memoria y jank (especialmente en listas): usar imágenes de tamaño apropiado (no cargar imágenes enormes en vistas pequeñas, lo que desperdicia memoria y ancho de banda), usar FastImage para un mejor rendimiento de imágenes remotas y almacenamiento en caché (para que las imágenes no se descarguen de nuevo y las listas se desplacen sin problemas — una mejora significativa sobre Image por defecto para listas con muchas imágenes), usar formatos eficientes (WebP), y carga diferida con marcadores de posición.
Estas optimizaciones importan porque las apps con muchas imágenes (comunes — feeds, galerías, perfiles) pueden sufrir problemas de rendimiento reales si las imágenes no se manejan bien.
Ya que la mayoría de las apps muestran imágenes y manejarlas bien (carga y dimensiones correctas, variantes de resolución, y especialmente optimización del rendimiento con almacenamiento en caché y tamaño apropiado) afecta tanto a la experiencia de usuario (imágenes nítidas que se cargan sin problemas) como al rendimiento (evitando problemas de memoria y jank), entender imágenes y recursos en React Native es conocimiento valioso y prácticamente relevante — importante para la necesidad común de mostrar imágenes, donde entender carga, resolución, y especialmente optimización del rendimiento (almacenamiento en caché, tamaño) es clave para construir apps fluidas y pulidas con muchas imágenes.