Como você lida com imagens e assets no React Native?

Question

IT Interview Practice · Accepted Answer

Apps React Native exibem **imagens** (locais e remotas) e agrupam **assets** (fontes, etc.). Entender como carregar imagens de forma eficiente, lidar com diferentes resoluções e otimizar o desempenho de imagens é importante para uma boa UX e desempenho. ## Carregando imagens ```jsx import { Image } from 'react-native'; // LOCAL image (bundled with the app) — required at build time // REMOTE image (from a URL) — needs explicit dimensions ``` Imagens locais usam `require` (agrupadas); imagens remotas usam uma `uri`. **Imagens precisam de dimensões explícitas** (largura/altura) — diferentemente da web, elas não se dimensionam automaticamente a partir do arquivo. ## Resolução e resizeMode ```text → RESOLUTION: provide @2x and @3x variants (logo.png, logo@2x.png, logo@3x.png) → RN picks the right one per device density (crisp on all screens) → resizeMode: cover / contain / stretch / center → how the image fits its box ``` ## Desempenho: otimize imagens ```text ✓ 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 ``` ## Por que isso importa Entender como lidar com imagens e assets é valioso porque **a maioria dos apps exibe imagens**, e fazer isso de forma eficiente afeta tanto a UX quanto o desempenho, então é um conhecimento prático útil. Entender **carregamento de imagens** — imagens locais via `require` (agrupadas no tempo de compilação), imagens remotas via uma `uri`, e o ponto importante de que **imagens precisam de dimensões explícitas** no React Native (diferentemente da web, elas não se dimensionam automaticamente) — é necessário para exibir qualquer imagem. Entender **tratamento de resolução** (fornecer variantes @2x/@3x para que o React Native escolha a correta por densidade do dispositivo para imagens nítidas em diferentes telas) e **resizeMode** (como as imagens se encaixam em sua caixa) é importante para imagens que se veem bem nas diversas densidades de tela do Android e iOS. Mais importante ainda, entender **otimização de desempenho de imagens** é valioso porque **imagens são uma fonte comum de problemas de memória e jank** (especialmente em listas): usar imagens de tamanho apropriado (não carregar imagens enormes em visualizações pequenas, o que desperdiça memória e largura de banda), usar **FastImage** para melhor desempenho de imagens remotas e **cache** (para que imagens não sejam baixadas novamente e listas rolem suavemente — uma melhoria significativa sobre a Image padrão para listas com muitas imagens), usar formatos eficientes (WebP) e lazy-loading com placeholders. Essas otimizações importam porque apps com muitas imagens (comuns — feeds, galerias, perfis) podem sofrer problemas reais de desempenho se as imagens não forem tratadas bem. Como a maioria dos apps exibe imagens e tratá-las bem (carregamento correto e dimensões, variantes de resolução e, especialmente, otimização de desempenho com cache e dimensionamento apropriado) afeta tanto a UX (imagens nítidas e carregadas suavemente) quanto o desempenho (evitando problemas de memória e jank), entender imagens e assets no React Native é um conhecimento valioso e praticamente relevante — importante para a necessidade comum de exibir imagens, onde entender carregamento, resolução e, especialmente, otimização de desempenho (cache, dimensionamento) é a chave para construir apps ricos em imagens, suaves e polidos.

Carregando imagens

Resolução e resizeMode

Desempenho: otimize imagens

Por que isso importa

Perguntas relacionadas