Entonces, ¿cuáles son nuestras alternativas al flujo de trabajo administrado?
Una alternativa es usar la CLI React Native, puede aprender
sobre esto en la página oficial React Native
si lo visita, simplemente puede buscar en Google React Native para encontrarlo y allí,
si hace clic en Comenzar, en realidad lo reciben con dos formas diferentes de comenzar y las formas preseleccionadas de usar
Expo CLI,
es el enfoque que usamos, ¿verdad?
Entonces, no hay nada demasiado elegante en esto, esto te da una aplicación React Native usando expo, es lo
que usamos en este curso.
Sin embargo, también puede hacer clic en el
inicio rápido de React Native CLI y ahora aquí primero debe configurar su sistema
de cierta manera y luego puede instalar un paquete separado, la React Native CLI que ahora
necesita para crear un proyecto y ejecutarlo y así sucesivamente. Ahora importante, aquí encontrará las instrucciones detalladas de instalación para los diferentes sistemas
operativos y aplicaciones que desea crear.
Ahora tenga en cuenta que en Windows, como dice aquí, no puede crear aplicaciones de iOS, lo mismo en Linux,
solo puede crear aplicaciones de Android allí y encontrará instrucciones de instalación si selecciona las opciones específicas.
En macOS, puede
compilar iOS y Android y también deberá seguir estas instrucciones de instalación.
Ahora no haré esto en detalle aquí porque los encontrará todos escritos aquí, por supuesto, si
desea seguirlos, al
final necesitará instalar un par de paquetes, no paquetes npm sino paquetes de todo el sistema y el El proceso
exacto de instalación difiere con respecto a la plataforma en la que se está ejecutando.
Necesitará instalar Android Studio o Xcode, por lo que Xcode para aplicaciones iOS, Android Studio para aplicaciones Android
y necesita instalar eso ahora, anteriormente era
opcional, solo lo
hice para obtener un simulador, ahora
lo necesita porque ahora estos Se utilizarán herramientas para construir su aplicación.
Anteriormente, eso no era necesario porque el envoltorio de la exposición básicamente básicamente leía nuestro código y lo alojaba,
y también puede crear una aplicación independiente con expo en el flujo de
trabajo administrado, eso sucederá en la nube.
Ahora que todo sucede localmente, deberá instalar Android Studio, etc., e instalarlo con
todas las opciones que encuentre aquí.
Ahora tampoco importa para qué plataforma esté trabajando, también necesita instalar React Native CLI, puede hacerlo en su símbolo
del sistema o terminal normal, en Mac o Linux puede necesitar agregar sudo delante de esto para obtenga los permisos correctos y esto
ahora instalará globalmente la React Native CLI, para eso también necesita NodeJS instalado porque
esto usa npm, que es el administrador de paquetes del nodo, así que asegúrese
de tener eso también.
Ahora con la React Native CLI
instalada, podemos comenzar a crear un proyecto totalmente sin exposición y para eso crearé un
nuevo proyecto y seleccioné una carpeta para eso ejecutando
react-native init y ahora cualquier nombre de su elección,
para ejemplo RNWithoutExpo. Para el nombre, es importante que
esté escrito así, sin guiones ni guiones bajos, sino solo una palabra.
Entonces, RNWithoutExpo es el nombre que elegiré y esto creará un nuevo proyecto React Native
utilizando la CLI React Native en este lugar donde ejecutó este comando y le dará esta nueva carpeta
que contiene este nuevo proyecto React Native.
Ahora importante otra
vez, ahora necesita tener Android Studio y Xcode instalados y configurados como se menciona en los documentos
oficiales
aquí, de lo contrario, lo que voy
a mostrar ahora no funcionará, necesita instalarlo porque ahora estas herramientas serán aprovechadas por la
React Native CLI para compilar y ejecutar su aplicación. También active algunos emuladores o simuladores, pueden ser los mismos que se
usaron antes en el curso, pero debe tenerlos en ejecución para que podamos ver nuestra aplicación React Native en ejecución allí.
Así que ahora esperemos a que esta configuración termine aquí y una vez que esto esté hecho y este proceso pueda llevar
un tiempo, puede seguir las instrucciones aquí para finalmente ejecutar su aplicación. Así que déjame navegar en esta carpeta recién
creada
aquí y ejecutar react-native run-ios, por ejemplo,
para ejecutarlo en el simulador de iOS que obtuve. Ahora, esto detrás de escena usa Xcode para construir esta
aplicación,
ya no usa expo, puede desinstalar el cliente de expo aquí, puede desinstalar la expo CLI de
su sistema, esto
no aprovecha la expo en absoluto, solo usa Xcode detrás las escenas para construir su aplicación, por
lo que esta herramienta de desarrollo nativa de Apple. Esperemos a que termine esta compilación y la primera vez que la construyas,
esto llevará un poco
más de tiempo, las reconstrucciones posteriores serán más rápidas. Así que esperemos a que esto termine.
Ahora, a lo largo de este proceso de compilación, se abrirá una nueva pestaña o una
nueva ventana en su terminal, mantenga ese proceso ejecutándose y también mantenga el
proceso de
compilación ejecutándose, por supuesto, no abandone esto, así que mantenga ambos procesos en funcionamiento aquí y ahora esto instala la aplicación
en el simulador, en este caso, si tuviera un dispositivo real conectado, lo instalaría allí e inicia la aplicación
allí y, por lo tanto, aquí,
realmente creó un nuevo simulador aquí para mí, no Sin
embargo, ahora lanza la aplicación aquí en este simulador. Nuevamente para el primer lanzamiento, esto ahora
descarga la aplicación integrada en este dispositivo básicamente y también tiene algunas características de desarrollo agradables, se puede habilitar la depuración
remota, por lo que también tiene todas estas características agradables aquí, eso no es
expo exclusivo y este primer lanzamiento llevará un poco más de tiempo como se mencionó.
Así que esperemos a que termine esta descarga aquí para que la aplicación se inicie y esté por aparecer. Ahora, la pantalla de inicio exacta que está viendo
aquí, que puede diferir con
el tiempo porque ese es solo el código de inicio que obtiene
en el proyecto, que veremos en un segundo, pero ahora es la aplicación, una aplicación nativa sin
exposición de lo contrario, se ejecuta en iOS. También podemos ejecutarlo en Android y para eso, este proceso que ahora ha finalizado se puede
borrar, el otro debe mantenerse ejecutándose, ese
es su servidor de desarrollo que se comunica con el dispositivo y que vigila los cambios de archivos e introduce un nuevo código
en el dispositivo ,
entonces lo que sabes de la expo, eso también funciona aquí. Por lo tanto, mantenga el otro proceso
en ejecución, pero ahora también podemos ejecutar react-native run-android para compilar también la aplicación para Android y aprovechar ese mismo servidor
para luego compilar y empujar la aplicación de Android al emulador de Android y luego ver eso también.
Esperemos a que esto
termine, nuevamente esta primera compilación tomará más tiempo, las recargas posteriores serán mucho más rápidas.
Este proceso de compilación ahora aprovecha Android Studio, que también debe haber instalado y
configurado como se describe en los documentos oficiales y, por lo tanto, ahora también funciona
totalmente sin exposición, solo usa Android Studio.
Ahora, esto también lanza la aplicación de Android aquí en mi emulador de Android, pero al igual que antes, este lanzamiento inicial puede demorar
un poco, ahora se conecta
a este servidor de desarrollo que, por lo tanto, aquí también
debería seguir ejecutándose, no solo mientras se construye este paquete, pero todo el tiempo, de modo que hasta los
cambios en sus archivos, obtenga una reconstrucción en vivo y una vez hecho esto, veamos que la aplicación terminada
se ejecute en Android.
Ahora echemos un vistazo al código que es responsable
de eso, ¿se ve ahora totalmente diferente de lo que vimos hasta ahora?
Para eso, cargué el proyecto aquí nuevamente con Visual Studio Code, por lo que la misma configuración que antes
y lo que ves se ve un poco diferente, pero sobre todo, tenemos un montón de archivos de configuración diferentes, bastante
justos, pero eso realmente no cambia La forma en que escribimos nuestro código.
Muy importante, tenemos una carpeta de Android y una
de iOS, no
teníamos eso antes, esas carpetas y en Windows, por cierto, Linux no tiene iOS, solo tiene
Android allí, pero esas carpetas contienen la aplicación nativa real Los proyectos que se crean con la
ayuda de Android Studio y Xcode y su código se integran en algo
que podría decirse, React Native hace todo eso por usted, el proceso React Native CLI, pero si
echamos un vistazo al código concreto en el aplicación js, bueno, eso es justo
lo que usamos en este curso, ¿verdad? Allí tenemos un par de importaciones y algunos enlaces adicionales que le muestran algunas advertencias
aquí con respecto al estilo del código.
Estos no son errores reales, solo que debería usar comillas dobles en lugar de comillas
simples, sí, alguna recomendación que no me importa aquí, pero si echa un vistazo a lo
que se importa aquí, reaccione, guarde la vista de área, la hoja de estilo, la vista de desplazamiento ,
ver, texto: estas son todas las cosas con las que ya trabajamos, por lo que tenemos los componentes
normales con los que ya trabajamos y, por supuesto, lo hacemos porque lo que dije a lo largo de este curso, React Native es React Native, expo es una envoltura
delgada alrededor .
Escribimos el mismo código, usamos los mismos componentes, se compilan en widgets nativos, todo no cambia cuando usamos expo,
la única diferencia es que con
expo, no tenemos que configurar tanto, la compilación es un poco más
rápido y agregar módulos nativos es súper fácil, probar en dispositivos reales es súper fácil, es simplemente más fácil,
creamos la aplicación
de la misma manera y eso es algo que también puedes ver aquí.
Los estilos se configuran de la misma manera con Stylesheet. crear, eso es todo lo
que hicimos a lo largo de este curso y eso es
importante para ti.
Ahora una cosa extra que encontrarás aquí es el índice. js, no teníamos eso
en la expo, ese tipo de archivo de configuración básico que inicia su aplicación se podría decir, que asegura
que este componente de la aplicación se muestre en la pantalla, eso es algo
que la expo hizo por usted en React Aplicación expo nativa, pero aparte de eso, es realmente igual y
crearía una aplicación de la misma manera.