Saltar al contenido principal
Mobile Guías

Guía completa de Expo Image Picker para 2026

Maestra la selección de imágenes de Expo en tu aplicación de React Native. Esta guía completa cubre la instalación, los permisos, el acceso a la cámara y la galería, la recorte, la base64 y el subir.

Martín Donadieu

Martín Donadieu

Gerente de contenido

Guía completa de Expo Image Picker para 2026

Probablemente estás en el punto en el que la interfaz de usuario está lista, la pantalla de perfil tiene un botón 'Subir foto' y ahora la parte fácil de repente no es fácil. La selección real de imágenes toca permisos nativos, interfaces controladas por el sistema, diferentes formas de retorno que muchos desarrolladores no esperan y un puñado de detalles de tiempo de compilación que solo se muestran después de que envíes un verdadero build.

Es ahí donde se ajusta Expo Image Picker. Es la biblioteca oficial de Expo para abrir la interfaz de sistema para elegir imágenes y videos de la biblioteca del dispositivo o tomar una foto con la cámara, como se describe en el Repositorio de paquetes de Expo. En la práctica, eso significa que obtienes una conexión confiable a la entrada de medios nativos, pero no una experiencia de medios personalizada que se comporte de manera idéntica en todos los dispositivos.

Esta guía está escrita para la primera implementación, no para la demostración. Se centra en las decisiones que importan en producción: configuración de flujo de trabajo gestionado versus no gestionado, manejo de permisos que no te sorprenderán más tarde, análisis de resultados seguro y un patrón de carga práctico después de que el usuario elija un archivo. Si estás trabajando en un conjunto de configuración nativa personalizada, también ayuda a entender cómo esto difiere de un flujo de trabajo de cliente de desarrollo de Expo. Expo development client workflow.

Contenido de la Tabla

Comenzando con Expo Image Picker

Un gerente de producto solicita fotos de perfil. Una semana después, la misma característica también necesita subir recibos, capturar la cámara para informes de incidentes y reintentar cuando los usuarios deniegan la autorización la primera vez. La entrada de imágenes se expande rápidamente porque toca permisos nativos, UI propiedad del sistema, manejo de archivos temporales y flujos de carga de backend.

expo-image-picker es el módulo de Expo SDK para ese trabajo. Abre el selector de plataforma o la interfaz de cámara y devuelve la media seleccionada en una forma que tu React Native code puede manejar. El JavaScript API es pequeño. El principal desafío está en obtener la configuración nativa, el flujo de permisos y el manejo de resultados correctos en proyectos administrados y desnudos.

El principal equilibrio es claro. Dejas que iOS y Android presenten sus propias interfaces de medios en lugar de construir un selector personalizado. Eso suele dar un resultado mejor: los usuarios ya entienden las pantallas del sistema, las solicitudes de permiso se comportan de la manera que el sistema espera y tu equipo evita mantener una implementación de galería en JavaScript.

Trátalo como una característica de integración nativa con una interfaz de React.

Este enfoque ayuda porque los modos de falla rara vez están en el botón que llama al selector. Normalmente vienen de uno de tres lugares:

  • Configuración nativa: setup de plugin faltante, cadenas de permiso incorrectas o una compilación estancada después de cambiar la configuración
  • Comportamiento en tiempo de ejecución: los usuarios pueden denegar el acceso, conceder acceso a la biblioteca limitado en iOS o cancelar el flujo sin seleccionar nada
  • Análisis de resultados: el actual API devuelve un assets array, por lo tanto, ejemplos más antiguos que leen result.uri fallan directamente

El cambio de elección de flujo también cambia el camino de configuración. En una aplicación Expo administrada, la mayoría del trabajo nativo vive en la configuración de la aplicación y requiere una reconstrucción cuando esa configuración cambia. En una aplicación bare, todavía obtiene el módulo Expo API, pero necesita verificar los ajustes de proyecto iOS y Android subyacentes de manera más directa. Si su equipo está utilizando un cliente personalizado en lugar de Expo Go, esta guía se complementa bien con Capgo’s explicación de ¿cómo un cliente de desarrollo Expo cambia la prueba de módulos nativos.

Esos dos flujos importan para el resto de la guía porque el camino feliz solo es la mitad de la historia. Una implementación de selector es sólida cuando funciona en ambos flujos, maneja las particularidades de permisos de plataforma sin sorprender al usuario y pasa un archivo usable a su capa de carga en lugar de detenerse en una vista previa local.

Instalación y Configuración Esencial

La instalación requiere un solo comando. Obtener la configuración nativa correcta es lo que determina si el selector funciona en un dispositivo real, en un cliente de desarrollo personalizado y en su versión de producción.

expo-image-picker proporciona a React una interfaz API sobre los seleccionadores de plataforma para fotos, videos y captura de cámara. La llamada de JavaScript es simple. La configuración no lo es, porque el acceso a fotos y el acceso a la cámara están controlados por iOS y Android, no por React Native.

Un desarrollador trabajando en la implementación de selector de imágenes de Expo al teclear code en la pantalla de una computadora portátil.

Comience con el instalador de versión consciente de Expo:

npx expo install expo-image-picker

En lugar de expo install en lugar de npm install o yarn add. Expo matches the package version to your SDK, which avoids a common class of native compatibility problems. If you are comparing how Expo modules fit into your release process, this o o

Resumen de herramientas de Expo

Configuración de flujo administrado

En el flujo administrado, declara el plugin en la configuración de la aplicación para que Expo pueda aplicar los cambios nativos en tiempo de compilación. app.json:

{
  "expo": {
    "plugins": ["expo-image-picker"]
  }
}

Ejemplo con

Es el mínimo configuración. En la práctica, los equipos suelen agregar texto de permiso además, especialmente en iOS donde la solicitud de sistema debe explicar por qué la aplicación necesita acceso. Mantenga el texto específico para la acción del usuario. 'Subir una foto de perfil' es mejor que 'Necesita acceso a medios'. pluginsUn detalle operativo causa mucho tiempo desperdiciado. Cambiar

permisos de cadena, o la configuración nativa requiere una compilación. Recargar JavaScript no aplica esos cambios. En Expo Go, también está limitado por lo que el cliente ya incluye. En una compilación de desarrollo o producción, el proyecto nativo refleja su configuración solo después de una nueva compilación.

In a bare app, the package API is the same, but you need to verify more of the native project yourself. iOS usage descriptions are the first thing to check. If your flow can open the library, launch the camera, or record video with audio, your app needs the corresponding permission strings in Info.plist antes de reconstruir.

Una lista de verificación práctica para proyectos sin proyecto se parece a esto:

  1. Instalar expo-image-picker con npx expo install expo-image-picker.
  2. Agregue la configuración del plugin si su proyecto utiliza plugins de configuración de Expo.
  3. Confirme que las descripciones de uso de iOS coinciden con las características que expone.
  4. Reconstruya las aplicaciones de iOS y Android después de cualquier cambio en la configuración nativa.

El texto de permiso faltante a menudo se ve como un error de tiempo de ejecución porque la interfaz code está bien y el manipulador del botón se ejecuta. El error está más abajo en la pila. Normalmente reviso Info.plist, la configuración de la aplicación, y si la compilación actual incluye los cambios nativos más recientes antes de tocar el componente code.

Unos pocos hábitos hacen que la configuración sea más predecible:

  • Escriba el texto de permiso para la acción real: los usuarios deben entender por qué están viendo la solicitud.
  • Configura la cámara y la biblioteca de manera separada: uno puede funcionar mientras el otro sigue fallando.
  • Reconstruye después de cambios nativos: la recarga caliente y la actualización rápida no actualizan los permisos nativos.
  • Prueba en dispositivo: el comportamiento del simulador puede ocultar problemas de permisos y cámara.

Si el selector de imágenes funciona durante el desarrollo pero se rompe en TestFlight o la versión de la Tienda de Juegos, considera que es un problema de configuración. La mayoría de las veces, lo es.

Acceder a la Cámara y la Biblioteca de Medios

Un usuario hace clic en ‘Subir foto’, espera que se abra la cámara o la biblioteca, y tu aplicación tiene una sola tarea en ese momento. Abrir la interfaz de usuario del sistema adecuada, manejar la negación o la cancelación sin romper la pantalla, y devolver una referencia local de archivo usable para la vista previa o el envío.

Eso parece simple hasta que pruebas tanto compilaciones administradas como compilaciones desnudas en iOS y Android. El JavaScript API se mantiene compacto, pero el comportamiento en tiempo de ejecución sigue dependiendo de las solicitudes del sistema operativo, el hardware del dispositivo y cómo configuraste los permisos nativos anteriormente.

Diagrama de flujo que ilustra el proceso del selector de imágenes de la aplicación móvil para elegir entre fuentes de cámara o biblioteca de medios.

Un componente mínimo pero seguro

El flujo principal es consistente en proyectos de flujo de Expo administrado y de flujo bare. result.assets.

Un componente de referencia se ve así:

import { useState } from 'react';
import { View, Button, Image, Alert } from 'react-native';
import * as ImagePicker from 'expo-image-picker';

export default function PhotoInput() {
  const [imageUri, setImageUri] = useState<string | null>(null);

  const pickFromLibrary = async () => {
    const permission = await ImagePicker.requestMediaLibraryPermissionsAsync();

    if (!permission.granted) {
      Alert.alert('Permission required', 'Please allow photo library access.');
      return;
    }

    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ['images'],
      allowsEditing: true,
      quality: 1,
    });

    if (result.canceled) return;

    const asset = result.assets?.[0];
    if (!asset?.uri) return;

    setImageUri(asset.uri);
  };

  const takePhoto = async () => {
    const permission = await ImagePicker.requestCameraPermissionsAsync();

    if (!permission.granted) {
      Alert.alert('Permission required', 'Please allow camera access.');
      return;
    }

    const result = await ImagePicker.launchCameraAsync({
      allowsEditing: true,
      quality: 1,
    });

    if (result.canceled) return;

    const asset = result.assets?.[0];
    if (!asset?.uri) return;

    setImageUri(asset.uri);
  };

  return (
    <View>
      <Button title="Choose from library" onPress={pickFromLibrary} />
      <Button title="Take photo" onPress={takePhoto} />
      {imageUri ? (
        <Image
          source={{ uri: imageUri }}
          style={{ width: 200, height: 200 }}
        />
      ) : null}
    </View>
  );
}

Tres detalles son importantes aquí.

  • Solicite permisos de biblioteca y cámara por separado. No funcionan de manera independiente.
  • Trate la cancelación como una acción normal del usuario, no como un estado de error.
  • Leer desde assets[0]ya que el selector devuelve un array de activos en lugar de un activo de nivel superior. uri.

Flujos de biblioteca y cámara

Comience con el flujo de biblioteca si desea el camino más rápido a una característica que funciona. Es más fácil de probar, funciona en más configuraciones de simulador y evita casos de hardware de cámara. Agregue el soporte de cámara una vez que el camino de manejo de resultados esté establecido.

El camino de la cámara tiene más formas de fallar en desarrollo. El soporte de simulador de iOS es limitado. Los emuladores de Android pueden no exponer el comportamiento de la cámara que coincide con un dispositivo real. En proyectos bare, esas brechas pueden enviar a buscar el componente code aunque el problema real es la configuración nativa o el entorno de prueba.

Un patrón de interfaz de usuario limpio es preguntar al usuario por la fuente antes de llamar al selector API:

const showPickerOptions = () => {
  Alert.alert('Upload image', 'Choose a source', [
    { text: 'Camera', onPress: takePhoto },
    { text: 'Photo Library', onPress: pickFromLibrary },
    { text: 'Cancel', style: 'cancel' },
  ]);
};

Esa separación mantiene cada función enfocada. También lo hace más fácil agregar análiticas, banderas de características o reglas específicas del servidor más tarde. Por ejemplo, algunos equipos permiten subir archivos de biblioteca para imágenes de perfil pero requieren capturas de cámara frescas para la verificación de identidad.

If su aplicación más amplia también admite patrones de acceso a archivos fuera de Expo o estás comparando convenciones entre pilas nativas, esto Capacitor referencia de la biblioteca de fotos es un contexto útil.

Una demostración breve ayuda cuando estás mostrando este flujo a tus compañeros de equipo o QA:

¿Qué esperar del UI del sistema?

expo-image-picker abre el selector de plataforma o la UI de la cámara. Tu aplicación no controla cada pantalla en ese flujo. Esa distinción importa porque 'funciona en mi dispositivo' a menudo significa 'el sistema operativo permitió el camino que probé'.

En iOS, los usuarios pueden otorgar acceso limitado a la biblioteca en lugar de acceso completo. En Android, el comportamiento del selector puede variar según la versión del sistema operativo y la piel del fabricante. En proyectos de flujo administrado, Expo maneja más de la configuración nativa para ti. En proyectos de flujo desnudo, debes confirmar que tu aplicación compilada incluye los cambios de permiso nativos que hiciste. El sitio de llamada de JavaScript puede ser idéntico en ambos casos mientras que el resultado en tiempo de ejecución difiere.

Normalmente pruebo estos casos antes de llamar al feature hecho:

  • primera solicitud de permiso
  • permiso denegado
  • cancelación del usuario
  • selección de biblioteca exitosa
  • captura de cámara exitosa en un dispositivo físico
  • preview inmediato de la URI local devuelta

Esos casos se traducen directamente a comportamientos de producción reales. También establecen el siguiente paso limpiamente si necesita enviar el archivo a un servidor, una pila de moderación o un punto final de publicación como el publicación de medios de Instagram API.

Manipulación de resultados y opciones del selector

El resultado del selector es la parte que normalmente requiere lógica de producción real. La interfaz de usuario del sistema devuelve un objeto estructurado, no solo una ruta de archivo, y pequeños errores aquí llevan a vistas rotas, subidas vacías o crash después de que un usuario cancela.

Leer el objeto de resultado correctamente

La forma del resultado que importa en las aplicaciones de Expo actuales es result.assets[0].urino un nivel superior result.uri. Esa detalle afecta tanto proyectos de flujo de trabajo administrado como proyectos de flujo de trabajo desnudo porque el JavaScript API es el mismo aunque la configuración nativa difiere debajo.

Usar un patrón de guardia primero:

const result = await ImagePicker.launchImageLibraryAsync({
  mediaTypes: ['images'],
  allowsEditing: true,
  quality: 1,
});

if (result.canceled) {
  return;
}

const asset = result.assets?.[0];
if (!asset) {
  return;
}

const { uri } = asset;
setImageUri(uri);

Esto maneja los dos casos de falla que veo con más frecuencia. Un selector cancelado no le da un activo para leer, y code que asume result.assets[0] siempre existe, pero fallará en tiempo de ejecución.

Una vez que tengas la URI, mostrar una vista previa es sencillo:

<Image source={{ uri: imageUri }} style={{ width: 240, height: 240 }} />

Si planeas subir más tarde, mantén toda la asset objeto alrededor, no solo la URI. En la práctica fileName, mimeType, width, height, y fileSize son comunes para la validación, el registro o la creación de una solicitud multipart más limpia.

Opciones que cambian el comportamiento downstream

Un par de opciones del selector afectan más que la pantalla de selección. Modelan el tamaño del archivo, el comportamiento de edición y qué debe aceptar su backend.

Opción Tipo Qué cambia Uso típico
mediaTypes array Restringe qué puede elegir el usuario Limita la selección a imágenes si su API solo acepta imágenes
allowsEditing boolean Permite que el sistema ofrecer UI de recorte o edición donde sea posible Avatar, cubiertas cuadradas, captura de recibos
quality number Comprime los resultados de imágenes admitidos Reduce el tamaño de carga para redes móviles
base64 boolean Agrega datos de imagen codificados al resultado Solo para integraciones que requieren explícitamente datos de imagen inline

A algunos usuarios les resulta fácil pasar por alto algunos compromisos:

  • allowsEditing es útil cuando el slot de imagen tiene una forma o tamaño fijo. Es menos útil si tu servidor realiza su propio pipeline de recorte y deseas el archivo original.
  • quality afecta el tiempo de carga, la presión de memoria y el almacenamiento del servidor. quality: 1 no es automáticamente la elección correcta.
  • mediaTypes debe coincidir con las reglas del servidor. Si el servidor rechaza los videos, no permitas que el selector devuelva ellos.
  • base64 aumenta el tamaño del paquete en memoria. Evítalo a menos que el servicio receptor lo requiera.

El último punto es importante en dispositivos con memoria baja. Una URI de archivo local suele ser la mejor entrega para la vista previa y el multipart upload. Base64 tiene usos válidos, pero es costoso en comparación con pasar una referencia de archivo.

URI versus base64

Para la mayoría de las aplicaciones, la regla es simple:

  • Usa URI para vistas previas.
  • Utilice URI para subir archivos.
  • Utilice base64 solamente cuando el sistema receptor solicita explícitamente contenido codificado.

Este patrón mantiene al selector code pequeño y más fácil de probar. También se alinea con cómo se construyen muchas flujos de medios de backend, incluidos servicios que eventualmente publican en plataformas externas como el selector de publicación de medios de Instagram API.

Si su equipo envía actualizaciones OTA frecuentes o mueve activos de imagen a través de la entrega de aplicaciones, las decisiones de tamaño de archivo aquí tienen un impacto en el resto de la canalización. Esta guía sobre optimización de imágenes para actualizaciones de aplicaciones es un compañero útil para la configuración del selector.

Un patrón de resultado más seguro para aplicaciones reales

Para demo code, almacenar solo imageUri es suficiente. En producción, almacene un objeto normalizado para que el siguiente paso, vista previa, validación, subida o reintentos, no necesite reinterpretar la respuesta del selector bruto cada vez.

const result = await ImagePicker.launchImageLibraryAsync({
  mediaTypes: ['images'],
  allowsEditing: true,
  quality: 0.8,
});

if (result.canceled || !result.assets?.length) {
  return;
}

const asset = result.assets[0];

setSelectedImage({
  uri: asset.uri,
  fileName: asset.fileName ?? 'upload.jpg',
  mimeType: asset.mimeType ?? 'image/jpeg',
  width: asset.width,
  height: asset.height,
  fileSize: asset.fileSize ?? null,
});

Esto le da una forma predecible dentro de la aplicación. También hace que los proyectos administrados y bare sean más fáciles de mantener alineados porque la aplicación code permanece estable mientras trabaja a través de las diferencias nativas en otro lugar.

Una última comprobación ayuda. No habilite campos de resultados adicionales solo por si acaso. Solicite los datos que sabe que necesita, y mantenga al selector enfocado en la selección en lugar de convertirlo en un paso general de procesamiento de archivos.

Patrones avanzados y diferencias de plataforma

Un característica de selector suele dejar de ser simple en el momento en que la primera imagen seleccionada tiene que sobrevivir a los reintentos, encabezados de autenticación, diferencias de permisos nativos y un punto final de subida real. expo-image-picker maneja la selección bien. El resto de la característica es su aplicación.

Una infografía titulada Cargas de imágenes: Consideraciones de almacenamiento local vs. servidor, mostrando los pros y los contras del almacenamiento en servidor.

Un patrón de subida práctico

Para APIs que esperan una carga de archivo FormData es todavía el valor por defecto más seguro. Funciona en backends comunes de Rails, Node, Laravel, Django y Go, y mantiene al selector separado de las preocupaciones de transporte.

async function uploadImage(imageUri: string) {
  const formData = new FormData();

  formData.append('file', {
    uri: imageUri,
    name: 'upload.jpg',
    type: 'image/jpeg',
  } as any);

  const response = await fetch('https://your-api.example.com/uploads', {
    method: 'POST',
    body: formData,
    headers: {
      Accept: 'application/json',
    },
  });

  if (!response.ok) {
    throw new Error('Upload failed');
  }

  return response.json();
}

That code is enough to prove the path works, but production apps usually need one more layer. Derive name y type y desde el activo seleccionado cuando sea posible, adjunta la autenticación fuera de la función del selector y mantiene el estado de carga separado del estado del selector para que una solicitud fallida no obligue al usuario a abrir de nuevo la biblioteca.

Un par de comprobaciones previenen las fallas comunes que veo en la revisión:

  • Confirmar la existencia local uri existe antes de construir la solicitud
  • Vuelve a renderizar una vista previa antes de la carga para que los usuarios detecten el archivo incorrecto temprano
  • Evita pulsaciones repetidas mientras la solicitud está en vuelo
  • Gestiona fallas de red por separado de la cancelación del selector o errores de permiso
  • Espera que la validación del servidor rechace archivos grandes, tipos MIME no admitidos o autenticación faltante

Si tu servidor requiere base64 en lugar de multipart, eso es usualmente una restricción del servidor, no una exigencia del selector. Multipart es más barato en memoria y más fácil de razonar sobre en móviles.

Donde las diferencias de plataforma realmente importan

La interfaz del selector es nativa, por lo que hereda el comportamiento nativo. Eso afecta tanto lo que los usuarios ven como lo que tu code debe asumir.

On iOS, los flujos de edición y las solicitudes de permiso siguen las convenciones de Apple. El acceso limitado a Fotos puede devolver un conjunto más estrecho de activos que lo que vio su cuenta de prueba en un dispositivo con acceso completo. En Android, el comportamiento del selector varía más según la versión del sistema operativo y la piel del fabricante, especialmente alrededor de álbumes, nombres de archivo y cómo se devuelven las capturas de la cámara. Las aplicaciones de React Native básicas sienten estas diferencias de manera más directa porque se tiene más control sobre la configuración nativa, pero las aplicaciones de Expo administradas todavía necesitan code que trate al selector como una forma de plataforma en lugar de perfectamente uniforme.

La regla práctica es simple. Confíe en los campos que puede validar, no en la interfaz de usuario o la metadata idéntica entre dispositivos.

Unos pocos ejemplos importan en aplicaciones reales:

  • Edición y recorte: La interfaz de usuario y el comportamiento de recorte no son idénticos entre iOS y Android
  • Metadata devuelta: fileName, mimeType, y fileSize pueden estar ausentes o inconsistentes, por lo que agregue fallbacks
  • Permisos: El acceso a Fotos de iOS puede estar limitado a elementos seleccionados, mientras que el comportamiento de Android depende más de la versión del sistema operativo y el soporte del selector del sistema
  • Salida de cámara: Las imágenes capturadas pueden regresar con diferentes nombres, orientación o características de compresión que los activos de la biblioteca

If su equipo también trabaja fuera de Expo, esto Guía de desarrollo de aplicaciones de DesignStack proporciona contexto de Android útil para decisiones de manejo de medios que se muestran más allá de una biblioteca única.

Diferencias entre flujo de trabajo administrado y desnudo

Hasta este punto, las opciones de configuración comienzan a importar en términos de operaciones.

En el flujo de trabajo administrado, las cadenas de permiso y la configuración del plugin suelen vivir en la configuración de la aplicación, y los cambios nativos se aplican cuando creas una nueva compilación. Esto mantiene la superficie de JavaScript limpia, pero también significa que una corrección de configuración no es visible hasta la próxima compilación nativa. Las actualizaciones OTA no parchean permisos nativos faltantes.

En el flujo de trabajo desnudo, la misma característica tiene más partes en movimiento. Necesitas verificar las descripciones de uso de iOS nativas, el comportamiento del manifiesto de Android, la instalación de paquetes y el tiempo de compilación por tu cuenta. El beneficio es el control. El costo es que un problema de selector puede estar causado por la configuración nativa, no por el sitio de llamada de JavaScript.

Los equipos que cambian entre Expo y Capacitor a menudo subestiman cuán diferentes son estas capas de abstracción. Capgo tiene una explicación útil de cómo Capacitor maneja las diferencias de plataformay es un punto de comparación bueno si estás decidido a saber cuánta configuración nativa quieres que tu equipo tenga.

Mi preferencia es consistente en ambos flujos de trabajo. Mantén el selector code estrecho, normaliza el resultado una vez, sube a través de una capa API dedicada, y trata el comportamiento específico de la plataforma como algo que configurar y probar explícitamente en lugar de suavizarlo con suposiciones.

Resolución de Problemas Comunes

La mayoría de los errores de Expo Image Picker se clasifican en un pequeño conjunto de categorías. La solución más rápida suele ser identificar qué capa está fallando: configuración, permisos, manejo de resultados o renderizado.

Una lista de verificación para depurar problemas comunes al utilizar la biblioteca expo-image-picker en proyectos de desarrollo móvil.

Pruebas rápidas para fallos comunes

Si el selector de imágenes no se abre o los permisos fallan, compruebe la configuración nativa primero. En aplicaciones bare especialmente, las descripciones de uso de iOS faltantes son una causa común de raíz.

Si la aplicación se cae después de que un usuario cierra el selector, inspeccione el manejo de resultados. Muchas implementaciones asumen todavía una URI directa y saltan la canceled comprobación.

Unos pocos mapeos rápidos ayudan:

  • Errores de permisos denegados: Verifique la configuración de la aplicación y las cadenas de permisos nativos, luego reconstruya.
  • undefined URI de imagen: Lea desde result.assets?.[0]?.uri, no result.uri.
  • Nada sucede después de cancelar: Eso puede ser correcto. Trata a cancelar como un estado sin operaciones.
  • La imagen no se renderiza: Confirma que la URI se almacenó en el estado y se pasó a <Image source={{ uri }} />.
  • La cámara actúa de manera extraña en el simulador: Prueba en un dispositivo físico antes de perseguir un error de biblioteca.

Un breve checklist de producción

Utiliza esto como paso final antes de enviar:

  • Instala con Expo herramientas: Utiliza npx expo install expo-image-picker.
  • Configura piezas nativas: Agrega el plugin y las descripciones de permisos requeridos.
  • Requiere permisos de manera intencional: Flujos de cámara y biblioteca de medios separados.
  • Proteja cada resultado: Verificar result.canceled y leer de manera segura assets[0].
  • Preferir subidas basadas en URI: Sólo mantenga base64 para casos especiales.
  • Pruebe dispositivos reales: Especially para captura de cámara y promps de permisos.

Si su equipo envía Capacitor o aplicaciones de Electron junto con proyectos de React Native Capgo Es una opción para entregar actualizaciones de JavaScript, CSS, configuración y recursos sin tener que esperar a la revisión de la tienda para cada cambio. Es relevante cuando se resuelven problemas relacionados con imágenes en su capa web, como la interfaz de usuario de carga, las reglas de validación, el texto o el manejo de recursos alrededor del flujo del selector de imágenes.

Actualizaciones en vivo para aplicaciones Capacitor

Cuando haya un error en la capa web, envíe la corrección a través de Capgo en lugar de esperar días para la aprobación de la tienda de aplicaciones. Los usuarios obtienen la actualización en segundo plano mientras que los cambios nativos siguen en el camino de revisión normal.

Apoyo humano de Martin

Iniciar Ahora

Últimas noticias de nuestro Blog

Capgo te da las mejores perspectivas que necesitas para crear una aplicación móvil verdaderamente profesional.