Entonces, para este módulo, adjunto, encontrará nuevamente un proyecto de inicio simple.
Ahí tienes la aplicación. archivo js con una vista
vacía, por lo que no sucede mucho allí.
Obtiene una carpeta de constantes con un color básico que configuré para usted y eso es todo.
Aparte de eso, no hay nada interesante aquí, es una aplicación
muy básica que ahora utilizaremos para construir esta aplicación que acabo de esbozar.
Ahora, por supuesto, puede seguir adelante y construir los conceptos básicos por
su cuenta, por lo que estas tres pantallas diferentes que al final necesitamos o cuatro pantallas diferentes, una para todos los
lugares, una para los detalles del lugar, una para crear una nueva lugar y uno para el mapa de
pantalla completa que también queremos mostrar, absolutamente puede hacer eso y construir el esqueleto base para estas pantallas
por su cuenta, también configurar la navegación básica porque, por supuesto, esto es todo lo que ya hicimos varias
veces en este curso.
También es algo con lo que comenzaré en las próximas conferencias en caso de que quiera
seguir o comparar su solución con la mía y, a continuación, profundizaremos
en la carne de este módulo, profundizaremos en cómo agregar capacidades de dispositivos nativos . Entonces, comencemos con lo
básico.
Agregaré una nueva pantalla de carpetas con las cuatro pantallas que quiero tener y ese sería el archivo
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
pantalla completa mapa y los completaré con contenido a lo largo de este módulo, pero
estas son las cuatro pantallas básicas que necesitaré.
También agregaré una carpeta de navegación para que podamos configurar la navegación allí
y aquí configuraré mi PlacesNavigator. archivo js. Ahora, en el proyecto inicial que proporcioné,
React Navigation y todas
sus dependencias ya están instaladas, por lo que si está usando
eso, no necesita instalarlo manualmente; de lo contrario, si está usando su propio proyecto inicial, asegúrese
de instale React navigation con npm instale React navigation y también asegúrese de instalar estas dependencias adicionales aquí para
asegurarse de que React navigation funciona con expo.
Entonces, con eso instalado, ahora, por supuesto, podemos configurar la navegación aquí en el navegador de lugares y para eso, aquí
importaré desde React navigation y lo que importaré es, por supuesto, la función de
creación del navegador de pila, así que cree el navegador de pila
y también cree un contenedor de aplicaciones que también debemos hacer porque tendremos que hacer ambas cosas: crear un
navegador de pila y configurar el contenedor de aplicaciones a partir de entonces.
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
la carpeta de pantallas y allí, es la pantalla de lista de lugares. También necesitaremos la pantalla de detalles del lugar, por
supuesto, la pantalla de detalles del lugar que se importa desde las pantallas y la pantalla de detalles
del lugar y, obviamente, las otras dos pantallas.
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
de mapa aquí desde la carpeta de pantallas y luego esa sería la pantalla de mapa.
Ahora podemos configurar nuestro navegador de pila aquí y almacenaré este navegador de lugares de forma constante y, como también lo aprendiste,
ahora estamos asignando identificadores a nuestras pantallas, por lo que quizás tengamos
el identificador de lugares asignado a la pantalla de lista de lugares , obtuvimos el identificador de detalle de lugar
asignado a la pantalla de detalle
de lugar, también obtuvimos el nuevo identificador de lugar asignado a la pantalla de nuevo lugar y, por último, pero no menos
importante, quizás el mapa asignado a la pantalla de mapa. Y con eso, podemos configurar algunas opciones de navegación predeterminadas aquí,
así que pasaré un segundo argumento y, por supuesto, configurarlo es totalmente opcional, pero agregaré opciones de
navegación predeterminadas a cada pantalla, por lo tanto, y quiero definir mi estilo de encabezado aquí y asegúrese de que estamos usando
un color de fondo dependiendo de si estamos ejecutando Android o no.
Por lo tanto, importaré esta plataforma API de React Native y también necesitaré mi color, así que también importaré colores de
Constantes / colores, eso también es necesario porque con eso, ahora podemos verificar si el sistema operativo de la plataforma es Android y
si es así, podemos asegurarnos de que el color de fondo del encabezado sea nuestro color
primario, de lo contrario no
estableceré ningún color, quiero usar el aspecto transparente predeterminado que usa iOS y aquí también configurar un color
de tinte de encabezado para el texto allí, nuevamente buscando la plataforma porque si la plataforma es
Android ya que tenemos un fondo sólido, estableceré el color del tinte en blanco, para iOS haré
lo contrario, allí lo estableceré en mi color primario. Ahora que está aquí, no tengo fuentes personalizadas en este
proyecto, por supuesto, podría agregar algunas si lo desea. Con esta configuración, podemos exportar nuestro contenedor de aplicaciones que, por
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,
en la aplicación.
js ahora podemos usar eso.
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
vista aquí, por lo tanto, solo podemos devolver el navegador de lugares. Como no estoy cargando ninguna fuente personalizada, tampoco
necesito hacer que esta aplicación cargue cosas que hicimos anteriormente
o en otros módulos, aquí puedo devolver esto desde el principio.
Ahora, en estas pantallas aquí, en la pantalla de la lista de lugares, importaré React de React, importaré un par de cosas de
React Native, probablemente una vista, un texto
y una
hoja de estilo y luego podemos ver si necesitamos algo más más tarde desde React Native y luego configure la
constante aquí, la pantalla de lista de lugares es un componente React normal que recibe accesorios y al final devuelve algún contenido,
aquí solo devolveré una vista con un texto de pantalla de lista
de lugares, así que solo algunos contenido ficticio por ahora y también tener la hoja
de estilo configurada aquí con la hoja de estilo. crear y, en última instancia,
exportar la pantalla de la lista de lugares.
Y este será el esqueleto base que podemos usar para cada
vista, por lo que lo colocaré en cada vista y simplemente ajustaré este nombre aquí.
Así que aquí tenemos la pantalla de detalles del lugar que quiero usar y luego copiarla también en la nueva pantalla de lugar
y reemplazar este nombre aquí en los tres lugares y, por
último, pero no menos importante, también colocar esto en la pantalla del mapa para tenerlo aquí como bien
y luego, por supuesto, agregaremos el contenido real a lo largo de este módulo.
Esas son las pantallas creadas, si ahora
guardamos eso y lo ejecutas con npm start o con expo start y lo ejecutas en tu emulador
o emuladores favoritos, una vez que termine de construir, deberíamos ver la pantalla de la lista de
lugares al final, como esta.
Ahora, por supuesto, no tenemos un título de encabezado aquí, así que asegurémonos de configurar uno, también en
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
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
se vuelve a cargar, vemos ese título aquí en la pantalla de la lista de lugares.
Esa es la configuración básica de pantalla que necesitaremos para este módulo aquí. Con eso antes de profundizar en el contenido
de las otras pantallas, asegurémonos de que también
tengamos un botón más aquí en el encabezado que nos lleve a la
nueva pantalla de lugar porque es ahí donde podemos comenzar a aprovechar funcionalidades de dispositivos nativos
y con lugares adicionales.
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
con npm install --save y ese es el paquete de botones de encabezado react-navigation que usamos un par de veces a lo
largo de este curso y lo usaré exactamente de la misma manera que lo hice en
el resto del curso.
Por lo tanto, crearé una carpeta de componentes en la que pueda configurar
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
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
en caso de que obtenga errores aquí con npm install
--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
personalizado de componente regular que recibe accesorios que devuelven algunos jsx y aquí
quiero devolver el botón de encabezado que estamos importando, pero ahora lo configuraremos según
nuestros requisitos.
En primer lugar, reenviando todos los accesorios y luego podemos configurar el componente del icono en
ionicon para
que se use, establezca el tamaño del icono aquí tal vez en 23 porque creo que funcionó
bastante bien hasta ahora
y configuré el color y ahora Necesitaré otra importación, necesitaré importar la plataforma de React Native porque ahora quiero verificar la plataforma
aquí y si la plataforma es
Android, tendremos un fondo sólido, por lo que quiero usar el blanco como color del
icono, de lo contrario, uso mi color primario.
Ahora con eso, lo único que queda por hacer es exportar este botón de encabezado personalizado aquí y ahora podemos comenzar a
usarlo en la pantalla de la lista de lugares. También allí como antes,
importo otros dos paquetes de react-navigation-header-buttons, otras dos cosas de este paquete y que serían mis botones de encabezado
y elemento, ambos deben importarse y, además, también podemos importar nuestros propio botón de encabezado personalizado
ahora desde la carpeta de componentes y desde este archivo de botón de encabezado
en el que acabamos de trabajar. Pero con eso importado, podemos cambiar nuestras
opciones de navegación aquí para que sean dinámicas, donde tenemos esta función que nos da los datos de navegación
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
a través de parámetros de ruta porque aquí, quiero agregar el encabezado derecho para agregar mis botones de encabezado y, por supuesto,
ahora también es un patrón que hicimos muchas veces a lo largo de este curso, agregamos
los botones de encabezado como este y tenemos el elemento allí. En el componente de botones de encabezado, podemos establecer el
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
título, como agregar lugar y establecemos un nombre de icono aquí que depende de
la plataforma, por lo que por lo tanto, importaré esta API de plataforma aquí desde React Native y ahora podemos verificar si el
sistema operativo de la plataforma es Android, si ese es el caso, entonces quiero configurar esto en md add, de lo contrario a ios
add que agrega un botón más para el plataforma específica, por lo que
sigue el aspecto específico de esa plataforma. También necesitamos agregar la función onPress y allí,
si tocamos esto, simplemente quiero navegar con el método de navegación aquí y es por eso que necesitamos tener esta
función dinámica aquí, para que tengamos acceso a los datos de navegación y luego a la navegación, navegar
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.
Entonces, con eso, tenemos una forma de ir a esa pantalla y, por lo tanto, si guardamos
esto, deberíamos poder hacerlo.
Obviamente recibo un error porque en mi componente del botón de encabezado, ya que tengo un componente React allí, importar React
from React no parece ser la peor idea, así que arreglemos rápidamente eso aquí en el componente
del botón de encabezado, pero ahora con eso , a medida que se vuelve a cargar, tenemos este botón más y
podemos ir a la pantalla de nuevos lugares, a la nueva pantalla de lugares, también aquí en Android, por supuesto.
Ahora en esa nueva pantalla de lugar, por lo tanto, también podemos agregar opciones de navegación para establecer un
título, nuevas opciones de navegación de pantalla de lugar, configurarlo en algún objeto estático por el momento porque en este
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
agregar lugar y con eso si lo guardamos, obviamente si vamos allí, vemos ese título en el encabezado.
Esta es esta configuración básica aquí, ahora podemos
trabajar en esa pantalla de agregar lugar para asegurarnos de que podemos agregar un lugar.