Mejores Prácticas de Medios
Un resumen condensado de las 25 mejores prácticas más importantes extraídas de cada página en esta sección.
//
Busca en todas las páginas de la documentación
Un resumen condensado de las 25 mejores prácticas más importantes extraídas de cada página en esta sección.
Clasifica el trabajo primero: Captura, visualización, reproducción y edición utilizan módulos diferentes - no uses un único paquete de forma predeterminada para todas las pantallas.
Instala con npx expo install: Fija expo-image, expo-camera y expo-video al SDK 57 - binarios nativos probados - evita npm install @latest en paquetes de medios nativos.
Usa expo-image para URLs remotas: El almacenamiento en caché de disco y memoria, placeholders de BlurHash y transiciones superan la Image de React Native pura en feeds.
Comprime antes de subir: Ejecuta expo-image-manipulator (ancho máximo 1280-1920, JPEG ~0,75) antes de previsualizar y cargar multipart - almacena URIs, no base64, en estado.
Inicializa el caché de disco después de capturar: Image.writeToCacheAsync(localUri, cacheKey) se empareja con la misma cacheKey en source para miniaturas de lista instantáneas después de la salida del selector o cámara.
Establece recyclingKey en listas virtualizadas: Las filas de FlashList y FlatList deben reiniciar las celdas de imagen cuando cambian los IDs - previene que los avatares parpadeen desde vistas recicladas.
Precarga las URLs de la siguiente pantalla: Image.prefetch(urls, { cachePolicy: "memory-disk" }) durante tiempo de inactividad después de cargar la primera página - limita la concurrencia.
Solicita permiso de cámara en contexto: Explica por qué se necesita la captura, luego llama a requestPermission - los avisos de permiso en el inicio en frío aumentan los rechazos.
Ofrece un respaldo de biblioteca: Empareja expo-camera con expo-image-picker para que los caminos denegados sigan adjuntando fotos - consulta expo-camera & expo-image-picker.
Solo una CameraView activa: Desmonta o controla con useIsFocused cuando las pestañas o modales ocultan la previsualización - dos sesiones causan previsualización negra o bloqueos.
Debounce de escaneos de códigos de barras: onBarcodeScanned se dispara continuamente - debounce de 1-2 segundos y desactiva el manejador después del éxito antes de navegar.
Espera onCameraReady: takePictureAsync antes de estar listo genera errores o devuelve fotogramas en blanco en Android - controla el botón del obturador.
Apaga el flash al desmontar: enableTorch agota la batería y ciega las cámaras del almacén dejadas habilitadas en pestañas de fondo.
Pausa la previsualización de la cámara bajo hojas: pausePreview() mientras los superpuestos cubren el visor - el costo de GPU de la previsualización es continuo.
Adopta expo-video para nueva reproducción: useVideoPlayer + VideoView con disposición automática - retira expo-av en pantallas tocadas.
Suscríbete a eventos del reproductor: player.playing no activa un re-renderizado de React - usa useEvent o useEventListener de expo para controles y UI de estado.
Pausa el vídeo al desenfocar la navegación: La limpieza de useFocusEffect llamando a player.pause() previene fugas de audio y quejas de revisión en segundo plano.
Silencia la reproducción automática del feed de forma predeterminada: Los clips de cuadrícula deben establecer player.muted = true hasta que el usuario desmute explícitamente - el audio inesperado es un tema de rechazo principal.
Configura audio de fondo y PiP en tiempo de compilación: El plugin de configuración supportsBackgroundPlayback y supportsPictureInPicture de expo-video requieren reconstrucción - las props en tiempo de ejecución no son suficientes.
Precarga fuentes de vídeo adyacentes: Un segundo useVideoPlayer(nextUri) llena búferes antes de replaceAsync - una VideoView por reproductor en Android.
Limita la complejidad de la ruta de Skia: Memoiza construcciones de Skia.Path; reduce la resolución de series de gráficos - el dibujo de GPU aún cuesta tiempo de preparación de JS.
Usa Skia para gráficos, no miniaturas de lista: expo-image posee almacenamiento en caché raster; Skia excels en medidores de anillo, sparklines y superpuestos compuestos.
Agrupa marcadores del mapa: No montes miles de nodos <Marker> - agregación de supercluster o servidor con tracksViewChanges={false} en pines personalizados establecidos.
Nunca incrustes MapView en cada fila de lista: Abre una ruta de mapa a pantalla completa o muestra snapshots estáticas - los mapas incrustados asfixian el desplazamiento y la GPU.
Perfila en Android de gama media: Las cámaras de iPhone Pro y simuladores ocultan tartamudeos de previsualización, paralizaciones del decodificador y OOM - ejecuta la lista de verificación de medios en un Pixel de serie A antes de lanzar.
expo-image-manipulator antes de cualquier pipeline de expo-image o carga.expo-image, expo-camera y expo-video básico.react-native-maps, Skia, PiP y verificación de audio de fondo.cachePolicy="none" o rota cacheKey cuando la firma expira - las entradas de disco obsoletas causan bucles 403.await Image.clearMemoryCache();
await Image.clearDiskCache();Ejecuta desde configuración o desmontaje de sesión - no en cada enfoque de pantalla.
writeToCacheAsyncVersiones de la pila: Esta página fue escrita para React 19.2.3, React Native 0.86.0 y Expo SDK 57 (
expo~57.0.4).
Revisado por Chris St. John·Última actualización: 16 jul 2026