Ahora, además de configurar un nuevo proyecto desde cero con React Native CLI o con la expo CLI y
luego elegir el flujo de trabajo
desnudo, incluso puede convertir un proyecto administrado en un proyecto de flujo de trabajo desnudo React Native y eso es bastante bueno porque eso significa que
puede obtener todo las características de conveniencia del flujo de trabajo administrado durante
el desarrollo y una vez que haya terminado, por ejemplo, o una vez que necesite un determinado paquete de terceros que integre algunas
características que no ha incorporado en la exposición y que absolutamente necesita, en tal caso puede todavía
cambia y no tiene que reconstruir la aplicación desde cero y crear un nuevo proyecto
y copiar su código.
¿Cómo? Bueno, en su proyecto y esta es la característica
nativa del dispositivo, el proyecto de grandes lugares que construimos anteriormente en el curso donde podemos agregar lugares, donde, por
supuesto, estamos usando la ubicación, los mapas, la cámara, SQLite, donde estamos usando todos estos cosas, allí en este proyecto, simplemente puede ejecutar expo
eject y esto transforma su proyecto en un proyecto de flujo de trabajo administrado no expo.
Sin embargo, es importante, no hay vuelta atrás, por supuesto,
puede copiar su carpeta y hacer una copia de seguridad y guardar esto o si está usando git, por supuesto,
puede volver a una confirmación anterior, pero si no ha guardado su proyecto, una vez que lo expulsa, no
puede transformarlo de nuevo,
así que tenga en cuenta esto.
Tendrías que crear un nuevo proyecto gestionado por la exposición y copiar todo tu código
si querías volver.
Entonces, si ejecuta la expulsión de la exposición, en realidad se le debe preguntar a qué tipo de proyecto desea
expulsar y aquí tengo dos opciones al final. Ahora, por cierto, las opciones que ves aquí pueden diferir con
el tiempo, pero aquí, las dos opciones que tengo son kit básico y expo. El kit de Expo está en desuso, esto
es básicamente lo que teníamos antes de que tuviéramos el flujo de trabajo simple, por lo que realmente no
deberías cambiar a esto, sino que puedes cambiar a desnudo
aquí, lo que simplemente significa que ahora esto se transformará en un proyecto React Native, como si fuera
creado con React Native CLI sin el envoltorio de exposición, pero estará preconfigurado
como se menciona aquí en la página react-native-unimodules, que es una especie de paquete que expo necesita
exponer todas estas API de exposición a un aplicación no expo. Por lo tanto, preconfigurará todas estas cosas durante cada acción para
que no tenga que hacer eso, por lo
que obtendrá una aplicación React Native plus, por así decirlo. Entonces, si presiono enter aquí y ahora es
importante, no puede volver una vez que se haya completado, puede elegir un nombre para la pantalla
de inicio y elegiré lugares excelentes aquí, por ejemplo, presione enter, ahora nombre mi Android Studio y Xcode proyecta rn-guide
pero eso depende de usted y ahora esto hará su trabajo.
Transforma el proyecto, agrega una
carpeta de Android y como estoy en macOS, también agrega una carpeta de iOS. Por supuesto, en Windows y Linux, no lo
hará porque allí, dado que ahora necesita compilar esto localmente, no puede
compilar aplicaciones iOS
y preconfigura todo e instala un par de dependencias para que pueda usar su código existente y todos
los paquetes de exposición que ya instaló en esta configuración básica, por lo que no
solo configura todos los elementos de unimódulos aquí,
sino que también se asegura de que todos los paquetes que ya está utilizando, como ubicación de exposición o SQLite
de exposición, también esos paquetes trabajo. Así que ahora esto puede llevar
un tiempo, así que esperemos a que termine y aquí está hecho y verá que en realidad me dice que generalmente hizo
su trabajo, pero había dos paquetes que requieren una configuración manual.
Simplemente puede hacer clic en estos enlaces para obtener instrucciones sobre lo que necesita hacer
allí, es el selector de imágenes de la exposición y el paquete de mapas React Native donde necesita hacer una instalación
manual para terminarlo.
Entonces, aquí en la página del selector
de imágenes de la exposición, al final lo que tenemos que hacer es ejecutar el puerto de instalación en la carpeta iOS,
por
lo que debemos hacer todas las cosas después de instalar el paquete. Entonces, en la carpeta del proyecto, navegaré a iOS y
ejecutaré la instalación del puerto, el puerto es como npm para iOS, instala algunas dependencias que iOS necesita para funcionar correctamente,
así que eso es lo que está sucediendo ahora y una vez hecho esto, también lo haremos necesitamos agregar esta entrada aquí al
manifiesto de Android, así que eso también es algo que tendremos que hacer.
Por lo tanto, debemos ir a la carpeta de Android, la carpeta de la aplicación allí y en la carpeta de origen, el
Manifiesto de Android y luego, como se describe aquí, agregar esto dentro de las etiquetas de la aplicación.
Así que aquí está la aplicación y allí, deberíamos agregar esta entrada de actividad aquí, como esta, que es obligatoria.
Ahora que ya estoy aquí, también verá que este archivo de manifiesto también se
configuró
de cierta manera, incluye todos los permisos y, por supuesto, no desea hacerlo, solo desea solicitar
los permisos realmente necesitas
Entonces, como dice aquí, elimine los permisos que su aplicación no necesita y, por ejemplo, mi aplicación de demostración
aquí solo debería necesitar el permiso de ubicación de acceso de acceso que moveré
allí y, por supuesto, el permiso de la cámara que moveré allí y también el permiso de escritura de almacenamiento externo, que también
debería ser necesario.
En realidad, estos deben ser todos los permisos y puede verificar todos los paquetes de terceros o todos
los paquetes de API de exposición que está utilizando para asegurarse de que no le faltan permisos.
Con eso, en realidad comentaré todos estos permisos aquí y también todos estos permisos y lo
probaremos para ver si eso funciona. Entonces, con eso, la configuración del paquete selector de imágenes está lista. Ahora, los mapas React Native
también deben configurarse y allí podemos sumergirnos en las instrucciones de instalación.
Ahora este comando de instalación npm, eso ya sucedió, pero ahora lo que
tenemos que hacer es ejecutar el enlace React Native React Native maps. Entonces, simplemente volvamos a subir un
nivel en la carpeta del proyecto raíz y ejecute React Native link React Native maps
y eso ahora vinculará
todo, asegúrese de que todo funcione correctamente, que todo esté configurado correctamente
y que aún necesite hacer algo de manual cosas, todas estas cosas aquí no deberían ser
necesarias, todo debería hacerse con enlaces afortunadamente, pero en Android, debe asegurarse de agregar esta entrada aquí, esta entrada de metadatos en
la
clave de su aplicación en el Manifiesto de Android.
Entonces, aquí dentro de la aplicación, podemos agregar esta entrada y allí debe colocar su clave API de
Google Maps.
Ahora lo tengo en la
carpeta env si lo recuerdas, así que solo tomaré esta clave y la agregaré aquí, reemplazaré tu clave de API
de Google Maps aquí y también es
importante, si vas a la página de API de Google Maps, necesitas para habilitar este SDK de mapas para Android en su proyecto,
eso es
importante; de lo contrario, esto no funcionará. Para iOS, no necesita hacer nada especial a menos
que quiera usar Google Maps allí, en cuyo caso debe seguir las instrucciones dadas en las instrucciones de React Native Maps
aquí para saber cómo usar Google Maps en iOS pero para Android
usted definitivamente necesita habilitar el SDK de Google Maps para la API de Android aquí. Para habilitar esta API, puede ir a Google Cloud Platform aquí
para el proyecto en el que trabajó anteriormente cuando configuró esa clave API y así sucesivamente, y
luego aquí, en API y servicios, puede ir a la biblioteca que lo lleva a una biblioteca de
todas las API de Google y allí el SDK de mapas para Android,
debe habilitar esto.
También necesitará configurar el SDK de mapas para iOS si desea usar Google Maps en iOS, que
no usaré aquí.
Ahora ya debería estar habilitado aquí, pero
asegúrese de que lo esté. Entonces, en caso de que no
esté habilitado, definitivamente hágalo.
Con eso, esto también debería configurarse de manera que
funcione y ahora si ejecutamos react-native run-android, la aplicación que creamos en un módulo anterior con el flujo de trabajo administrado expo ahora debería
funcionar, ahora sin el flujo de trabajo administrado expo sin el cliente expo se usa en el simulador o en el dispositivo
real, sino que se construye localmente con Android Studio o, por supuesto, también con iOS si desea usar eso y, por
lo tanto, de la misma manera que lo haría en un proyecto creado por React Native CLI pero ahora, después
de expulsarlo del flujo
de trabajo administrado, lo que, por supuesto, significa que todo este código se escribió en el flujo de
trabajo administrado y, sin embargo, ahora lo ejecuto en el flujo de trabajo no administrado, lo cual es bastante bueno.
Esperemos a que esto termine y veamos si esta aplicación funciona como debería.
Aquí viene el emulador de Android, que es el emulador que quiero usar para probar porque allí
puedo usar la cámara del emulador para probar y nuevamente, solo para enfatizar esto, esto ahora no está usando la
aplicación de cliente expo,
tampoco pudimos ' t escanee un código de barras aquí porque no hay código
de barras para escanear, esta es realmente una aplicación construida con Android Studio y enviada a nuestra aplicación.
Así que aquí está nuestra aplicación y ahora intentemos agregar un nuevo
lugar aquí, probar, tomar una imagen, permitir el acceso a la cámara, por supuesto, y luego tomar
esta imagen, sí, recortarla,
elegir una ubicación
en el mapa tal vez,
aquí está el mapa que viene, esta ubicación se ve
bien para mí, guarda esto, guarda el lugar,
aquí
estamos y ahora déjame cerrar esta aplicación.
Allí, también ves que esta es realmente una aplicación
independiente instalada, si abro el cajón de aplicaciones aquí en el dispositivo, aquí en el simulador, es esta
aplicación de lugares fantásticos que ves aquí.
Entonces, si lanzo esto, ahora relanza la aplicación en la que trabajamos y está nuestro lugar, ya que estaba almacenado en el
almacenamiento local, la imagen
obviamente estaba almacenada en el sistema de archivos; de lo contrario, no la
veríamos y funciona como antes, pero ahora no dentro del cliente expo sino como una aplicación independiente sin ningún envoltorio de
expo,
todavía usando algunas de las API de expo y paquetes de expo con la ayuda de este paquete de unimódulos
que se agrega y configura automáticamente al flujo de trabajo simple que, por otro lado, obtuvimos con
la ayuda de expulsar.
Así que hay muchas cosas geniales pasando allí.