1 00:00:02,340 --> 00:00:08,460 Es importante comprender cómo funciona la navegación y las aplicaciones nativas, y especialmente si tiene experiencia en 2 00:00:08,460 --> 00:00:14,400 desarrollo web, es importante comprender cómo difiere de navegar entre pantallas y la web porque en la 3 00:00:14,460 --> 00:00:20,760 web ingresa realmente un L y si está construyendo una aplicación de reacción utiliza una herramienta como reaccionar 4 00:00:20,760 --> 00:00:24,240 enrutador para luego cargar el componente de los usuarios. 5 00:00:24,240 --> 00:00:30,640 Y si hace clic en un enlace que va a los productos de punto com de mi sitio nuevamente, el enrutador de reacción, que es la biblioteca adicional que instaló, 6 00:00:30,660 --> 00:00:37,950 ve que cambia la ruta en su U. R. L. y carga un componente de 7 00:00:37,950 --> 00:00:38,820 reacción diferente. 8 00:00:38,850 --> 00:00:40,800 Así es como funciona la navegación en la web. 9 00:00:40,890 --> 00:00:47,880 Entonces, ¿eres L? Es tu fuente de verdad y cambiar que eres L podría ser recogido por bibliotecas como react 10 00:00:47,880 --> 00:00:51,220 router que luego mostraba diferentes componentes en la pantalla. 11 00:00:51,240 --> 00:00:53,910 Así es como reacciono para los trabajos web. 12 00:00:54,030 --> 00:00:57,990 Ahora hay una diferencia importante cuando pensamos en aplicaciones nativas. 13 00:00:58,070 --> 00:01:05,070 No sabemos que son usuarios mayores, no anden en su aplicación ingresando algunos de los que son L, en 14 00:01:05,070 --> 00:01:09,510 lugar de presionar los botones, presionar los toques y avanzar y retroceder. 15 00:01:09,540 --> 00:01:16,050 Tienes botones de retroceso, cajones laterales, así es como navegas en aplicaciones móviles para ser precisos. 16 00:01:16,050 --> 00:01:19,720 Como mencioné, tener grifos es un patrón común que ves allí. 17 00:01:19,770 --> 00:01:25,170 El patrón común promedio es que navegas en una pila de páginas y eso simplemente significa que vas 18 00:01:25,170 --> 00:01:31,770 a alguna página, haces clic en algún elemento, te lleva a una nueva pantalla y luego automáticamente obtienes un botón de retroceso en 19 00:01:31,770 --> 00:01:36,210 la parte superior o en Android tener uno integrado en el dispositivo, por supuesto. 20 00:01:36,210 --> 00:01:41,850 Y cuando presiona que navegó de regreso a la página en la que estaba antes y obtiene una transición 21 00:01:41,850 --> 00:01:43,100 sin problemas para eso. 22 00:01:43,140 --> 00:01:48,660 Por lo tanto, puede navegar, por ejemplo, cargar un componente de usuarios presionando la pestaña o presionando un 23 00:01:48,870 --> 00:01:54,270 elemento especial y navegando allí, y la acusación simplemente se ve y se siente un poco diferente 24 00:01:54,270 --> 00:01:55,390 para los usuarios. 25 00:01:55,500 --> 00:02:00,700 Ahora, por supuesto, también queremos aportar ese aspecto a nuestra aplicación nativa ReACT. 26 00:02:00,780 --> 00:02:02,570 Y afortunadamente eso es muy fácil. 27 00:02:02,580 --> 00:02:09,310 Con la ayuda de una biblioteca de terceros, usaré la biblioteca de 28 00:02:09,310 --> 00:02:16,630 terceros que lo usará para esto. Detuve mi servidor expuesto. Aquí está la 29 00:02:16,720 --> 00:02:24,280 navegación de reacción. Podemos instalarlo con npm. en realidad es una biblioteca de navegación 30 00:02:24,310 --> 00:02:26,660 creada para reaccionar nativamente. 31 00:02:26,680 --> 00:02:33,370 Ahora también puede usarlo en aplicaciones web, pero su enfoque principal son las aplicaciones nativas creadas con React Native. 32 00:02:33,370 --> 00:02:40,330 Entonces, aunque se llama reaccionar navegación, es para React Native, no solo para reaccionar para la web. 33 00:02:40,870 --> 00:02:46,330 Entonces, simplemente podemos instalar este paquete aquí en nuestra aplicación para comenzar a usarlo. 34 00:02:46,330 --> 00:02:51,130 Y, por supuesto, le enseñaré los entresijos de este paquete y cómo usarlo para diferentes 35 00:02:51,130 --> 00:02:53,200 patrones de navegación en este módulo. 36 00:02:53,200 --> 00:02:56,590 Pero en caso de que desee sumergirse más profundamente o también desee tener una guía escrita. 37 00:02:56,590 --> 00:03:02,280 Definitivamente también echa un vistazo a react navigation dot ORIC, que es la página oficial de este paquete donde 38 00:03:02,290 --> 00:03:06,000 puedes sumergirte en los muelles para aprender todo sobre este paquete. 39 00:03:06,040 --> 00:03:09,400 Allí puedes leer todo al respecto con gran detalle. 40 00:03:09,430 --> 00:03:13,320 Aprenderá cómo usarlo, cómo configurarlo, etc. 41 00:03:13,330 --> 00:03:19,360 Hay mucho que puedes hacer con él y, aunque cubriré la mayor parte de esto aquí, este es un 42 00:03:19,360 --> 00:03:21,680 gran recurso para que profundices más. 43 00:03:21,760 --> 00:03:28,390 Ahora, una cosa que vemos aquí y que deberíamos hacer es ejecutar este comando de usuario que instala un 44 00:03:28,390 --> 00:03:32,350 montón de dependencias adicionales que reaccionan a las necesidades de navegación. 45 00:03:32,510 --> 00:03:39,670 Así que simplemente copie este comando desde la página de Inicio aquí y ejecute en su proyecto en la línea 46 00:03:39,670 --> 00:03:46,180 de comandos en el terminal integrado que no tiene npm install pero Expo install, aunque la única diferencia 47 00:03:46,180 --> 00:03:52,210 es que Expo instalada detrás de escena ejecutará npm install pero elegirá las versiones específicas de 48 00:03:52,300 --> 00:03:56,540 estos paquetes que funcionan con su versión específica de Expo. 49 00:03:56,590 --> 00:04:01,750 Por lo tanto, se podría decir que es una versión más segura de la instalación de npm y, por lo tanto, se recomienda que la 50 00:04:01,750 --> 00:04:02,370 use aquí. 51 00:04:02,380 --> 00:04:07,600 Ahora una nota adicional sobre este comando y esta página en general en la parte superior izquierda de esta página, 52 00:04:07,600 --> 00:04:09,240 verá la versión de React navigation. 53 00:04:09,250 --> 00:04:16,670 Estos documentos están relacionados ahora con la reutilización de este curso, mientras que en 3 o 4 son más o menos lo mismo. 54 00:04:16,690 --> 00:04:22,570 No estamos usando mientras que en 5 en este momento porque la versión 5 usa una sintaxis ligeramente diferente que 55 00:04:22,580 --> 00:04:24,280 por el momento no cubriremos. 56 00:04:24,280 --> 00:04:30,760 Por lo tanto, asegúrese de que si vuelve a recurrir a los documentos, seleccione la Versión 4 o no tenga la documentación 57 00:04:30,760 --> 00:04:32,500 aquí para seguir sin problemas. 58 00:04:32,530 --> 00:04:37,300 Por supuesto, siempre puede echar un vistazo a la versión 5 e intentar ajustar manualmente el código si 59 00:04:37,480 --> 00:04:42,720 lo desea, pero para una experiencia fluida, por supuesto, centrarse en React Native y no en la navegación de reacción. 60 00:04:42,820 --> 00:04:45,160 Asegúrese de elegir la versión 4 o año libre. 61 00:04:45,220 --> 00:04:50,560 Esa es solo una pequeña nota al margen en caso de que se esté preguntando sobre la diferencia entre los 62 00:04:50,560 --> 00:04:56,720 documentos aquí y lo que ve en este curso. Sin embargo, ahora es una nota importante mientras nos atenemos a la navegación de reacción 63 00:04:56,720 --> 00:04:57,550 que nos espera. 64 00:04:57,560 --> 00:05:05,540 Aquí más adelante en el curso tendré un módulo completo sobre la navegación de reacción cinco y más tarde, donde 65 00:05:05,540 --> 00:05:10,100 le mostraré cómo convertir su proyecto para usar esa última versión. 66 00:05:10,100 --> 00:05:16,130 Entonces, ¿tenía lo mejor de ambos mundos y aprenderá ambos tipos de configuración de navegación y 67 00:05:16,130 --> 00:05:22,400 navegación y reaccionará a las aplicaciones nativas porque será muy importante saber tanto para y en el futuro 68 00:05:22,760 --> 00:05:25,180 donde tenga cinco años o más. 69 00:05:25,250 --> 00:05:30,890 Así que simplemente copiemos este comando y también asegurémonos de que, además de instalar Rea Navigation, 70 00:05:30,890 --> 00:05:36,830 que es el paquete principal, por supuesto, también instalamos estos paquetes en el proyecto ejecutando Expo 71 00:05:36,830 --> 00:05:43,570 install aquí ahora con la instalación finalizada aquí. Puedo reiniciar mi servidor Expo con NPM start y ahora podemos 72 00:05:43,570 --> 00:05:46,540 comenzar a usar la navegación de reacción. 73 00:05:46,540 --> 00:05:51,550 Ahora, para todo esto, intercambie una nueva carpeta en mi proyecto y la llamaré navegación. 74 00:05:51,550 --> 00:05:57,140 Esto no es algo que tenga que hacer, pero puede ayudarlo a mantener su código limpio porque allí está. 75 00:05:57,140 --> 00:06:03,600 Crearé un nuevo archivo, todos crearán mi navegador de comidas dot J fall. 76 00:06:03,640 --> 00:06:05,590 Ahora este nombre de archivo depende totalmente de usted. 77 00:06:05,620 --> 00:06:12,970 Solo quiero indicar que allí configuraré la configuración de mi navegación para mi aplicación de comidas aquí 78 00:06:12,970 --> 00:06:14,690 que estoy construyendo. 79 00:06:14,710 --> 00:06:16,630 Entonces es por eso que un nombre así. 80 00:06:16,630 --> 00:06:22,420 Y es en el navegador de comidas jazz fall donde quiero configurar mi configuración 81 00:06:22,420 --> 00:06:29,530 de navegación de pozo. Quiero decirle a Rea Navigation que instalamos qué diferentes pantallas tenemos cómo están 82 00:06:29,830 --> 00:06:32,880 conectadas y cómo queremos movernos entre ellas. 83 00:06:33,190 --> 00:06:36,670 Ahora es más fácil ver eso que hablar de ellos. 84 00:06:36,730 --> 00:06:41,350 Por lo tanto, en el navegador de comidas, comencemos a configurar algo de navegación.