Ahora deshabilité los enlaces aquí para no tener todas estas advertencias y errores con respecto al estilo del código.
Por supuesto, puede ajustar su código para seguir ese estilo, esa
es una preferencia personal al final.
Ahora, lo que quiero hacer aquí es mostrarle cómo, por supuesto, puede cambiar el código, pero también
cómo podemos agregar una funcionalidad nativa en una aplicación React Native tan vainilla.
Entonces, para eso, en primer lugar simplificaré mucho esta
aplicación de inicio, simplemente elimine todo ese contenido aquí y solo agregue un estilo básico configurado aquí con flex one, justifique
el centro de contenido y alinee el centro de elementos para centrar mi contenido la pantalla.
Deshágase de esto aquí y
de todas estas importaciones aquí, quiero usar la hoja de estilo, quiero usar la vista y quiero usar
el botón porque lo que quiero agregar es la funcionalidad del selector de imágenes.
Así que aquí devuelvo mi
vista y mi botón y en el botón, digo tomar imagen y luego en onPress,
quiero abrir el selector de imágenes.
Ahora, ¿cómo podemos agregar esto?
Ahora, dado que este es un proyecto React Native sin expo de ninguna manera, no podemos usar fácilmente las API de expo aquí.
En realidad, hay una forma de usarlos y volveré sobre eso más adelante en este módulo,
pero necesitaría configurar un par de cosas. Por lo tanto, lo que podemos hacer
es hacer algo que harás mucho si estás trabajando con una aplicación React
Native de vainilla, buscamos el selector de imágenes React Native, por ejemplo, para encontrar un paquete que
nos ayude con eso, por ejemplo este, el paquete de
selección de imágenes React Native y ahora podemos instalarlo porque ahora podemos incorporar cualquier paquete de terceros, sin importar
si agrega funcionalidades nativas o no a su aplicación. Anteriormente con expo, esto no era realmente posible,
allí solo podía traer paquetes de terceros que no aprovechaban las funciones nativas del
dispositivo, ahora no tiene restricciones.
Así que
ahora podemos agregar esto y aquí podemos instalarlo siguiendo las instrucciones de instalación aquí,
así que volviendo a nuestro proyecto y allí ejecutando npm install --save y luego aquí está el selector de imagen
React Native, como este. Por cierto, puede mantener este proceso aquí
en ejecución y debe hacerlo para que los cambios de código una vez que guarde sus archivos sean recogidos y enviados a sus dispositivos.
Esperemos a que termine esta instalación ahora.
Ahora está listo,
tomó
bastante tiempo y ahora necesitamos instalar esto
y lo bueno es que este paquete es
muy fácil de instalar, solo debería ejecutar este comando
aquí: React Native link, React Native image select.
Así que ejecuta esto
en tu proyecto, así y deberías ser bueno.
Ahora diré que hay paquetes de terceros que requieren más esfuerzo,
realmente depende del paquete. Para la exposición, obviamente
fue muy fácil, simplemente ejecutó la instalación de la exposición, fue muy rápido,
no tardó tanto y no necesitó hacer nada más.
Aquí debe ejecutar un comando adicional pero,
por supuesto, eso tampoco
es tan malo, pero nuevamente, diré que no todos los paquetes admiten
este comando, algunos paquetes requieren mucho más trabajo de cableado manual, trabajo manual donde realmente necesita sumergirse en
el Carpetas de Android e iOS para comenzar a trabajar en algunos archivos de configuración allí.
Eso es lo que hizo el comando React Native Link para usted, por ejemplo en Android si se sumerge
en la carpeta de la aplicación y allí, fuente y luego en la carpeta de origen en build gradle, verá que
allí, se agregó esta línea.
Esto no estaba allí desde
el principio, esto fue agregado por el comando de enlace
React Native y para algunos paquetes debe agregar estas entradas manualmente, muchos
paquetes admiten el comando de enlace y con versiones más recientes de React Native, algunos paquetes incluso
admite la vinculación automática donde esta vinculación se realizará automáticamente una vez que finalice la instalación, pero no todos
los paquetes tienen esa compatibilidad, por lo que es algo a tener en cuenta.
Detrás de escena, se cambió mucha configuración. Con eso, ahora podemos usar este
paquete, nuevamente como se indica en sus documentos para que podamos agregar esta importación aquí,
aquí, luego también agregar la función de selección de imagen aquí tal vez y conectarla a nuestro botón y ahora aquí, el selector de imagen
funciona un poco diferente a la expo.
Aquí llamamos al selector de imágenes show selector de imágenes con opciones que podemos configurar, las
opciones se configuran como se describe aquí o en los documentos en general y aquí simplemente tomaré todo este código aquí, así,
copie eso en la imagen de selección función, deshacerse de esta llamada de estado establecido, no estamos en un componente
basado en la clase, así que eso
no es algo que podamos hacer,
en su lugar, aquí en el bloque else, solo voy
a consolar el URI de respuesta, que debería
ser la ruta de la imagen que fue tomada y
luego tenemos
un par de controladores para diferentes escenarios aquí y con eso, veamos si eso funciona.
Si guardamos
esto, normalmente debería reconstruirse
aquí, pero debido a nuestro nuevo paquete instalado, abandonaré este proceso y volveré a ejecutar react-native run-android aquí ahora
en mi terminal integrado en Visual Studio Code y, por lo tanto, en
esta carpeta de proyecto y ahora Esto abrirá nuevamente este servidor de desarrollo y, lo que es más importante, también relanzará la aplicación
en el emulador para que podamos verlo allí y probar el selector de imágenes aquí.
Así que esperemos a que eso termine, a que termine ese proceso de compilación.
Ahora aquí está la aplicación que aparece y si la presiono, obtengo esta superposición, puedo hacer clic en tomar foto
y no pasa nada.
La razón de eso es la falta de permisos y ese es el trabajo manual que quise decir. Tenemos que ir a
la carpeta de Android, allí en source, main, AndroidManifest que configura la aplicación de Android y
allí debe agregar un nuevo permiso. Puede copiar este permiso de Internet que siempre
necesitará para que la aplicación de Android se comunique con el servidor de desarrollo y ahora puede agregar el permiso
de cámara que necesita agregar para que esta aplicación pueda acceder a la cámara del dispositivo; de lo contrario, esto no es apoyado.
Así que ahora podemos volver a ejecutar este proceso, reconstruir la aplicación y asegurarnos de tener en cuenta esta nueva
configuración y con eso, ahora deberíamos poder abrir esto.
Entonces, de nuevo, es una configuración adicional que no tuvimos que hacer en el mundo de la exposición, por supuesto.
Por cierto, en iOS, también debe hacer algo similar mientras se reconstruye. Allí, si ingresa
a su archivo RNWithoutExpo, encontrará la información. plist file y en ese archivo,
también debe agregar una entrada para solicitar este permiso.
Debe agregar una nueva clave aquí después de un par clave-valor existente, la posición exacta no importa y
encontrará las instrucciones detalladas en los documentos oficiales de ese paquete, debajo del
documento instalado, si hace clic allí, usted Encontraré instrucciones sobre qué permisos deben configurarse para
Android, también olvidé
uno, también necesitamos configurar este permiso de almacenamiento externo, así que déjenme volver
al AndroidManifest, agregue esto aquí y ahora vuelva a ejecutar esto en Android y iOS ,
allí debe configurar estas claves aquí. Entonces copie todo eso
y luego regrese a la información. archivo plist que le mostré aquí y ahora puede agregar estos pares clave-valor aquí.
Con
eso, verifiquemos la aplicación en Android y si ahora hago
clic en tomar foto, ahora se me pide permiso aquí, esto ahora
sucede automáticamente, el paquete lo hace por nosotros y
ahora, la cámara se abre. Así que ahora funciona,
pero como viste con un poco de configuración adicional y siguiendo las instrucciones de los
documentos oficiales, cada paquete tendrá sus propias instrucciones allí. Algunos paquetes ni siquiera admiten el comando
de
enlace, allí debe hacer
aún más, otros paquetes requieren menos trabajo. Tiene más flexibilidad pero, por lo tanto, también más deberes.
Sin embargo, así es como puede llevar paquetes de terceros que aprovechan las funciones nativas del dispositivo a una aplicación React Native solo
para su código de componente que usted escribe, ese es el mismo código que
escribimos a lo largo de todo el curso: mismos
componentes, misma lógica, de la misma manera de cómo construyes tu aplicación. Puede crear las mismas carpetas, puede agregar
React navigation, que no todo cambia.