1 00:00:02,410 --> 00:00:07,070 Entonces, para este módulo, adjunto, encontrará nuevamente un proyecto de inicio simple. 2 00:00:07,090 --> 00:00:09,640 Ahí tienes la aplicación. archivo js con una vista 3 00:00:09,790 --> 00:00:11,680 vacía, por lo que no sucede mucho allí. 4 00:00:11,770 --> 00:00:16,870 Obtiene una carpeta de constantes con un color básico que configuré para usted y eso es todo. 5 00:00:16,870 --> 00:00:21,010 Aparte de eso, no hay nada interesante aquí, es una aplicación 6 00:00:21,010 --> 00:00:25,320 muy básica que ahora utilizaremos para construir esta aplicación que acabo de esbozar. 7 00:00:25,420 --> 00:00:28,930 Ahora, por supuesto, puede seguir adelante y construir los conceptos básicos por 8 00:00:28,930 --> 00:00:34,870 su cuenta, por lo que estas tres pantallas diferentes que al final necesitamos o cuatro pantallas diferentes, una para todos los 9 00:00:34,870 --> 00:00:40,390 lugares, una para los detalles del lugar, una para crear una nueva lugar y uno para el mapa de 10 00:00:40,390 --> 00:00:45,590 pantalla completa que también queremos mostrar, absolutamente puede hacer eso y construir el esqueleto base para estas pantallas 11 00:00:45,590 --> 00:00:51,100 por su cuenta, también configurar la navegación básica porque, por supuesto, esto es todo lo que ya hicimos varias 12 00:00:51,370 --> 00:00:52,600 veces en este curso. 13 00:00:52,750 --> 00:00:57,310 También es algo con lo que comenzaré en las próximas conferencias en caso de que quiera 14 00:00:57,310 --> 00:01:01,000 seguir o comparar su solución con la mía y, a continuación, profundizaremos 15 00:01:01,090 --> 00:01:09,150 en la carne de este módulo, profundizaremos en cómo agregar capacidades de dispositivos nativos . Entonces, comencemos con lo 16 00:01:09,210 --> 00:01:10,510 básico. 17 00:01:10,510 --> 00:01:17,080 Agregaré una nueva pantalla de carpetas con las cuatro pantallas que quiero tener y ese sería el archivo 18 00:01:17,080 --> 00:01:28,360 de pantalla de la lista de lugares, el archivo de pantalla de detalles de lugar, el nuevo archivo de pantalla de lugar y también la pantalla de mapa donde podemos ver esta 19 00:01:28,360 --> 00:01:33,770 pantalla completa mapa y los completaré con contenido a lo largo de este módulo, pero 20 00:01:33,820 --> 00:01:36,970 estas son las cuatro pantallas básicas que necesitaré. 21 00:01:36,970 --> 00:01:43,460 También agregaré una carpeta de navegación para que podamos configurar la navegación allí 22 00:01:43,470 --> 00:01:51,030 y aquí configuraré mi PlacesNavigator. archivo js. Ahora, en el proyecto inicial que proporcioné, 23 00:01:51,450 --> 00:01:52,920 React Navigation y todas 24 00:01:52,920 --> 00:01:56,720 sus dependencias ya están instaladas, por lo que si está usando 25 00:01:58,260 --> 00:02:03,480 eso, no necesita instalarlo manualmente; de lo contrario, si está usando su propio proyecto inicial, asegúrese 26 00:02:03,480 --> 00:02:09,660 de instale React navigation con npm instale React navigation y también asegúrese de instalar estas dependencias adicionales aquí para 27 00:02:09,660 --> 00:02:12,280 asegurarse de que React navigation funciona con expo. 28 00:02:12,330 --> 00:02:19,290 Entonces, con eso instalado, ahora, por supuesto, podemos configurar la navegación aquí en el navegador de lugares y para eso, aquí 29 00:02:19,380 --> 00:02:24,150 importaré desde React navigation y lo que importaré es, por supuesto, la función de 30 00:02:26,730 --> 00:02:31,020 creación del navegador de pila, así que cree el navegador de pila 31 00:02:31,020 --> 00:02:37,110 y también cree un contenedor de aplicaciones que también debemos hacer porque tendremos que hacer ambas cosas: crear un 32 00:02:37,110 --> 00:02:41,580 navegador de pila y configurar el contenedor de aplicaciones a partir de entonces. 33 00:02:41,580 --> 00:02:46,830 Ahora también necesitamos importar las pantallas con las que queremos trabajar y esa sería la pantalla de lista de lugares que importaré desde 34 00:02:47,070 --> 00:02:53,640 la carpeta de pantallas y allí, es la pantalla de lista de lugares. También necesitaremos la pantalla de detalles del lugar, por 35 00:02:53,640 --> 00:02:59,910 supuesto, la pantalla de detalles del lugar que se importa desde las pantallas y la pantalla de detalles 36 00:02:59,910 --> 00:03:02,850 del lugar y, obviamente, las otras dos pantallas. 37 00:03:02,850 --> 00:03:12,800 Entonces obtuvimos la nueva pantalla de lugar de las pantallas, la nueva pantalla de lugar y, por último, pero no menos importante, también necesitamos importar nuestra pantalla 38 00:03:12,830 --> 00:03:18,770 de mapa aquí desde la carpeta de pantallas y luego esa sería la pantalla de mapa. 39 00:03:18,770 --> 00:03:26,800 Ahora podemos configurar nuestro navegador de pila aquí y almacenaré este navegador de lugares de forma constante y, como también lo aprendiste, 40 00:03:26,990 --> 00:03:31,440 ahora estamos asignando identificadores a nuestras pantallas, por lo que quizás tengamos 41 00:03:31,550 --> 00:03:38,720 el identificador de lugares asignado a la pantalla de lista de lugares , obtuvimos el identificador de detalle de lugar 42 00:03:38,840 --> 00:03:41,180 asignado a la pantalla de detalle 43 00:03:41,180 --> 00:03:49,300 de lugar, también obtuvimos el nuevo identificador de lugar asignado a la pantalla de nuevo lugar y, por último, pero no menos 44 00:03:49,330 --> 00:03:57,040 importante, quizás el mapa asignado a la pantalla de mapa. Y con eso, podemos configurar algunas opciones de navegación predeterminadas aquí, 45 00:03:57,130 --> 00:04:02,680 así que pasaré un segundo argumento y, por supuesto, configurarlo es totalmente opcional, pero agregaré opciones de 46 00:04:02,680 --> 00:04:09,970 navegación predeterminadas a cada pantalla, por lo tanto, y quiero definir mi estilo de encabezado aquí y asegúrese de que estamos usando 47 00:04:09,970 --> 00:04:14,010 un color de fondo dependiendo de si estamos ejecutando Android o no. 48 00:04:14,140 --> 00:04:21,880 Por lo tanto, importaré esta plataforma API de React Native y también necesitaré mi color, así que también importaré colores de 49 00:04:21,910 --> 00:04:30,790 Constantes / colores, eso también es necesario porque con eso, ahora podemos verificar si el sistema operativo de la plataforma es Android y 50 00:04:30,790 --> 00:04:37,120 si es así, podemos asegurarnos de que el color de fondo del encabezado sea nuestro color 51 00:04:37,120 --> 00:04:39,400 primario, de lo contrario no 52 00:04:39,580 --> 00:04:46,600 estableceré ningún color, quiero usar el aspecto transparente predeterminado que usa iOS y aquí también configurar un color 53 00:04:46,600 --> 00:04:53,080 de tinte de encabezado para el texto allí, nuevamente buscando la plataforma porque si la plataforma es 54 00:04:53,080 --> 00:04:59,560 Android ya que tenemos un fondo sólido, estableceré el color del tinte en blanco, para iOS haré 55 00:04:59,590 --> 00:05:06,520 lo contrario, allí lo estableceré en mi color primario. Ahora que está aquí, no tengo fuentes personalizadas en este 56 00:05:06,520 --> 00:05:12,790 proyecto, por supuesto, podría agregar algunas si lo desea. Con esta configuración, podemos exportar nuestro contenedor de aplicaciones que, por 57 00:05:12,790 --> 00:05:21,230 lo tanto, debemos crear con crear un contenedor de aplicaciones y pasar el navegador de lugares aquí. Ahora que está configurada la navegación, por supuesto, 58 00:05:21,230 --> 00:05:24,620 en la aplicación. 59 00:05:24,620 --> 00:05:24,620 js ahora podemos usar eso. 60 00:05:24,620 --> 00:05:32,200 Entonces, aquí deberíamos importar el navegador de lugares desde la carpeta de navegación, navegador de lugares, por lo tanto, ya no necesitamos importar la 61 00:05:32,240 --> 00:05:39,920 vista aquí, por lo tanto, solo podemos devolver el navegador de lugares. Como no estoy cargando ninguna fuente personalizada, tampoco 62 00:05:39,920 --> 00:05:44,540 necesito hacer que esta aplicación cargue cosas que hicimos anteriormente 63 00:05:44,540 --> 00:05:49,610 o en otros módulos, aquí puedo devolver esto desde el principio. 64 00:05:51,500 --> 00:05:58,660 Ahora, en estas pantallas aquí, en la pantalla de la lista de lugares, importaré React de React, importaré un par de cosas de 65 00:05:58,700 --> 00:06:01,190 React Native, probablemente una vista, un texto 66 00:06:01,220 --> 00:06:02,070 y una 67 00:06:02,120 --> 00:06:08,570 hoja de estilo y luego podemos ver si necesitamos algo más más tarde desde React Native y luego configure la 68 00:06:08,600 --> 00:06:15,740 constante aquí, la pantalla de lista de lugares es un componente React normal que recibe accesorios y al final devuelve algún contenido, 69 00:06:15,740 --> 00:06:19,550 aquí solo devolveré una vista con un texto de pantalla de lista 70 00:06:19,550 --> 00:06:24,330 de lugares, así que solo algunos contenido ficticio por ahora y también tener la hoja 71 00:06:24,590 --> 00:06:30,230 de estilo configurada aquí con la hoja de estilo. crear y, en última instancia, 72 00:06:31,190 --> 00:06:34,800 exportar la pantalla de la lista de lugares. 73 00:06:34,800 --> 00:06:37,420 Y este será el esqueleto base que podemos usar para cada 74 00:06:37,430 --> 00:06:40,880 vista, por lo que lo colocaré en cada vista y simplemente ajustaré este nombre aquí. 75 00:06:40,880 --> 00:06:48,250 Así que aquí tenemos la pantalla de detalles del lugar que quiero usar y luego copiarla también en la nueva pantalla de lugar 76 00:06:48,850 --> 00:06:52,720 y reemplazar este nombre aquí en los tres lugares y, por 77 00:06:52,720 --> 00:06:58,300 último, pero no menos importante, también colocar esto en la pantalla del mapa para tenerlo aquí como bien 78 00:06:58,300 --> 00:07:02,650 y luego, por supuesto, agregaremos el contenido real a lo largo de este módulo. 79 00:07:02,800 --> 00:07:05,530 Esas son las pantallas creadas, si ahora 80 00:07:05,530 --> 00:07:12,190 guardamos eso y lo ejecutas con npm start o con expo start y lo ejecutas en tu emulador 81 00:07:12,220 --> 00:07:18,660 o emuladores favoritos, una vez que termine de construir, deberíamos ver la pantalla de la lista de 82 00:07:18,990 --> 00:07:21,020 lugares al final, como esta. 83 00:07:21,120 --> 00:07:26,790 Ahora, por supuesto, no tenemos un título de encabezado aquí, así que asegurémonos de configurar uno, también en 84 00:07:27,180 --> 00:07:34,830 Android, yendo a la pantalla de la lista de lugares y allí, podemos agregar opciones de navegación de la pantalla de lista de lugares y 85 00:07:34,830 --> 00:07:42,690 configurarlo en un objeto estático aquí donde podemos agregar un título de encabezado de todos los lugares o algo así y, por supuesto, una vez que 86 00:07:42,690 --> 00:07:47,840 se vuelve a cargar, vemos ese título aquí en la pantalla de la lista de lugares. 87 00:07:48,030 --> 00:07:55,260 Esa es la configuración básica de pantalla que necesitaremos para este módulo aquí. Con eso antes de profundizar en el contenido 88 00:07:55,260 --> 00:07:58,530 de las otras pantallas, asegurémonos de que también 89 00:07:58,650 --> 00:08:04,020 tengamos un botón más aquí en el encabezado que nos lleve a la 90 00:08:04,020 --> 00:08:10,770 nueva pantalla de lugar porque es ahí donde podemos comenzar a aprovechar funcionalidades de dispositivos nativos 91 00:08:10,770 --> 00:08:13,010 y con lugares adicionales. 92 00:08:13,090 --> 00:08:20,200 Ahora, por supuesto, sabe cómo agregar un botón al encabezado de su navegador, todo lo que necesita hacer es instalar un nuevo paquete 93 00:08:20,200 --> 00:08:27,040 con npm install --save y ese es el paquete de botones de encabezado react-navigation que usamos un par de veces a lo 94 00:08:27,040 --> 00:08:32,170 largo de este curso y lo usaré exactamente de la misma manera que lo hice en 95 00:08:32,170 --> 00:08:33,790 el resto del curso. 96 00:08:33,880 --> 00:08:39,880 Por lo tanto, crearé una carpeta de componentes en la que pueda configurar 97 00:08:40,000 --> 00:08:51,020 mi propio componente de botón de encabezado para tener ese componente de botón reutilizable preconfigurado y en ese componente, importo el botón de encabezado 98 00:08:51,080 --> 00:09:02,460 de este paquete de botones React header header que acabamos de instalar. Importe Ionicons desde expo / vector-icons, un paquete que quizás desee instalar 99 00:09:02,510 --> 00:09:07,110 en caso de que obtenga errores aquí con npm install 100 00:09:07,110 --> 00:09:18,840 --save y también importe los colores constantes desde la carpeta de constantes y allí, el archivo de colores y luego aquí tengo un botón de encabezado 101 00:09:18,840 --> 00:09:24,870 personalizado de componente regular que recibe accesorios que devuelven algunos jsx y aquí 102 00:09:24,880 --> 00:09:31,260 quiero devolver el botón de encabezado que estamos importando, pero ahora lo configuraremos según 103 00:09:31,260 --> 00:09:32,750 nuestros requisitos. 104 00:09:33,000 --> 00:09:39,240 En primer lugar, reenviando todos los accesorios y luego podemos configurar el componente del icono en 105 00:09:39,270 --> 00:09:40,480 ionicon para 106 00:09:40,590 --> 00:09:47,250 que se use, establezca el tamaño del icono aquí tal vez en 23 porque creo que funcionó 107 00:09:47,250 --> 00:09:48,870 bastante bien hasta ahora 108 00:09:48,870 --> 00:09:57,240 y configuré el color y ahora Necesitaré otra importación, necesitaré importar la plataforma de React Native porque ahora quiero verificar la plataforma 109 00:09:57,600 --> 00:09:59,940 aquí y si la plataforma es 110 00:10:01,560 --> 00:10:07,470 Android, tendremos un fondo sólido, por lo que quiero usar el blanco como color del 111 00:10:07,800 --> 00:10:10,680 icono, de lo contrario, uso mi color primario. 112 00:10:10,740 --> 00:10:16,080 Ahora con eso, lo único que queda por hacer es exportar este botón de encabezado personalizado aquí y ahora podemos comenzar a 113 00:10:16,080 --> 00:10:20,600 usarlo en la pantalla de la lista de lugares. También allí como antes, 114 00:10:20,610 --> 00:10:29,280 importo otros dos paquetes de react-navigation-header-buttons, otras dos cosas de este paquete y que serían mis botones de encabezado 115 00:10:29,280 --> 00:10:36,480 y elemento, ambos deben importarse y, además, también podemos importar nuestros propio botón de encabezado personalizado 116 00:10:36,480 --> 00:10:42,810 ahora desde la carpeta de componentes y desde este archivo de botón de encabezado 117 00:10:42,810 --> 00:10:48,060 en el que acabamos de trabajar. Pero con eso importado, podemos cambiar nuestras 118 00:10:48,060 --> 00:10:53,880 opciones de navegación aquí para que sean dinámicas, donde tenemos esta función que nos da los datos de navegación 119 00:10:54,270 --> 00:11:00,750 y que finalmente devuelve este objeto de configuración porque esto también nos permitirá vincular el botón a alguna función que recibimos 120 00:11:00,750 --> 00:11:07,380 a través de parámetros de ruta porque aquí, quiero agregar el encabezado derecho para agregar mis botones de encabezado y, por supuesto, 121 00:11:07,380 --> 00:11:12,540 ahora también es un patrón que hicimos muchas veces a lo largo de este curso, agregamos 122 00:11:12,540 --> 00:11:19,560 los botones de encabezado como este y tenemos el elemento allí. En el componente de botones de encabezado, podemos establecer el 123 00:11:19,590 --> 00:11:27,330 componente de botón de encabezado y apuntar a nuestro componente de botón de encabezado personalizado aquí y en el elemento, ahora establecemos un 124 00:11:27,330 --> 00:11:31,930 título, como agregar lugar y establecemos un nombre de icono aquí que depende de 125 00:11:32,010 --> 00:11:39,870 la plataforma, por lo que por lo tanto, importaré esta API de plataforma aquí desde React Native y ahora podemos verificar si el 126 00:11:39,960 --> 00:11:48,090 sistema operativo de la plataforma es Android, si ese es el caso, entonces quiero configurar esto en md add, de lo contrario a ios 127 00:11:48,240 --> 00:11:52,560 add que agrega un botón más para el plataforma específica, por lo que 128 00:11:52,560 --> 00:11:58,290 sigue el aspecto específico de esa plataforma. También necesitamos agregar la función onPress y allí, 129 00:11:58,290 --> 00:12:05,160 si tocamos esto, simplemente quiero navegar con el método de navegación aquí y es por eso que necesitamos tener esta 130 00:12:05,160 --> 00:12:11,310 función dinámica aquí, para que tengamos acceso a los datos de navegación y luego a la navegación, navegar 131 00:12:11,430 --> 00:12:19,990 a un nuevo lugar y un nuevo lugar aquí, por supuesto, es mi identificador en el navegador de lugares de esta nueva pantalla de lugar. 132 00:12:20,040 --> 00:12:24,780 Entonces, con eso, tenemos una forma de ir a esa pantalla y, por lo tanto, si guardamos 133 00:12:24,780 --> 00:12:25,960 esto, deberíamos poder hacerlo. 134 00:12:26,100 --> 00:12:32,800 Obviamente recibo un error porque en mi componente del botón de encabezado, ya que tengo un componente React allí, importar React 135 00:12:32,920 --> 00:12:38,680 from React no parece ser la peor idea, así que arreglemos rápidamente eso aquí en el componente 136 00:12:38,680 --> 00:12:45,290 del botón de encabezado, pero ahora con eso , a medida que se vuelve a cargar, tenemos este botón más y 137 00:12:45,290 --> 00:12:51,760 podemos ir a la pantalla de nuevos lugares, a la nueva pantalla de lugares, también aquí en Android, por supuesto. 138 00:12:51,980 --> 00:12:57,680 Ahora en esa nueva pantalla de lugar, por lo tanto, también podemos agregar opciones de navegación para establecer un 139 00:12:58,070 --> 00:13:04,010 título, nuevas opciones de navegación de pantalla de lugar, configurarlo en algún objeto estático por el momento porque en este 140 00:13:04,010 --> 00:13:11,210 momento no necesitamos que esto sea una función, no No necesitamos acceso a los datos de navegación, solo necesitamos configurar el título del encabezado para 141 00:13:11,930 --> 00:13:17,340 agregar lugar y con eso si lo guardamos, obviamente si vamos allí, vemos ese título en el encabezado. 142 00:13:17,540 --> 00:13:20,440 Esta es esta configuración básica aquí, ahora podemos 143 00:13:20,570 --> 00:13:25,430 trabajar en esa pantalla de agregar lugar para asegurarnos de que podemos agregar un lugar.