Melhores Práticas de Mídia
Um resumo condensado das 25 melhores práticas mais importantes extraídas de todas as páginas desta seção.
//
Busque em todas as páginas da documentação
Um resumo condensado das 25 melhores práticas mais importantes extraídas de todas as páginas desta seção.
Classifique o trabalho primeiro: Captura, exibição, reprodução e edição usam módulos diferentes - não use um pacote padrão para cada tela.
Instale com npx expo install: Fixe expo-image, expo-camera e expo-video na SDK 57 – binários nativos testados – evite npm install @latest em pacotes de mídia nativos.
Use expo-image para URLs remotas: Cache de disco e memória, placeholders BlurHash e transições superam o Image bruto do React Native em feeds.
Comprima antes de fazer o upload: Execute expo-image-manipulator (largura máxima 1280–1920, JPEG ~0.75) antes da pré-visualização e do upload multipart – armazene URIs, não base64, no estado.
Preencha o cache de disco após a captura: Image.writeToCacheAsync(localUri, cacheKey) emparelha com a mesma cacheKey em source para miniaturas de lista instantâneas após a saída do seletor ou da câmera.
Defina recyclingKey em listas virtualizadas: Linhas FlashList e FlatList devem redefinir células de imagem quando os IDs mudam – evita o flash de avatar de visualizações recicladas.
Pré-carregue as URLs da próxima tela: Image.prefetch(urls, { cachePolicy: "memory-disk" }) durante o tempo ocioso após o carregamento da página um – limite a concorrência.
Solicite permissão de câmera no contexto: Explique por que a captura é necessária e, em seguida, chame requestPermission – prompts de permissão de início frio aumentam as negações.
Ofereça fallback de biblioteca: Emparelhe expo-camera com expo-image-picker para que os caminhos de negação ainda anexem fotos – veja expo-camera & expo-image-picker.
Apenas uma CameraView ativa: Desmonte ou controle com useIsFocused quando abas ou modais ocultarem a pré-visualização – duas sessões causam pré-visualização preta ou travamentos.
Debounce em scans de código de barras: onBarcodeScanned dispara continuamente – use debounce de 1–2 segundos e desative o manipulador após o sucesso antes de navegar.
Espere por onCameraReady: takePictureAsync antes de estar pronto lança erros ou retorna quadros em branco no Android – controle o botão do obturador.
Desligue a lanterna ao desmontar: enableTorch consome bateria e cega câmeras de armazém deixadas ativas em abas em segundo plano.
Pause a pré-visualização da câmera sob folhas: pausePreview() enquanto sobreposições cobrem o visor – o custo da GPU da pré-visualização é contínuo.
Adote expo-video para nova reprodução: useVideoPlayer + VideoView com descarte automático – aposente expo-av em telas tocadas.
Assine eventos do player: player.playing não re-renderiza o React – use useEvent ou useEventListener do expo para controles e UI de status.
Pause o vídeo ao perder o foco da navegação: O cleanup de useFocusEffect chamando player.pause() evita vazamento de áudio e reclamações de revisão em segundo plano.
Silencie a reprodução automática de feeds por padrão: Clipes de grade devem definir player.muted = true até que o usuário desative explicitamente o som – áudio inesperado é um tema principal de rejeição.
Configure áudio em segundo plano e PiP no momento da compilação: O plugin de configuração supportsBackgroundPlayback e supportsPictureInPicture do expo-video requer reconstrução – as props em tempo de execução sozinhas são insuficientes.
Pré-carregue fontes de vídeo adjacentes: O segundo useVideoPlayer(nextUri) preenche buffers antes de replaceAsync – um VideoView por player no Android.
Limite a complexidade do caminho Skia: Memoize a construção de Skia.Path; reduza a amostragem de séries de gráficos – o desenho da GPU ainda custa tempo de preparação do JS.
Use Skia para gráficos, não para miniaturas de lista: expo-image gerencia o cache raster; Skia se destaca em medidores circulares, sparklines e sobreposições compostas.
Agrupe marcadores de mapa: Não monte milhares de nós <Marker> – use supercluster ou agregação de servidor com tracksViewChanges={false} em pinos personalizados estabilizados.
Nunca incorpore MapView em cada linha da lista: Abra uma rota de mapa em tela cheia ou mostre instantâneos estáticos – mapas incorporados sufocam a rolagem e a GPU.
Profile em Android de gama média: Câmeras de iPhone Pro e simuladores escondem travamentos de pré-visualização, paradas de decodificador e OOM – execute a lista de verificação de mídia em um Pixel série A antes do lançamento.
expo-image-manipulator antes de qualquer pipeline expo-image ou de upload.expo-image, expo-camera e expo-video básico.react-native-maps, Skia, PiP e verificação de áudio em segundo plano.cachePolicy="none" ou rotacione cacheKey quando a assinatura expirar – entradas de disco obsoletas causam loops 403.await Image.clearMemoryCache();
await Image.clearDiskCache();Execute a partir das configurações ou do teardown da sessão – não em cada foco de tela.
writeToCacheAsyncVersões da Stack: Esta página foi escrita para React 19.2.3, React Native 0.86.0 e Expo SDK 57 (
expo~57.0.4).
Revisado por Chris St. John·Última atualização: 16 de jul. de 2026