Ahora, esta aplicación React Native está construida con la ayuda de expo como ya sabes. Ahora, como mencioné al comienzo del curso,
esta sigue siendo una aplicación React Native regular, por lo tanto, expo solo como un contenedor
adicional que proporciona muchas características prácticas que hacen que la construcción de esta aplicación sea más fácil y
es como un shell,
una aplicación en la que se ejecuta nuestra aplicación que, por lo tanto, hace que aprovechar muchas de las funciones
nativas del dispositivo sea más fácil y especialmente fácil de configurar.
Ahora, como también mencioné al comienzo de este módulo, en un módulo separado le mostraré cómo puede agregar
características nativas del dispositivo a aplicaciones que no son expo,
pero en realidad, si no tiene una razón para no usar expo, lo haría le recomiendo que
lo use porque expo si revisa sus documentos, tiene muchas características integradas y muchos módulos nativos incorporados que puede usar, por lo que puede
agregar fácilmente características
nativas del dispositivo y verá una
lista completa aquí yendo a los documentos y allí a la referencia de la API.
Aquí, verá un montón de cosas que puede agregar a su aplicación y estas son en su mayoría
funcionalidades de dispositivos nativas que son provistas por expo
de fábrica, por lo que aún necesitará instalar algo pero no deberá hacer ningún manual
configuración y, como verá en la creación de una aplicación sin módulo de exposición, es posible que deba realizar alguna configuración
si está agregando módulos nativos, paquetes de funciones de dispositivos nativos a una aplicación que no sea expo, por
lo que es realmente genial aquí.
Ahora quiero usar una cámara y, de hecho, hay un paquete de cámara que puede agregar.
De hecho, podríamos usar eso para acceder a la cámara del
dispositivo, esto
es perfecto si necesita crear una aplicación que realmente necesite hacer mucho con la cámara, si está
construyendo como Instagram, como una aplicación donde realmente desea controlar toda la pantalla de la cámara y
todo el flujo de la cámara, en realidad no es lo que quiero hacer aquí.
Quiero usar la cámara del dispositivo normal,
no necesito nada especial
allí, solo me importa obtener una imagen que el usuario pueda
tomar y para eso obtenemos el selector de imágenes. Esto también nos permite usar la cámara del dispositivo,
pero no nos permite personalizar tanto la cámara, pero
eso es exactamente lo que necesito aquí.
Ahora todo lo que tenemos que hacer para acceder es ejecutar este comando de instalación de expo, que por cierto es
como npm install, solo para asegurarse de que instala una versión del paquete que garantiza que funcione con
nuestra versión específica de expo que estamos usando en esta aplicación. Así que simplemente copiaré este comando y luego
en este proyecto, podemos ejecutar expo install expo image picker. Haga clic en Intro y esto ahora instalará este paquete con
npm install detrás de escena, esto es lo que hace aquí, solo
en una versión que se ajusta a nuestro SDK de exposición donde estamos usando en este proyecto y
ahora lo instalará y eso es todo,
No se necesita configuración adicional.
No necesitamos tocar ningún archivo de configuración,
no necesitamos hacer nada más,
esto asegura que podamos usar esta funcionalidad y, por supuesto,
eso es muy fácil.
Con eso podemos comenzar a usarlo y quiero comenzar a usarlo aquí en la nueva pantalla de lugar
donde tenemos entrada de texto,
allí también quiero agregar ahora un botón que el usuario puede presionar para abrir la cámara.
Ahora, por supuesto, para todas estas funciones nativas del dispositivo y también para las muchas funciones que, por
supuesto, no podemos cubrir en este curso, siempre aprendió cómo puede usarlas aquí en sus documentos de
exposición oficiales, allí aprendió a qué métodos y propiedades puede acceder allí, encontrará algunos ejemplos breves para muchos paquetes, por
lo que definitivamente es algo que debe consultar. Para la cámara, por supuesto, también
puedes seguirnos porque la usaremos juntos aquí para tomar una foto.
De hecho, crearé un nuevo componente, ImageSelector. js, puedes nombrarlo como quieras en el
que importo React from React y donde importo una vista y un botón y también un texto de React Native y también la
hoja de estilo, por supuesto, porque quiero diseñar mi selector de imágenes.
Vamos a llamarlo realmente selector de imágenes, me gusta, mi componente selector de imágenes.
Entonces, aquí, el selector de imágenes es un componente normal, por supuesto, donde quiero configurar
algunos estilos con la hoja de estilo. crear método y donde al final exporto el componente selector de imagen.
Ahora, ¿qué va a pasar aquí en el componente selector de imágenes? Al final, aquí devolveré una vista
que luego debería tener otra vista donde pueda mostrar una vista previa de la imagen.
Entonces, allí, quiero tener el componente de texto donde digo que aún no se ha seleccionado ninguna imagen, que es mi
contenido alternativo si aún no se seleccionó ninguna imagen,
de lo contrario, mostraré una imagen,
por lo que también tendremos que importar el componente de imagen desde Reaccione Native y debajo de esa
vista, agregaré un botón con un título de tomar imagen donde quiero establecer el color en Colores. primaria, así que para eso, asegúrese
de importar los colores de manera constante y, al presionar, quiero
abrir la cámara y mostrarla al usuario. Así que también agregaré una constante aquí, tomar el controlador de imagen y esa es una
función que debería abrir la
cámara y esa es la función que vincularé a este botón.
Ahora un poco de estilo estaría bien. En esa vista externa, agregaré un estilo de selector de imágenes, en esta
vista interna que muestra una vista previa
de mi imagen, agregaré un estilo de vista previa de la imagen. Entonces, este texto aquí también podría tener un estilo, pero en realidad no necesito
ningún estilo especial allí y, por supuesto, también quiero generar una imagen aquí y pronto agregaré una condición if / else para mostrar solo
el texto o la imagen
y esto También debería tener algún estilo de imagen tal vez.
Entonces, ahora tenemos tres identificadores de estilo que necesitamos agregar a la hoja
de estilo, obtenemos el selector de imagen para el componente
general, obtenemos la vista previa de la imagen y luego obtenemos la imagen en sí.
La imagen en sí es simple, solo quiero establecer un ancho del 100% y una altura del 100% para que
tome el ancho y la altura completos del contenedor de vista previa circundante.
Ese contenedor, por supuesto, se puede configurar como quiera configurarlo, le daré
un ancho del 100% y una altura de 200 píxeles pero, por supuesto, puede
cambiarlo o calcularlo dinámicamente con las dimensiones API. Agregue un margen al final de 10
y asegúrese de que mi texto de marcador de posición en realidad esté centrado agregando el centro de
contenido de justificación y alinee el centro de elementos aquí
y además de eso, también agregaré un borde aquí con color de borde de color gris claro y ancho de borde
de uno.
Ahora, para el componente selector de imágenes en general, solo configuraré esto para alinear el centro de elementos
para asegurarme de que todos los elementos estén centrados horizontalmente, pero
ahora estamos todos aquí para abrir realmente la cámara del dispositivo, ¿verdad?
Entonces, antes de hacer cualquier otra cosa aquí con respecto a la vista previa, etc.,
asegurémonos de que aquí en el controlador de toma de imágenes, realmente abrimos la cámara y para eso, importamos todo como selector de imagen desde el selector de imagen de exposición, así que
a partir de esto paquete que acaba de instalar. Ahora, ya que utilicé el selector de imágenes aquí y
también para el componente, tendremos un choque de nombres, así que nombraré este selector de imágenes
aquí solo para evitar este choque de nombres que de lo contrario causaría problemas, también
cámbielo aquí en la exportación de curso.
Así que ahora con el selector de imágenes importado aquí, podemos usarlo aquí,
selector de imágenes
y allí podemos llamar a la cámara de inicio asíncrona.
También puede abrir la galería si
lo desea, pero aquí, llamaré a la cámara de lanzamiento asíncrona.
Ahora esto abrirá la cámara del dispositivo y la parte asíncrona aquí implica que esta es una
operación asíncrona.
De hecho, esto devuelve una promesa, lo cual tiene sentido porque abre la cámara y no sabemos cuándo
el usuario terminará de tomar la
imagen, por lo que solo registrará una función que debe ejecutar una vez que el usuario haya terminado y resuelva
la promesa de ejecutar esa función una vez que suceda, una vez que el usuario haya
terminado o también, por supuesto, una vez que el usuario cancele. Podemos manejar todo eso y el resultado y así sucesivamente más
adelante, por ahora veamos si eso funciona y para eso, incluyamos el componente selector de imágenes en la nueva pantalla de lugar.
Entonces, podemos importar el selector de imágenes y aquí, por supuesto, podemos usar ese nombre porque no
estamos usando el paquete del selector de imágenes aquí, importarlo desde los componentes, desde el componente del selector de imágenes y
agregar este selector de imágenes aquí debajo de nuestra entrada de texto como un componente de cierre automático como este.
Ahora, si guardamos eso, echemos un vistazo. Aquí, ese texto, etc., no
está colocado correctamente, no tenemos que preocuparnos por eso en este momento, en vez
de eso, presione tomar imagen y lo que verá es que no pasa nada, pero luego recibo una advertencia: falta la
cámara o permiso de rollo de cámara. En Android, si lo intento, me preguntan si quiero otorgar permisos. Necesito presionar permitir aquí y con
eso, la cámara se abre. Eso es bueno, generalmente funciona, puedo usarlo,
puedo presionar
este botón y luego confirmar la imagen que tomé, pero
en iOS no funciona y ¿por qué es así? Bueno, en iOS, tenemos un error de permiso aquí y
eso simplemente
sucede porque los permisos son importantes pero funcionan de manera diferente en iOS y Android.
En
Android, también configurará los permisos por adelantado y, dado que estamos utilizando esta aplicación expo donde expo proporciona
este contenedor, expo realmente configura y solicita todos estos permisos. Para iOS, el sistema de permisos funciona
un poco diferente.
Realmente no lo configura de modo que tenga un archivo de configuración donde defina todos los permisos por adelantado y
eso
es todo, en su lugar, debe solicitar permiso en tiempo de ejecución.
Nota al margen, por cierto, en algunas versiones de Android, ahora también debería hacerlo.
Aún así, la exposición, como ve, lo hace por usted, por lo que para Android funciona de esa manera, en iOS
no lo hace, debe pedirle al usuario un permiso para acceder a la cámara y eso es simplemente algo que debemos
hacer aquí y podemos hacerlo con la ayuda de otro paquete de
exposición y ese es el paquete de permisos.
También debe instalarlo con este comando aquí en su proyecto para que pueda solicitar
permisos al usuario.
Así que hagamos esto aquí en
el proyecto, ejecutemos expo install expo permissions, que nuevamente es solo este contenedor alrededor de npm install para instalar los permisos para
este proyecto o para instalar este paquete para este proyecto y luego en el selector de imágenes antes de intentar
iniciar el cámara y abriendo la cámara, tendremos que pedir permisos. Para eso, en realidad agregaré una
nueva constante aquí, obtener o verificar permisos y esta es una función, que tiene
una función que utilizará este paquete de permisos recién agregado.
Así que aquí importo todo como permisos de permisos de exposición, por lo que
el mismo tipo de importación que tenemos para el
selector de imágenes y luego allí, podemos usar permisos y preguntar de forma asincrónica.
Nuevamente, esa es una tarea asincrónica que devuelve una promesa porque abrirá un mensaje y antes de que el
usuario haya elegido una respuesta, no sucederá nada,
por lo tanto, tenemos una promesa que se resuelve o se rechaza una vez que el usuario confirmó o rechazó.
Entonces, aquí debemos ser más específicos sobre qué permiso necesitamos,
así que pasamos algo para pedir asíncrono y esa es una constante que obtenemos del objeto de permisos que estamos importando aquí.
Entonces, con la notación de puntos aquí, podemos acceder a diferentes tipos de permisos y aquí todos estos
nombres en mayúscula son los diferentes permisos que
puede solicitar y aquí necesitamos el permiso de la cámara porque queremos acceder a la cámara.
Si quisieras acceder a la galería, ese sería el permiso para rodar la cámara por cierto.
Ahora iré por la cámara aquí
y, como dije, esto devuelve una promesa, quiero usar async aguardar
aquí, por lo tanto, puedo agregar async aquí delante de la función y luego esperar esto y
obtener el
resultado y almacenarlo en una constante , la alternativa a eso sería usar entonces
y detectar esto y ahora podemos verificar si el resultado. el estado no es igual a otorgado, lo que significa que
el usuario rechazó, el usuario no
otorgó permisos, en ese caso no podemos continuar.
Entonces aquí, en realidad, lanzaré una alerta, así que
importe la alerta de React Native y lance donde diga alerta. alerta, permisos insuficientes, debe otorgar permisos de aplicación de cámara para usar esta aplicación o cualquier salida
que desee mostrar y luego
agregaré un botón aquí donde digo OK. Ahora, el usuario deberá cambiar los permisos en la configuración
del sistema después de rechazarlos de todos modos, por lo que no podemos solicitar permisos nuevamente aquí
una vez que se rechazaron.
Entonces, aquí quiero devolver falso porque es la función de verificación de permisos y quiero devolver falso
si el usuario no nos otorgó permisos, devuelvo verdadero de lo
contrario porque ahora sabemos que tenemos permisos Por
cierto, si llamamos a esto funciona varias veces y el usuario ya otorgó
permisos en el pasado, el usuario no volverá a aparecer con este mensaje, de
la misma manera si el usuario rechazó, en ambos casos el resultado se almacena automáticamente por iOS y esta función solo devuelve
verdadero o falso dependiendo de si el usuario negó u otorgó acceso en el pasado.
Por lo tanto, verificar permisos ahora es simplemente una función a la que debemos llamar en
el controlador de toma de imagen antes de intentar usar la cámara.
Entonces, aquí también quiero usar async wait porque verificar permisos, por supuesto, es una función que
devuelve una
promesa, por lo que esperaré esto y almacenaré el resultado que almacenaré en una constante llamada tiene permiso porque esto
es verdadero o falso dependiendo de si el usuario otorgó permisos o no.
Ahora, si esto es falso, así que si no es cierto, simplemente regresaré aquí, no continuaré,
no abriré la cámara porque no se me permitirá hacerlo de todos modos, así que simplemente no podemos continuar,
esa
es la cosa.
De lo contrario, podemos continuar y ahora también deberíamos poder iniciar una cámara en iOS.
Así
que vamos a
intentarlo, guardemos eso y ahora con eso cambiado, en realidad desinstalaré expo aquí para asegurarme de que con
respecto a los permisos que otorgué allí, vuelva al estado inicial.
Probablemente no necesite hacer eso si nunca otorgó ningún permiso en su
aplicación expo, pero si jugó con permisos y paquetes nativos antes, debe desinstalar y luego reinstalar la aplicación
expo ejecutando nuevamente su aplicación en iOS presionando i en la consola de abajo para
asegurarse de que todos estos permisos se restablecen.
Entonces, si vamos a la nueva pantalla de reproducción y hacemos clic en tomar imagen, me
preguntan si quiero otorgar acceso a la cámara y aquí puedo hacer clic en Aceptar y ahora todavía recibimos ese error.
Ahora, la única razón para eso es que, aunque estamos tratando de acceder a la cámara aquí, esto en realidad y
eso es algo que sé para este paquete requiere permisos para el rollo completo de la cámara.
Así que cambiemos esto para solicitar permisos para el carrete de la cámara
aquí y con eso, regrese y haga clic en tomar imagen,
ahora estoy preguntando si quiero permitir el acceso a las fotos y ahora si hago clic en sí, la cámara no está disponible en
el simulador, que ahora es un error diferente y es bastante claro con respecto a cuál es el
problema, el simulador de iOS simplemente no tiene cámara. Así que continuaré con Android de
ahora en adelante, pero por supuesto puedes probar esto en
un iPhone real para ver que allí también funciona. Si escanea su código de barras de exposición con la aplicación de
exposición y ejecuta la aplicación allí
como la vio al comienzo del curso, puede tomar imágenes con un teléfono real y también le mostraré la aplicación terminada al
final de este módulo tanto en dispositivos iOS como Android, en dispositivos reales.
Entonces, por el momento, me centraré en Android y, por supuesto, ya pudimos abrir esto.
Nuevamente me preguntan aquí, pero ahora puedo abrir esto y tomar una imagen. Por supuesto, eso es bueno, pero tomar la imagen de esta manera
no es todo lo que
quiero hacer, también quiero poder configurar cómo lo tomo y quiero poder usarlo.