React Native: aprenda fazendo [2024]

1. Introducción: Bienvenido al curso React Native. En este curso aprenderemos a crear una aplicación de películas desde cero mediante el uso de una CLI de React Native. Y en este curso podrás ver catálogos de películas, y también algún slider en la parte superior dentro de la aplicación. Y además podrás navegar a alguna película y leer datos o esa película y mostrar alguna información al respecto, como las categorías de la calificación de la película y alguna descripción. Y además, verás su fecha de estreno. Por supuesto tendremos un botón de reproducción donde podrás reproducir la película y podrás reproducir algún video con indicadores de carga. Y podrás rotar tu teléfono y verás cómo es quinto y adaptarte directamente para tener una pantalla completa de tu aplicación directamente cuando estamos volteando su forma es todo de tu mano. Y además, haremos exactamente algo así como buscar películas de una base de datos real que esté conectada a Internet. Y puedes buscar, por ejemplo, algunas películas y puedes exhibir esas películas y puedes visitarlas para ver su calificación y alguna información sobre esta película. Por ejemplo, estoy buscando alguna película y la conseguiré, y luego obtendré toda la información al respecto. Y además no puedo tocarla. Por supuesto que puedes tener mucha experiencia con este curso. Aprenderás mucho. Podrás tener esta aplicación en tu portafolio. Puedes presentarlo cuando tengas una entrevista de trabajo o incluso cuando tengas un cliente para mostrar esta aplicación a tus clientes para que puedas atraerlos y tener algunas aplicaciones para ellos. Además, no me gustan sus cursos los cuales son balling, como quién va teóricamente y verás qué es componente, qué es servicio, etcétera. Pero me gusta hacer algo poco práctico. A mí me gusta ver algo frente que me está haciendo feliz al final y haciendo alguna aplicación. Yo también puedo presentárselo a mis amigos. Cómo vamos a llamar a bibliotecas externas, cómo podemos usar componentes de React Native. El bonito de este curso, No está basado en Expo, que es exactamente para principiantes. Ahora las empresas y empresas profesionales, están utilizando en realidad sólo como React Native CLI. Espero que seas feliz después de inscribir este curso porque al final tendrás alguna aplicación entre tus manos y no siempre puedes estar orgulloso de ello. Y por supuesto, estaré muy contento de contestar su pregunta. Y discutimos muchas cosas juntos. Entonces, ¿estás listo? Empecemos. 2. Requisitos de curso: De acuerdo, ¿quién puede tomar este curso o cuáles son los requisitos del curso? Entonces, antes que nada, no necesitas saber nada sobre React native. Te mostraré todas las posibilidades para construir una aplicación usando React native, claro, pero no te enseñaré todo sobre React native. Te enseñaré lo que necesitamos para nuestra aplicación en este curso también. No necesitas conocer ningún conocimiento de los revisores de pares sobre el desarrollo móvil. Solo necesitas saber sobre algunos conceptos básicos de estilo pequeño, que también voy a explicar durante el curso. Y ahora lo que debes saber, no debes JavaScript porque sabes, React Native es construir sobre JavaScript y puedes usar JavaScript para generar aplicación nativa. Y además, necesitas conocer React. React es también un marco que se construye sobre JavaScript, pero este React está dirigido a ser utilizado en aplicaciones web, no en teléfono móvil. ¿ Cómo está haciendo React Native, incluso eso, voy a explicar cuáles son los componentes, cuáles son los apoyos, y cuáles son los estados en este curso? Entonces de esa manera, aprenderás haciéndolo, no te explicaré todo React Native. Yo sólo voy a explicar lo que necesitamos para este curso. Y estamos construyendo un múltiples cursos para que puedas llevarlos todos. Verás lo práctico y fácil de aprender React Native sin obtener un curso de documentación e ir alrededor de 20 horas. Y acabas de aprender sólo cosas teóricas. El mejor modo es aprender práctico, haciendo algo práctico siempre para aprender más y más. 3. Qué es el natural de react Native: De acuerdo, Como te dije antes, React Native es similar a reaccionar, pero está construido para desarrollar aplicación móvil. Entonces como podemos decir, que la construcción de aplicaciones nativas usando JavaScript. Por lo que puedes usar tus habilidades en JavaScript para construir aplicación para formularios como iOS y Android. Y son realmente aplicaciones nativas. No son aplicaciones web las cuales son responsive, que están trabajando en escritorio y también en teléfono móvil. Estamos usando algunas habilidades CSS para que sea sensible como una aplicación para trabajar en el teléfono. No, son realmente, realmente nativos. Entonces como ves, podemos construir dos aplicaciones mediante el uso de un lenguaje, que es, O por ejemplo, un framework usando JavaScript, que funcionará en Android como aplicación nativa, en iOS como nativo aplicación también. Por lo que la mayoría de las empresas hoy en día van hacia adelante React Native porque en ese caso estás ahorrando dinero por contratar a un equipo en iOS para conocer, por ejemplo, Xcode o el idioma que están relacionados con iOS. Y también para contratar otro tema que conoce Java, que también se utiliza para construir una aplicación Android. No, solo necesitas contratar a un equipo que conozca JavaScript y conceptos básicos de reaccionar para construir dos aplicaciones al mismo tiempo usando React Native. Por lo que de esa manera, la empresa ahorrará mucho dinero. Es por eso que va hacia adelante que bien, tal vez me lo digas, vale, esto es peligroso, como cómo puedo depender de JavaScript. ¿ Y si mi aplicación está construida y tiene mucha seguridad y debe ser precisa. Por lo que realmente necesito construirlo como nativo. De acuerdo, te voy a dar ejemplo de las mejores empresas que usan React Native. Por ejemplo, Facebook, Instagram, y también este acorde, cielo, Pinterest, Tesla. Por lo que todas esas empresas están utilizando hoy en día React Native para sus aplicaciones en ambas plataformas, Android e iOS. Entonces de esa manera, no necesitas contratar mucho conocimiento sobre iOS o Android. Si conoces JavaScript, garantizo que puedes implementar algunas aplicaciones back-end. Por ejemplo, sibilancias conocen NodeJS, y también aplicación móvil usando React Native y reaccionar. 4. Expo CLI o CLI Nativo al que se reacción: Estoy seguro de que cuando estabas leyendo sobre React Native, se oye hablar de exportación. Exportación es también interfaz de línea común para construir proyectos de React Native. Y está proporcionando muchas herramientas y componentes que están listos para ser utilizados en React Native. La principal diferencia entre React Native y export está en la estructura de código. Por ejemplo, como se ve a la izquierda, tenemos un proyecto React Native. Y vemos que tenemos dos carpetas las cuales contienen proyecto Android e iOS. Este es el proyecto que proyecto real de Android, que está dentro de él, java o Katlyn. Y también tenemos el iOS, que está escrito con un veloz. Entonces en este caso, cuando creas un proyecto React Native, estás creando también, el proyecto Android e iOS. Y de esta manera tendrás acceso en tu proyecto a esos módulos dentro de Android e iOS. Esto lo que le da a React Native CLI, esa realidad de usar las bibliotecas nativas. Pero en Expo, generarás sólo un proyecto JavaScript muy puro, y puedes usar sólo el JavaScript aquí, porque la exportación se utiliza también para construir sus propias bibliotecas nativas y componentes nativos propios. Muchas personas hoy en día prefieren usar React Native. React Native es más estable y más eficiente. Y veremos cuáles son los beneficios de React Native Expo es para principiantes, como les diré al final de esta conferencia. Entonces si vamos a la CLI React Native, puedes agregar módulos nativos los cuales están escritos Java, Objective-C, también con el swift. Y también puedes agregarlas directamente a tu proyecto. Y puedes usarlos en JavaScript como biblioteca JavaScript. Y además configurar nuestro proyecto es fácil y se puede hacer en un minuto. Pero claro, configurar el entorno lleva un poco de tiempo. soportan más terceras bibliotecas. Tendrán muchas terceras bibliotecas escritas con React Native CLI, y ustedes chicos, ustedes las en su proyecto. El mayor beneficio y el bonito beneficio de React Native CLI que tienes menos tamaño de archivos de producción. Por ejemplo, si tienes construyendo una aplicación con React Native CLI, verás que tienes, por ejemplo, diez megabytes del archivo APK y así para el iOS, bien. Pero cuando construyes un proyecto con expo, ese archivo o ese archivo de Producción vendrá mucho más grande y tiene su mayoría 60 o 70 megabyte en morada de la CLI React Native, que solo tiene 10 megabyte. Esto porque la exportación también está agregando los archivos y los módulos y los componentes firman el archivo APK para que pueda ser utilizado en la aplicación. Pero aquí, cuando estamos usando módulos nativos que ya están en tu sistema o en tu teléfono, entonces no necesitas tener un gran archivo de producción también. He construido un proyecto el cual se hace como un e-sharp e-commerce build con exportación. Y también hay muchos cursos sobre Expo y no hay tanto cursos sobre React Native CLI. Por lo que prefiero hacer este curso con React Native CLI para ver el beneficio en la diferencia entre éste y exportar. Y por supuesto, si quieres, puedes inscribirte a nuestro curso que es hablar y construir Ali con Expo, que está construyendo un e-sharp en teléfono móvil. Entonces aquí, hay algunas recomendaciones como del proyecto React Native. Como ves, dice que si eres nuevo en desarrollo móvil, la forma más fácil de empezar es con expo CLI. Pero si ya estás familiarizado con el desarrollo móvil, es posible que quieras usar React Native CLI. De acuerdo, tal vez me preguntes, dijiste al principio que no necesito ningún requisito de desarrollo móvil. De acuerdo, sí, de verdad No necesitas, por ejemplo, para este proyecto que vamos a construir, no necesitas tantas habilidades en el desarrollo móvil. Simplemente te enseñaré las cosas más importantes, cómo importar módulos, bibliotecas nativas, y usarlas en tu proyecto. Eso es todo. No vamos a editar muchas cosas en las bibliotecas nativas. Nosotros sólo vamos a llamarlos a nuestro proyecto. Y por supuesto, no hay un beneficio bueno de como usar React Native CLI que necesitas instalar Xcode o Android Studio para ejecutar tu proyecto en tu teléfono. Pero de esta manera, garantizas que realmente estás probando tu herramienta sin como un middleware el cual está construido de manera no nativa. Hace algunos días, pregunté en React Native community en Facebook, ¿qué prefieres para el desarrollo de aplicación móvil usando React Native? En la mayoría del juego de respuestas y votos con React Native CLI. Y como ves en algunas respuestas de expertos, dijeron que la exportación es como usar la rueda de entrenamiento para una bicicleta, eventualmente tendrás que quitárselas. Y además, otra respuesta fue, sigo viendo la exportación es para principiantes. Y por supuesto, como te dije, si eres principiante, solo puedes inscribirte al otro curso donde estamos construyendo E-sharp. Por lo que no se puede aprender realmente práctico usando Expo. 5. Instalación de nodejs: De acuerdo, para empezar a construir nuestro entorno, necesitamos primero NodeJS. Nodejs es una herramienta para proveer e instalar bibliotecas que necesitamos para que nuestro proyecto instale NodeJS, Solo necesitas ir a la página web no js.org. Y aquí encontrarás dos métodos de instalación. Una de ellas son las últimas características, que se llama actual, también recomendado para la mayoría de los usuarios. Siempre, voy siempre por, recomendado para la mayoría de los usuarios, que es como más estable. Y me está brindando las herramientas más importantes que necesito para mi desarrollo y que encaja con las bibliotecas más actualizadas las cuales están disponibles. Y por supuesto, NodeJS está disponible para todos los sistemas, como no solo para Windows o Mac, está disponible para Linux, para todos los demás como sistemas operativos. Por lo que solo seleccionas la tuya y luego asegúrate de que has instalado aquí. Después de eso, abrimos la instalación y solo vamos como siguiente, siguiente con ella, como instalar cualquier aplicación y se instalará en tu máquina. Entonces eso es todo. Ya lo tengo en mi máquina y lo tengo ya instalado. Por lo que no necesito volver a instalarlo. Entonces después de eso, abres la terminal para que diez milenios la puedas abrir como una terminal en Mac book es, puedes abrir las aplicaciones y checas para terminal o en Windows, puedes ejecutar y luego encontrar línea de comandos, que se llama línea común, luego la línea de comando estándar. Y luego necesitas comprobar qué versión de Node.JS tienes. Entonces lo más importante que quiero que estés seguro de que tienes la versión correcta de Node. Entonces de lo contrario no podrás ejecutar la mayoría de los comentarios si tienes versión antigua, cómo podemos conocer la versión que tenemos después de la instalación, podemos ir a la terminal como te dije. Y pones como nodo menos v. Y con eso, puedes ver esa versión que tienes, es mejor desarrollar con React Native CLI para usar la versión que es 12 y superior. Así que asegúrate de tener la versión 12 y más. Y luego podrás codificar sin ningún problema con React Native CLI. 6. Preparación del entorno de desarrollo: De acuerdo, Ahora vamos a armar nuestro entorno. Te consejo siempre que sigas la documentación que es proporcionada por React Native formalmente. Por lo que cuando vayas allí, verás todos los pasos que necesitas para la instalación de tu entorno. Entonces, en primer lugar, vas a React Native dot dev, y luego vas a los docs. Aquí verás algo que se llama entornos configurados. Y esto estará actualizado, siempre basado en las versiones, basado en los sistemas operativos de Android e iOS. En base a eso, verás siempre dejar la documentación más reciente. Te mostraré cómo podemos seguirlo. En primer lugar, como les dije, tenemos que seguir no Expo CLI, vamos a trabajar con React Native CLI, que es la más preferida por la mayoría de los desarrolladores móviles. Pero claro, si eres principiante, prefiero que vayas a mi curso el cual está relacionado sobre trabajar con Expo. Y he construido ahí todo el entorno que se necesita para trabajar con expertos. Pero ahora trabajaremos con React Native CLI. Después vamos al sistema operativo. El sistema operativo, como ves, está disponible para Mac OS, Windows y Linux. Trabajaré aquí con Mac OS. Por supuesto, también puedes seguir Windows. Todos ellos son iguales, pero con pequeñas diferencias como configurar los buffers que queremos para ejecutar nuestros comentarios. Pero como les dije, siempre es mejor seguir la documentación de las versiones. Y además, necesitas apuntar también al sistema operativo para el que vas a desplegar. Por supuesto, vamos a trabajar con Android e iOS al mismo tiempo. Y ambos tienen una instalación diferente. Empezaré ahora con Android. Entonces primero que nada, iremos al Mac OS, luego vamos al Android objetivo, y luego instalamos las dependencias como tenemos aquí, un nodo. Y necesitamos instalar otras cosas, que voy a explicarlo con detalle. Por lo que en primer lugar, vamos a trabajar con el Android, como ven aquí en la documentación y en la conferencia. Después de eso, vamos a trabajar con iOS para ver cómo también podemos ejecutar iOS. Desafortunadamente, como en Windows, cuando quieres trabajar en Windows y tienes iOS, no puedes soportar la implementación o desarrollo de la aplicación iOS. Esto porque esa aplicación iOS necesita ejecutar algo llamado Xcode. Y Xcode es requerido y sólo está instalado en el sistema Mac. Entonces para eso estoy usando a veces una VM, máquina virtual VMware. Estoy instalando Mac OS en mi Windows, y luego puedo trabajar con iOS. De esa manera. Si no tienes MacBook, puedes instalar la máquina virtual. Hay muchas formas de ejecutar una máquina virtual. Simplemente Google it y lo encontrarás de inmediato y verás cómo puedes instalar Máquina Virtual de Michael S en Windows. Por eso estoy haciendo este curso con macOS actualmente. Entonces es más general. Para que podamos trabajar con Android e iOS en su mismo tiempo. Por lo que en la próxima conferencia, les voy a mostrar cómo podemos iniciar la instalación para sistemas Android. 7. Configuración de Android: De acuerdo, en esta conferencia, vamos a platicar cómo configurar nuestro entorno Android. Entonces en primer lugar, vamos, como dijimos a su documentación, y luego vamos a Mac OS y luego a Android. Y en Android hay herramienta la cual se llama brew Homebrew, que está ayudando para la instalación de aplicación o algunas herramientas fácilmente a tu sistema Mac. Entonces si no instalaste Homebrew, Es mejor instalarlo. Te ayudará a instalar muchas aplicaciones sin molestarte en encontrar la instalación para ello. Entonces para eso, por ejemplo, quiero instalar Node como te mostré anteriormente, solo voy a mi terminal y ejecuto brew install Node, como te dije anteriormente. Entonces si vas aquí ves que brew install Node y también hay otra herramienta que se llama reloj hombre. Esta es muy gran herramienta. Está hecho por Facebook. Ir a ver tus cambios en tu sistema de archivos. Y es muy recomendable porque es mejor rendimiento para tu aplicación y viendo las actualizaciones en los archivos. Entonces intentemos instalar esto porque antes ya instalamos NADH, como les mostré, mi normalmente sin brebaje, pero ahora voy a instalar esto con hebreo. Entonces después de la instalación de Homebrew, exactamente lo mismo. Simplemente copia el comentario a la terminal y tendrás Homebrew. Después de eso, podrás usar su comentario azul, por lo que podrás instalar cualquier programa que esté disponible en ese paquete. Entonces intentemos, por ejemplo, instalar vigilante. Por lo que iré a la terminal y luego pegaré brew instalar vigilante. Y luego esperaremos la instalación. Y veremos que está instalando todo el programa para mí, incluyendo el camino está incluido, toda la información que se necesita para el desarrollo para utilizar esta herramienta. De acuerdo, Como ves esa instalación se había hecho. Entonces yo estaba como saltarme el video porque lleva algún tiempo. Por lo que ahora está instalado. Volvamos a la documentación y veamos qué tenemos aquí. Entonces también, necesitamos para eso un Kit de Desarrollo Java. Esto es necesario para los sistemas Android. Por lo que también necesitamos instalar eso. Lo mismo. Vamos a copiar este comando el cual se llama brew install. Y luego podemos ver Open JDK, que se requiere para eso. Y dijeron que si ya has instalado GDK en tu sistema, solo asegúrate de tener JDK 8 o más reciente. Entonces tienes que estar seguro de que tienes la versión 8, pero vamos a instalar eso con también homebrew. Por lo que voy a pegar de nuevo este comentario y esperar la instalación como vimos previamente con un Watchmen. A veces cuando necesitas como algunos privilegios para administrador , te está pidiendo contraseña. Por lo que solo necesitas poner la contraseña para tu sistema Mac, entonces se instalará fácilmente para tu máquina. Entonces como ven aquí, que se haya instalado con éxito. Entonces vamos de nuevo al siguiente paso. Entonces tenemos aquí después de esa instalación de Android Studio, Android Studio, no lo vamos a usar como editor, pero necesitamos el SDK de él. Necesitamos SDK, plataforma SDK, y también dispositivo virtual porque necesitamos ver también nuestros cambios de la aplicación, como cualquier aplicación que la ejecutes en Android. Necesitamos ver nuestros cambios en el algún formulario, algún teléfono virtual. Por lo que es mejor instalar Android SDK. Y también se requiere el SDK como módulos parte de React Native porque como dijimos, el anuncio nativo está utilizando los módulos que están disponibles en proyectos Android e iOS, como explicamos anteriormente. Por lo que antes que nada, necesitamos instalar y descargar Android Studio. Por lo que para instalar Android Studio, también es el mismo proceso donde necesitas descargar Android Studio. También está disponible para todos los sistemas operativos como por ejemplo, Windows y Linux, y también Chrome OS para todos los sistemas operativos. Por lo que es mejor elegir el que sea adecuado para tu sistema y luego lo descargas y el proceso de instalación es muy fácil solo tienes que ir siguiente, siguiente, siguiente, y luego tú, se instalará en tu máquina. Y vamos a ejecutar el Android Studio y tenemos que especificar algunas opciones como te voy a mostrar. Entonces como ven aquí, tengo el botón Descargar. Se necesitan alrededor de 900 megabyte. Y después de eso, lo instalas y luego ejecutas la aplicación. Ya lo tengo instalado en mi sistema operativo. Y cuando ejecutes Android Studio, verás esta ventana como necesitarás crear nuevo proyecto y has bloqueado o proyectado, o ¿quieres también a algún otro tipo de proyectos? ¿ Qué necesitamos hacer aquí para ir a Configurar, y aquí vamos a trabajar como las instrucciones de configurar el desarrollo. Usando React Native. Entonces vamos allá. Como ves aquí, dice como instalar el SDK de Android. Entonces después de que tengamos que ir a la, se ve esta ventana, tenemos que dar click en Configurar. Y luego como llegaron gerente y como vinieron gerente siempre se actualiza aquí. Siempre hay que seguir las versiones que están disponibles aquí. Por lo que es mejor instalarlos exactamente como se describen aquí siempre. Entonces cuando veas diferente versión en la documentación, entonces este video, tienes que seguir esa documentación también. Entonces voy al configure, voy al SDK Manager, y después tenemos que comprobar que tenemos Android Q. Así que necesitamos instalar este, como ven aquí. Entonces primero necesitamos tener Android 10. Q, claro que también puedes echar un vistazo al predeterminado instalado, porque cuando instalas Android Studio ocho viene por defecto con este. Por lo que es mejor seguir esa documentación y decir Android 10. Q. De acuerdo. ¿ Qué más? Dice que es necesario asegurarse de que se revisen los siguientes elementos. Por lo que necesitamos ampliar este Android 10 y revisamos la plataforma Android SDK. Entonces, ¿cómo podemos hacer eso? Vuelves a ir a esta ventana y luego dices seguro detalle del paquete. Entonces cuando hacemos clic en Mostrar detalle del paquete, ver más detalles al respecto. Por lo que nos dice, asegúrate de que la plataforma Android SDK 29 esté disponible o comprobada. Y también como ven aquí, tenemos algo más que es la imagen del sistema Intel X86 atom 64. Por lo que también necesitamos revisar esa. Ya ves que es por defecto no está comprobado, por lo que tenemos que comprobar eso también. Por lo que es importante consultar el detalle del paquete Sharp. Podrás ver todo el detalle del paquete también. Hay algo más que necesitamos estar seguros de ese Google API, Intel X86, sistema atom. También tenemos que comprobar eso también. Entonces cuando vamos aquí, así tenemos éste, entonces es muy importante seguir esa recomendación. A continuación dice que seleccione las herramientas del SDK y marque la casilla, Mostrar detalle del paquete también, y expanda las herramientas de compilación del SDK de Android. Entonces hagámoslo. Entonces vamos aquí y luego vamos a herramientas SDK, y luego vamos aquí y de nuevo decimos check packages like as recede show detail of the package. Entonces veremos como alguna versión, digamos qué versión dice que necesitamos seleccionar, asegúrate de que tengas 2902. Entonces tenemos que ir aquí y revisamos 2900 para tener que estar seguros de que también instalas este paquete. Por supuesto, tienes libertad para guardar todo esto, todo lo que puedes quitarlos en base al espacio que está disponible en tu máquina. Después de eso, hemos seleccionado todo. Como ves aquí, damos click en Aplicar. Por lo que seleccionamos todo como documentación. Hacemos click en Aplicar y se va a instalar las cosas que hemos seleccionado. Instalado, nuestra estimación es de dos gigabytes. Por lo que tienes que asegurarte de que realmente tienes el espacio porque son grandes y tienes que estar seguro de que todo está instalado correctamente porque tomará alrededor de 88 gigabyte. Entonces hacemos click Ok, y se va a descargar todas las cosas. Voy demasiado rápido este video para que no te tomes tanto tiempo. De acuerdo, esa instalación ahora exitosa, y como ven aquí, tenemos Android 10 como requisito está instalado, y también las herramientas SDK, como vimos anteriormente. Si vamos a mostrarle paquetes, nos aseguramos de que todo se instalara como se describe en la documentación. De acuerdo, hacemos click Ok, nos alejamos de Android Studio y luego vamos al siguiente paso donde está escrito configure variable de entorno doméstico Android. Y en Mac, lo haces de manera diferente a las ventanas. Por lo que necesitamos asegurarnos de que los comentarios de Android estén funcionando bien en mi máquina. Por lo que depende del tipo de tu terminal. Ahora estoy hablando de Mac, vale, Así que si quieres ver Windows, puedes saltarte un poco el video que te mostraré en Windows. Por lo que primero para Mac, debes ir a agregar las siguientes líneas a tu perfil de este bash de casa. Y aquí necesitamos editar este archivo y agregar esas líneas. Entonces, antes que nada, necesitamos asegurarnos de que realmente hemos instalado Android SDK en este camino. Entonces, ¿cómo podemos hacer eso? Primero vas al Finder en Mac, y luego haces clic en Ir, y luego verás tu biblioteca. Por lo que al hacer clic en biblioteca, se abrirá para ti la biblioteca en Finder. Por lo que puedes encontrarlo aquí. Y vas a ir a ver que hay carpeta android, y dentro de esta carpeta android hay SDK. Entonces aquí lo que necesitamos tener, así nos aseguramos. Tenemos realmente este baño home library, Android SDK. De acuerdo, así que eso es todo bonito. Por lo que ahora tenemos dos tipos de terminales en Mac. Entonces como ven aquí, estoy usando el que se prefija con Zed SH. Entonces este es mi terminal el cual estoy usando para mis aplicaciones. Entonces ustedes pueden hacer los pasos audaces, que yo voy a hacer ahora. Entonces para asegurarte de que todas tus terminales funcionen bien. Por lo que primero editaré home dot bash perfil. Entonces cómo podemos hacer eso, volveré a abrir la terminal. Y como ves, lo intenté previamente, tengo un comentario que se llama sudo nano y luego editar algo bien. Entonces voy a volver a poner este comentario. Entonces, ¿por qué tengo sudo? Porque tengo sudo porque necesito permisos para eso. No se puede editar este archivo sin privilegio. Nano es editor, que se instala internamente en el sistema o terminales Mac. Para que puedas editar archivos a través de él. Por lo que no se puede decir sudo nano como decimos aquí. Y abrirá el archivo para usted y luego necesitará exportar y copiar y pegar lo que está escrito en la documentación. Entonces vamos a copiar todo esto como vemos aquí, y luego volvamos a esa terminal otra vez y pegarlos aquí. Está bien, Niza. Nosotros los tenemos a todos. Después de eso necesitas dejar de fumar, necesitas salir. Entonces aquí hay algunos atajos. Tienes que decir que necesitamos controlar X. Así que debes presionar Control X en Mac. Y te ofrecería que guardar, modificar, modificar buffer modificado. Para que puedas decir, sí, quiero salvarlos. Entonces después de ese nombre de archivo para escribir, por lo que te preguntará, anule esto. Por lo que solo presionas Enter y se guardará para estar seguro de que puedes tener todas las ediciones hechas. Simplemente vuelve a hacer clic. Eso lo verás. Abrió nuevamente el comentario. Ya ves que todos ellos. Entonces voy otra vez, controlo. Vuelvo a la línea de comando o terminal. Voy al siguiente comentario donde estoy usando zed como editor edge para que luego podamos editar este archivo. Entonces vas a la terminal y exactamente el mismo sudo nano y el mismo, y luego pegas esto y te abrirá de nuevo, algún editor puedes exportar también los molestos que aquí se requieren. Por lo que de nuevo, necesitamos copiar todos esos comandos e ir a la terminal. Y luego basamos esos. Podemos decir aquí, puedes pegarlos debajo y luego presionas Guardar, o puedes decir Control X para guardarlo exactamente como lo hicimos anteriormente, vale, sobrescribir los datos y todo se guarda bien. Entonces para asegurarnos de que nuestra línea de comandos está aceptando que solo necesitas ejecutar este comando el cual se llama Echo Android home. Entonces vamos de nuevo a la terminal y luego pegamos este comando y verás que nos quedamos vacíos. Esto se debe a que necesitas reiniciar la terminal para ver los cambios que se hacen en tu, en tu terminal. De lo contrario, si eso aún no funciona, debes revisar nuevamente estos perfiles SSID como vimos anteriormente, y asegurarte de que al final tienes ruta de exportación. Por lo que de forma olvidada, has visto aquí, lo hice, era como aquí. Por lo que esta ruta de exportación estaba aquí. Por lo que solo lo muevo para estar al final al último. Entonces en ese caso podemos exportar todos los autobuses que aquí se definen. Así que solo asegúrate de que esto sea como la solución de problemas. Se puede hacer. Para que puedas asegurarte de que tu terminal esté funcionando. Entonces voy a cerrar esta terminal y volver a abrirla para ver si realmente soy capaz de ver el camino de Android Home. Entonces lo cerramos, abrimos de nuevo la terminal. Yo haría un zoom. Entonces pegaré el comando echo Android Home eyes como ves, lo tengo. Ahora el camino como yo estoy copiando o haciendo eco de esto, imprimiendo el comentario o la ruta que se guarda en mi archivo de comentarios, que es para z como h Así que aquí, como ves que todo está funcionando bien aunque estamos seguros de que nuestros socios están establecidos aquí mismo. Entonces está escrito aquí que puedes asegurarte de que todo esté funcionando bien. Entonces después de eso hay React Native got interfaz de línea de comandos. Veremos este paso después de que terminemos también para iOS. Por lo que mantendré este paso por ahora. Para Windows. Si voy a las Windows, estableciendo el camino, muy fácil, voy a variables de entorno que se establecen en Windows. Y todo se explica aquí. Por lo que sólo tienes que ir al Panel de Control y luego cuentas de usuario. Y luego cuentas de usuario otra vez, cambie mi variable de entorno. Y necesitas agregar la ruta que está instalada en tu máquina para Android SDK, normalmente viene de los usuarios, y luego te gustaría nombre de usuario viene aquí, y luego AppData, Local Android SDK, eso es todo. Y necesitas entonces asegurarte de que todo ese camino sea nuestro conjunto bien. Por lo que necesitas abrir PowerShell o línea común, copiar y pegar un buen elemento child y luego verificar eso y se agrega Android Home. Es exactamente como nos aseguramos de que tenemos la variable Android Home está configurada. Entonces esta es una forma de cómo configuramos el entorno Android para Windows y Mac. A continuación vamos a explicar sobre iOS. Y después de eso, desafortunadamente, como les dije que iOS sólo está disponible en Mac, así que voy a explicarlo sólo en el mapa. No tendremos explicación para Windows o Mac OS y también el sistema iOS, que estará en la próxima conferencia. Y después de eso, iniciaremos nuestra aplicación React Native o primero actuaremos nativa. 8. Configuración de IOs: De acuerdo, en esta conferencia vamos a hablar de instalación para Desarrollo Ambiental para sistema iOS. Por lo que hemos trabajado con macOS, android, y me voy a pasar al sistema iOS. Instalar para sistema iOS es exactamente los mismos pasos como lo hicimos anteriormente con Watchmen y Las otras herramientas. Pero también necesitamos instalar alguna aplicación se llamaba Xcode? Xcode está disponible en Mac App Store, y cuando lo instales, solo asegúrate de tener la versión diez y un nuevo pedido. Por lo que esta es la información más importante que hay que conocer. Después de la instalación de su Xcode, hay algo que se llama como hay que revisar sus herramientas de línea de comandos. Por lo que después de la instalación, he instalado Xcode previamente por mi cuenta, mi sistema operativo. Voy al Xcode y luego hago clic en Preferencias. Entonces cuando vayas a Preferencias, verás aquí como algunas, algunas pestañas. Una de ellas es localizaciones. Tan solo asegúrate de que la herramienta de línea común esté seleccionada, ese Xcode basado en la virgen que instalaste. Entonces después de eso necesitamos instalar también. Simulador. El simulador está existente en los componentes. Por lo que cuando vas a los componentes, necesitas instalar algún simulador. Estoy instalando ahora el último simulador de versión iOS para teléfonos móviles de iOS. Por lo que estoy instalando 14.4. Por supuesto, cuando veas una versión más alta es mejor instalarla. Por lo que tu aplicación puede funcionar con la última versión de los sistemas iOS. Por lo que normalmente estos tamaños están disponibles aquí. También necesitas tener espacio en tu PC. Dos, obedecer el tamaño del simulador. Después de eso, vamos a su siguiente paso. Después de la instalación, los CocoaPods, barcos de cacao es como la instalación de Ruby y está disponible para Mac OS. Es proporcionarnos mucho como cómo decir bibliotecas para iOS o paquetes para iOS, tienes opcionalmente puedes instalarlo. Por lo que también voy a instalarlo a través de este comentario, abriré mi terminal y luego pegaré aquí este comando. Y entonces me va a pedir una contraseña. Yo también pegaré mi contraseña. Y me instalará algo llamado CocoaPods. Si quieres saber más al respecto, aquí hay como un enlace. Puedes comprobarlo. Entonces vas a CocoaPods. Hay muchos paquetes y bibliotecas para proyectos de Objective-C, por lo que puedes tenerlos para tus aplicaciones. Hablaremos de eso más adelante cuando vayamos a utilizar estos CocoaPods en nuestro curso. Pero actualmente vamos a usar componentes nativos React, pero es mejor usar esto. Por lo que para más información, puedes echar un vistazo a este enlace. Se puede ver Introducción a CocoaPods. Se puede instalar tan bien como instrucciones, las cuales tenemos aquí, pero actualmente no lo necesitamos. Lo necesitaremos más tarde. 9. Editor de código: El editor que voy a utilizar en este curso será Visual Studio Code. Como les dije, instalamos Xcode e instalamos también Android Studio, pero no los vamos a usar como editores. Vamos a utilizar Visual Studio Code, que es muy rápido y dinámico y es muy bueno para el desarrollo de un nativo de React. Entonces como ven aquí, tenemos un código V punto Visual Studio.com. Vas aquí y luego haces click en descargar mac universal, y tendrás la versión para Mac. Y además, si haces click en esta flecha, verás otra versión para Windows y Linux. Por lo que la instalación del código de Visual Studio terminará con la instalación del código de Visual Studio en tu máquina y tendrás algo como esto. Por lo que en la próxima conferencia veremos cómo vamos a agregar algunas extensiones para envolverlo nuestras habilidades de codificación en Windows, o será archivo de instalación normal y también en Mac lo puedes instalar y se descargará como archivo zip. Y cuando abras el archivo zip, se extraerá y tendrás tu aplicación de punto de Visual Studio Code. Para que puedas mover esta aplicación a tus aplicaciones en Mac OS. Por lo que se ubicará aquí. Ya lo he instalado, así que no necesito hacer eso. Entonces como ves aquí, tenemos aplicación de código Visual Studio, y cuando la abras, verás ese editor de Visual Studio instalado en tu máquina. Entonces como ven aquí, tengo aquí mi Visual Studio Code está instalado en mi máquina. Para Windows, será exactamente lo mismo, pero serán archivos ejecutables para que puedas instalarlo como cualquier aplicación en Windows. 10. Instalación de extensiones para codificar: Visual Studio Code viene con una extensión adicional que puedes instalarlos para algún comportamiento específico de tu código de Visual Studio. Por lo que para visitar las bibliotecas o similares, por ejemplo, su mercado para esas extensiones, solo necesitas hacer clic en Extensiones en Visual Studio Code. Como ves aquí desde este ícono, voy a dar clic en él y luego verás muchas extensiones sugeridas. Entonces busquemos primero nuestra primera extensión, que será Reaccionar herramientas nativas. Y esta extensión es muy útil para nuestra aplicación React Native como veremos más adelante. Entonces por ejemplo, nos ayudará a crear como algunos fragmentos. Entonces, como ves, es muy útil y está envolviendo nuestro recubrimiento. Y tiene muchas características como autocompletar de las cosas. Entonces lo que veremos más adelante el beneficio de esta extensión, pero ahora vamos a instalarla. Por lo que hago clic en instalación y se instalará en mis extensiones. Otra extensión que necesitamos instalar también para acelerar nuestro rendimiento se llama React Native, reaccionar slash redox snippets para ES6, ES 7. Entonces esto lo vamos a utilizar en este curso. Entonces, ¿cómo es esto la extensión? Este es como hacer para nosotros algunos atajos que podemos escribir y nos va a generar el código completo. Por ejemplo, como ven aquí, tengo algunas importaciones, por ejemplo Irán EMR, y luego se ejecutará, se codificará para mí importar React from react. Entonces es como un atajos que podemos escribir y nos importará en base a las cosas. Por ejemplo, tengo IM, RPC, me importará un componente puro de reaccionar. Entonces son algunos atajos que necesitamos usar como veremos más adelante en el curso. Y acelerará la productividad. Extensión, que necesitamos instalar se llama más bonita. Prettier es como una extensión muy bonita la cual se utiliza para formatear código. Por lo que cuando guardes un archivo, automáticamente formateará tu código en función alguna configuración la cual vendrá con la instalación React Native como veremos más adelante. Entonces primero, solo necesitas instalar esta extensión y asegurarte de tener la opción que se llama segura o formato en Guardar. Entonces cómo puedes encontrar esta opción, solo tienes que ir a la configuración de VS Code. Entonces solo tienes que ir al código y luego seleccionarás Preferencias y luego ajustes. Por lo que al hacer clic en la configuración, puedes encontrar algo llamado formato en Guardar. Entonces ese es el comentario. Por lo que solo necesitas estar seguro de que el formato en Guardar, esta opción está activada de lo contrario, el formato en seguro no funcionará para ti. Entonces eso es todo por ahora. Veremos cómo usaríamos más guapa. Como les dije, se instalará automáticamente esa configuración con un proyecto React Native. El último o la última extensión que necesitamos es algo así como opcional. Si lo deseas, puedes instalarlo o no. Se llama material y luego Icon Theme. Entonces esto es como darte, como cuando tienes una estructura de archivos, pondrá los iconos de los archivos en función del tipo del archivo. Por lo que es mejor también instalarlo para hacer como muy cómodo para la lista de archivos que tienes aquí. Después de la instalación, te dará seleccionar Archivo Icon Theme. Solo necesitas usar este. Por lo que usaré Material Icon Theme o seti. Vamos a usar este. Y luego verás como tu lista de archivos B con unos iconos específicos de los archivos en el editor. Entonces esos iconos, los ves por ejemplo, así. Por lo que cada archivo termine con CSS , tendrá ícono como este. Cada acabado de archivo, por ejemplo, con MPM tendrá así, JavaScript y etcétera. Por lo que todo fuera de iconos están disponibles, lo que te hará fácil echar un vistazo a través tu estructura de archivos y recoger ese archivo que quieres, esas extensiones que necesitamos por ahora, vamos a construir nuestro primer o un proyecto React Native, y veremos toda la efectividad de todas esas extensiones más adelante. 11. Crear proyecto natural de React: De acuerdo, Ahora estamos listos para iniciar una nueva aplicación con React Native. En la documentación, existe una herramienta que se llama MAX, que proporciona capacidad para crear aplicaciones como placas de caldera. Y este MPS forma parte de MPM. Viene siempre con la versión más reciente de Node. Así que asegúrate de tener instalada la última versión de Node. Entonces cuando ejecutemos este comando, vamos a crear un nuevo proyecto en React Native. Entonces para asegurarnos de que todo esté funcionando bien, Vamos a ejecutar este comentario. En primer lugar, iré a mi terminal. Entonces si recuerdas, tenemos esta terminal o línea de comandos la cual puede estar disponible en Windows. Así que asegúrate de estar en el escritorio o en cualquier carpeta donde prefieras, por ejemplo, en tu disco duro. Entonces aquí usé el escritorio, así que voy a usar esta carpeta para crear mi proyecto. Entonces voy a copiar este comando como ves, como MPI x React Native en él. Y luego especificas el nombre del proyecto con el que vas a trabajar. Entonces intentemos eso. Entonces iré primero a la terminal y luego pegaré este comando, pero daré, por ejemplo nombre. Podemos decir proyecto del curso. Entonces así como por ahora, para asegurarnos de que todo esté funcionando bien para nosotros, es mejor tener siempre como las letras mayúsculas del, como el nombre del proyecto. Por lo que podemos tener un proyecto de curso como este. Por lo que ahora voy a presionar Enter. Y entonces creará para mí en el escritorio una carpeta donde se llamará proyecto de Gore. Si voy a mi escritorio, como ven aquí, me va a crear un nuevo proyecto. Pero este proceso tomará un poco de tiempo porque va a descargar algunos recursos para crear el proyecto. Entonces como ven aquí, su propio progreso. Voy a saltarme este video porque lleva unos cinco minutos. Entonces voy a saltarme este video y te mostraré cuando esté listo. Entonces como ven aquí, esa instalación está hecha. Entonces descargando algunas plantillas, copiando plantilla procesando la plantilla y luego algunos CocoaPods, las dependencias como vimos anteriormente. Y aquí hay algunas instrucciones para ejecutar el proyecto en Android y también instrucciones para ejecutarlo en iOS. Entonces ahora como ven aquí, está instalado, si voy ahora a mi escritorio, veré que el proyecto ya está aquí. Entonces como ves eso, escucho que tengo aquí ese proyecto de curso. Entonces vamos a Visual Studio Code y abrimos ahí el proyecto. Entonces como ves, tenemos aquí esa carpeta y podemos hacer click en este explorador de carpetas o Explorador de archivos. Y luego verás icono o botón, que se llama Abrir carpeta. Y aquí vamos a abrir la carpeta de nuestro proyecto donde hemos localizado en escritorio. Entonces iré aquí, proyecto de curso, y abriré esta carpeta como ven aquí. Entonces si le echan un vistazo, tendremos todo el archivo aquí, así que estamos listos para la programación. Echemos un vistazo rápido a través de la estructura de archivos del proyecto. Empecemos de arriba a abajo. Entonces primero tendremos una prueba, que será como un archivo de prueba para probar la aplicación como prueba de extremo a extremo o prueba unitaria, que también se creará aquí. Vamos a tener un código VS sentado. Por lo que siempre cuando quieras tener una configuración, configuraciones específicas con tu proyecto, puedes agregar esas configuraciones de Visual Studio Code si eres todo el equipo está usando Visual Studio Code. Por ejemplo, el tamaño de fuente del código, como se ve aquí. Por lo que puede anular su configuración que predeterminada en su editor por los ajustes que se especifican dentro de este archivo o de esta carpeta. Y eso lo veremos más adelante. Y ahora tenemos proyecto Android. Este será un proyecto Android puro, por lo que se escribirá en Java. Ya verás aquí Gradle, no vamos a manejar ni trabajar con este proyecto porque como te dije que React Native está interactuando con proyecto Android e iOS para generar para nosotros unas apps nativas. Por lo que no vamos a trabajar tanto con estas dos carpetas solo cuando queremos agregar o eliminar algunos módulos específicos, como te mostraré más adelante, módulo nodo es las bibliotecas Node JS. Entonces donde vamos a instalar las bibliotecas en JavaScript que necesitamos para ejecutar nuestro proyecto. Por ejemplo, si abres esta carpeta, verás que tienes biblioteca nativa React. Tienes TypeScript, tienes muchas bibliotecas las cuales son necesarias para Duran este proyecto, buck config es algo así como para maven es un servidor el cual se puede ejecutar para Android. Por lo que también vamos a trabajar con él si lo necesitamos. Editor Config es algo así como, si recuerdas, hablé de una más bonita. También puedes establecer alguna configuración para tu editor como aquí. Puedes tener una config para este editor, pero será anulada por el hielo RC más bonito ya que hablaré de ello más adelante. Es pelusa también es algo importante para el proyecto. Es pelusa es una herramienta la cual viene con una extensión si quieres, puedes instalarla, que se llama ES pelusa. Y cuando instalas ES pelusa, te mostraría vivir los errores de código que tienes en tu proyecto. Por ejemplo, si voy aquí a ArcJS, voy a tener algún error, que me está mostrando eso, vale, hay. Esto sólo se puede usar en TypeScript, pero no se puede usar en el archivo JavaScript. Entonces me refiero a la importación. Entonces en ese caso, también puedes saltarte esta regla. Se puede editar la regla en el archivo RC de Eastland. Por lo que ES pelusa El archivo RC es un archivo donde contienen las reglas para tu código. Entonces en ese caso, está bien, es un proyecto se ejecutará, pero tendrás algún error de mecanografía. Por ejemplo, si pongo aquí cita doble, Es, al proyecto no le gustará. O a agente de la ESA no le gustará. Dirá, es mejor tener una sola cita ya que está establecida en las reglas del proyecto. Entonces para buscar más o sobre ES pelusa, solo puedes ir a ES pelusa y no puedes revisar las reglas. Hay muchas reglas que puedes establecer para tu proyecto. Entonces, por ejemplo, tomaré uno de ellos. Por ejemplo, ninguna consola, el registro de consola es pesado para el navegador cuando los olvida, cuando su proyecto, el proyecto se ejecutará con registro de consola y luego hará para usted algunos problemas en el rendimiento. Por lo que es mejor siempre quitar el registro de la consola del proyecto. Aquí hay una ley o regla para Eastland. Siempre que haya un registro de consola, se mostrará debajo de él error. Entonces tienes que demostrar eso, vale, por favor quita el registro de la consola. Entonces cuando se quiere trabajar en una de esas reglas, por ejemplo, como vemos aquí que tomamos ésta, sólo voy aquí y compruebo al final algo llamado Reglas. Y luego se puede especificar la regla que se llama ninguna consola de todos, se puede establecer en uno o 0. Entonces en React, podemos usar eso también, estas reglas. Entonces si vas a su proyecto y vas a Eastland RC, solo necesitas agregar un campo que se llama reglas. Y estas reglas serán un objeto. Y dentro de este objeto pones tu papel. Por ejemplo, voy a poner eso ninguna consola, como ven aquí, por ejemplo, si vamos y copiamos ésta, así que diremos todo no tendremos consola. Entonces aquí ponemos éste, pero como dijimos, esto le gustará sólo una cita simple. Por lo que lo ponemos en cotización simple. Y aquí decimos que encendido, como encenderlo para mí o esta consola de errores, enciéndalo. Cuando guardas. Como ven aquí, ya está formateado, como les dije anteriormente, porque ponemos en formato say. A guapa ya lo formateó para mí. Entonces cuando voy a la aplicación, por ejemplo, quiero agregar aquí una consola, registro de consola. Por lo que podemos agregar como algún log de consola aquí, como como ves. Por lo que me dará la declaración de consola inesperada error. Por lo que es mejor encenderlo. Siempre sí recuerda que tengo un error de registro de consola en mi aplicación. Entonces si quieres desactivarlo, solo tienes que volver a la carretera y simplemente poner aquí de como está escrito en la descripción del proyecto. Y como ven ahora, el error no se está mostrando o la advertencia ya no se está mostrando. Entonces eso es todo. Para que pueda especificar la regla que desee. Tienes que buscar reglas. Y luego puedes hacer lo que quieras con esas reglas. Y puedes hacer que tu proyecto sea estable y unificado en código de todo el equipo, que es, que están compartiendo la base de código. Entonces, demos esta regla, por ejemplo, y eliminemos el registro de la consola. Y sigamos con el flujo de estructura fina Config. No lo necesitas por ahora. Se trata de cómo se comportará el flujo de exportar y construir el proyecto. Buenos atributos también no lo necesitas por ahora te ignoran. Archivo muy importante adónde vas. Por ejemplo, cuando vinculas el proyecto a algún repositorio de Git, entonces no necesitas empujar algunos archivos. Por ejemplo, los módulos de nodo es muy enorme. esta carpeta es de unos 300 megabyte cuando inicias un nuevo proyecto React Native. Por lo que no necesitas empujar este código o esta carpeta al repositorio de Git. Solo necesitas empujar las bibliotecas que estás reduciendo dentro de tu proyecto. Entonces estoy excluyendo los módulos de nodo del bueno para ser empujado con mis commits y empuja a la base de código en GitHub. Más bonita, como les dije, hay una configuración más bonita ya configurando esta más bonita. Y como ven aquí, que aquí tenemos pan aquí se define, ICC abajo y te mostrará siempre errores y las reglas que están siguiendo en base este archivo arriba JSON es el archivo que es punto de entrada para nuestro proyecto. Al igual que por ejemplo, podemos decir la página de inicio de la aplicación. Como veremos más adelante cuando ejecutemos la aplicación, veremos cómo todo esto se renderizó en nuestro teléfono y veremos cómo podemos editarlo y ajustarlo para hacer nuestra aplicación. Y hablaremos de este expediente más adelante. Abc JSON es igual que algunas propiedades para la aplicación, como el nombre y el nombre para mostrar. Para que puedas agregar unas propiedades que quieras. Babel config es algo para ESR, ES6 años cinco es un constructor que convierte su JavaScript ES6 años cinco a Vanilla JavaScript. Y se puede, el navegador o cualquier navegador puede entenderlo. Índice js. También es el principal punto de entrada de tu aplicación. Entonces aquí se especifica la aplicación ISA como índice dos años cuando empecé el proyecto, empezará a partir de aquí, index.js. Y especifico el nombre del archivo, que se llama nombre de aplicación. Y aquí empezará para mí el nombre de la app de la app, que tengo eso importado desde aquí. Por lo que el app.js en realidad se llama dentro del índice GS, que es la raíz, raíz principal punto de su proyecto. Y ahora tenemos metro config, que está transfiriendo el proyecto de JavaScript Bayes a una base de código nativo como vimos más adelante. Y también se usa como compilador. Y te está mostrando los errores cuando estás haciendo algunos errores en el código. Cuando estamos haciendo como paquete de desarrollo JSON se utiliza para bibliotecas que necesitamos. Por lo que podemos instalar bibliotecas y eliminar bibliotecas también, como solo bibliotecas JavaScript. Por lo que podemos agregarlos o eliminarlos en base al paquete JSON. Y como veremos más adelante, cómo vamos a llamar a múltiples bibliotecas que necesitamos para construir nuestro proyecto. Por lo que este es un resumen rápido sobre la estructura de archivos del proyecto React Native. Veremos más adelante cada vez más detalle sobre todos esos archivos. Una, vamos a construir nuestro proyecto. 12. Para ejecutar en el simulador de iOS: De acuerdo, en esta conferencia vamos a ver cómo podemos ejecutar el proyecto en el simulador de iOS. Entonces como ven aquí, tenemos las instrucciones sobre iOS que necesitamos para navegar a nuestro proyecto. Y luego tenemos que ejecutar el comando npm, React Native, ejecutar iOS. Probemos eso. Pero lo probaría desde nuestro Código VS o Visual Studio Code. Ya no vamos a utilizar estos terminales porque sabes que el código VS contenía ya la línea común la cual se utiliza para usar o insertar comandos que necesitamos para nuestro proyecto. De acuerdo, entonces tomemos esta recomendación y copiemos este comentario primero, y luego vamos al código de Visual Studio. Entonces cuando cerramos esta línea común, vamos al código de Visual Studio. Por lo que para abrir la terminal en código de Visual Studio, solo tienes que presionar Control J en Windows o Command J en Mac. Entonces intentemos eso. Y verás que obtendrás la terminal y el archivo bash o puedes tener tan bien el zed como NMAC. Entonces ahora vamos a pegar el comentario que teníamos anteriormente. Pero recuerda, ya has instalado el Xcode y también el simulador. Por lo que veremos automáticamente que tenemos simulador que es será en iPhone. Entonces intentemos eso. Tomará algún tiempo ejecutar el proyecto e incluir los paquetes. Y como ven aquí, es lanzar el iPhone 12 es el simulador que he instalado previamente, y ahora se está cargando. Entonces como ven aquí, el simulador que lanzó y ahora estamos construyendo la aplicación. Entonces, ¿qué tenemos aquí que el simulador o el compilador tratando de construir el proyecto usando el proyecto iOS, que hemos creado previamente usando nuestro comentario React Native. Y como ves, este proceso puede llevar algún tiempo, por lo que debes ser paciente con él. Depende de tu memoria de tu PC y también del procesador. A lo mejor notarás que fan de la PC se hará más alto y el procesador se sobrecargará, pero no hay problema. Llegará cuando todo se ponga en marcha. Entonces ahora después de que el proyecto de ley tuviera éxito, como ven aquí, abrimos para nosotros una nueva terminal. Y esta terminal nos está mostrando que el proyecto empaquetado index.js fue ejecutado. Y como les dije anteriormente, ese índice GS contiene el punto de entrada para nuestra aplicación. Y como ven aquí, tenemos todo el compilador, que se llama Metro. Y así aquí tenemos el simulador y la aplicación que es por defecto viene por React Native boilerplate. Entonces ahora cuando vas a hacer un cambio en el código, por ejemplo, voy a cambiar este paso 1, esta frase por otra cosa. Entonces vayamos allá al código y busquemos en app.js, como les dije, sería el punto de entrada para nuestro proyecto. Entonces aquí nuestro app.js. Entonces como ven aquí, el determinante que abrimos previamente, está hecho e hizo su propio trabajo, así que ya no lo necesitas aquí. Entonces cuando voy y busco el paso 1, no importa ese código, cómo lo ves aquí. Voy a explicarlo paso a paso, pero cambiemos este paso una frase aquí. Entonces lo cambiaré, por ejemplo, a los objetivos de React Native. Y cuando guarde, veremos que los cambios se reflejan inmediatamente en el teléfono. Y esta app será una app realmente nativa. Se traslada por metro a proyecto iOS para ejecutar JavaScript en iOS y se convierte a una aplicación nativa, como se ve aquí. Por lo que cada vez que cambio algo, se reflejaría aquí. Por lo que será muy útil para nosotros para la codificación. No tienes que volver a cargar toda la aplicación porque esto se llama recarga en caliente. Entonces está reflejando directamente los cambios que vamos a hacer. Entonces cuando estamos construyendo la aplicación, no necesitamos recargar en cada cambio que estamos haciendo. Entonces solo guárdalo y se ejecutaría directamente aquí de inmediato. Entonces esta es la forma en que estamos ejecutando la aplicación. Entonces cuando estabas ahí es como por ejemplo, algún error. Como ven, voy a equivocarme. Te mostrará el error directamente aquí. Entonces en el propio teléfono, y también en Metro, esa terminal que se abrió automáticamente, te mostrará la línea exacta donde ocurrió el error. Para que no tengas que preocuparte por los errores. Por lo que no los puedes ver directamente cuando presionas Guardar y ya tienes un error. Entonces lo volví a poner y el proyecto se ejecuta de nuevo. Entonces después de que te estás asegurando de que tu Xcode instalado y así has descargado como simulador como te mostré anteriormente. Ahora somos capaces de ejecutar el proyecto de manera muy fácil y sin problemas. Por lo que de esta manera, podrás ejecutar la aplicación en el teléfono iOS. 13. Ejecutar en el emulador de Android: De acuerdo, ahora en esta conferencia vamos a ejecutar nuestro proyecto en dispositivo Android. Este dispositivo será Emulador como un dispositivo virtual. Cómo lo hicimos exactamente fue dispositivo iOS. Entonces ahora voy a ir a la documentación de Android o corriendo en Android. Entonces la misma documentación que estábamos siguiendo, quiero decir target Android. Entonces ahora si bajamos, veremos ese comentario donde vamos a ejecutar el proyecto. Por lo que hemos creado previamente un proyecto, como ustedes vieron. Ahora vamos a ejecutar el proyecto en un dispositivo. Pero aquí hay algunas instrucciones que tenemos que hacer primero. Entonces, en primer lugar, necesitamos crear un dispositivo físico o un dispositivo virtual. En esta conferencia, les voy a mostrar cómo crear un dispositivo virtual. Por lo que tenemos que seguir las instrucciones que aquí se escriben. Y también tal vez se actualicen en el futuro después de grabar este curso. Pero ahora puedes seguir esta instrucción que aquí existen. Será lo mismo siempre para el futuro. Entonces primero, vamos a crear un nuevo AVD. Se llama dispositivo virtual, Dispositivo virtual Android. Entonces primero vamos android Studio, como ves aquí, y hacemos click en Configurar y luego AVD Manager, hacemos click en él y tendremos otra ventana. Y en esta ventana, como ves, puedes agregar tus dispositivos como quieras. Entonces hay un dispositivo por defecto el cual se usa en, ya en Android Studio, pero vamos a usar uno por defecto o uno que es recomendado por la documentación de React Native. Por lo que haré clic en Crear Dispositivo Virtual. Y por supuesto será una forma. Por supuesto, si estás desarrollando para tablet o por ejemplo, automotriz o TV, sería diferente, pero aún así el sistema operativo será el mismo. Por lo que ahora vamos a seleccionar uno de esos dispositivos. Por lo que recomiendo, por ejemplo, utilizar el Pixel 3 o Pixel 2. No hay problema. Para que puedas tener un dimensionamiento adecuado de tu aplicación. Por lo que ahora hacemos click en Siguiente. Y luego como se ve en la documentación, dijeron que es mejor usar el sistema Q donde tenemos 29 imagen. Entonces si vamos al Android Studio, tenemos que buscar imágenes de X86. Tenemos que ir por imágenes. Y luego seleccionaremos la que se llama Q. Este que hemos descargado previamente, como recuerdan, cuando estábamos instalando Android Studio. Y después de eso, haces clic en Siguiente y das un nombre para este dispositivo. Y puedes elegir si es paisaje o retrato. Pero no importa. Puedes cambiarlo durante el tiempo de ejecución del dispositivo, y luego haces clic en Finalizar. Después de eso, tendrás el dispositivo está aquí. Por lo que ahora necesitamos ejecutar el dispositivo que tenemos instalado. Entonces después de eso podemos ir aquí y hacemos click en el botón Play. Entonces si ves este botón Play, entonces lo hará, se va a ejecutar el AVD. Se abrirá un teléfono para ti forma virtual, exactamente como lo hemos hecho en iOS y la diferencia aquí que tenemos que ejecutar el teléfono manualmente aquí. Y luego tenemos que esperar hasta que el teléfono esté despegando o se esté lanzando. Entonces tenemos que hacer algo para ejecutar nuestra aplicación en el dispositivo. Entonces como ven aquí tenemos ahora el dispositivo está funcionando, todo está bien. Tenemos como un teléfono real. Como ven aquí, tiene cámara, tiene aplicaciones, y es exactamente como un teléfono real. Por lo que ahora necesitamos ejecutar la aplicación que hemos creado previamente con React Native en este enlace. Lo que tenemos que hacer primero, en primer lugar, están recomendando encontrar el dispositivo por AVD, o línea común de Android. Entonces, ¿cómo podemos hacer eso? Entonces para eso, necesitamos asegurarnos de que realmente el dispositivo esté conectado a Android. Es decir que React Native puede ver el dispositivo que podemos ejecutar la aplicación en él. Entonces cómo podemos hacer eso, podemos abrir una nueva ventana de terminal en código de Visual Studio y ejecutar el comando dispositivos ADB. Por lo que ADB es como la línea común que hemos creado en el, al principio cuando estamos instalando Android Studio. Entonces aquí, cuando ejecutemos el comando ADB , tendrá algunas opciones. Uno de ellos son los dispositivos. Por lo que al hacer click Enter, veremos que tenemos emulador 55, 54 dispositivo. Si no ves nada aquí, tienes que asegurarte de que estás ejecutando el emulador. De lo contrario, no podrás ejecutar tu aplicación con React Nate. Después de eso, necesitamos ejecutar la aplicación usando y también cómo lo hicimos previamente con cuando estábamos ejecutando o instalamos la aplicación. Entonces si recuerdas, teníamos este comando que se llama MAX React Native run Android. Puedes saltarte este paso porque este comentario va a ejecutar automáticamente este comando después de eso, que es como correr metro, como hablamos anteriormente. Entonces ahora ejecutemos el comando que hemos corrido Android cuando se quiere ejecutar iOS, que simplemente lo reemplazan con iOS. Entonces ejecutemos ahora la aplicación. Otra vez. Se va a construir y tomará algún tiempo hasta que ejecute la aplicación en este dispositivo. No tienes que hacer nada. Sólo tienes que esperar. Y cuando esté terminado, abrirá una nueva terminal para metro y también USAR la aplicación se crea aquí. Entonces voy a poner dos simuladores. Uno es el iPhone que hicimos previamente, y aquí el de Android. Y voy a saltarme este video para hacer rápido para cargar y ejecutar la aplicación. Entonces como ven aquí, el edificio está terminado y está construyendo la aplicación en el teléfono lentamente. Y va a ejecutar la aplicación, instalarla en el teléfono, y veremos exactamente cómo lo hicimos con iOS. Entonces como ven aquí, Metro sigue funcionando y puentando a los dispositivos de tableros. Entonces ahora está convirtiendo el código JavaScript a código Android e iOS. Y nos muestra esta implementación aquí. Entonces cambiemos algo en su dios, solo voy a hacer esto más pequeño aquí. Y entonces podemos cerrar esto. Y voy a poner, por ejemplo, un curso de React Native. Y voy a dar clic en Guardar. Veremos que los cambios se aplican en ambas formas. Entonces sin ningún tema y sin ningún problema. Y como ven aquí, tenemos todas las actualizaciones de inmediato, que viene como recarga caliente. Entonces para ver nuestra aplicación funcionando y podemos hacer nuestros cambios de inmediato. Entonces esta es una forma de ejecutar el dispositivo Android. Si tienes algún problema, puedes ir siempre hacer solución de problemas, que se encuentra aquí en la página de solución de problemas. Entonces aquí estaban recopilando algunos problemas comunes y los están arreglando a través de esta solución de problemas, que siempre necesitas si tienes algunos problemas. Entonces eso es todo. Solo necesitas si tienes problema, solo tienes que ir a solucionar problemas o pregúntame en la Q y a, o también puedes preguntar en su repositorio de GitHub por problemas. Y puedes abrir un nuevo número y te responderán sobre cómo solucionarlo. Pero espero que si sigues mis pasos, que te expliqué, no tendrás ningún problema al ejecutar tu aplicación. 14. Cómo hacer el dispositivo móvil utilizando Vysor: Algunas funcionalidades que estamos usando en nuestro dispositivo Android o emulador no estarán disponibles, como cómo tenemos un dispositivo ray. Por lo que también, algunas personas están sufriendo que Android Studio es muy pesado para su computadora y tienen una cantidad limitada de RAM. que sepas que Android Studio necesita mucha RAM y muchos recursos hasta el momento que también puedes desarrollar en tu propio teléfono móvil. Por lo que o puede ser iPhone o Android. Te voy a mostrar cómo voy a conectar mi dispositivo Android y me voy a desarrollar en él. Pero primer paso tenemos que hacer eso para asegurarnos de que el emulador esté apagado. Por lo que debemos apagar el emulador, que se está ejecutando en Android Studio. Por lo que no se puede hacer clic en este botón, que se llama poder. Y entonces se apagaría para ti ese dispositivo totalmente. Por lo que después de Dunning del dispositivo, también necesitas cerrarlo desde aquí. Por lo que necesitas cerrar el dispositivo totalmente desde tu máquina y también desde tu emulador. Tienes que estar seguro de que en Android Studio tienes algo corriendo en tus dispositivos virtuales. Después de eso, vamos a mover e instalar algún programa o aplicación que se llama Visor. Y este visor, puedes ir al sitio web visor dot io, y puedes descargarlo para todos tus sistemas operativos, Windows, Mac, Linux, y también puedes instalarlo en el navegador usando alguna extensión. De acuerdo, ¿cómo podemos usar esta visera? Ya he descargado esta aplicación, y como ven aquí, estoy ejecutando en mi dispositivo. Por lo que tenemos aquí dos opciones, dispositivos android y dispositivos iOS. Voy a mostrar cómo podemos desarrollarnos en dispositivo Android. Entonces te voy a mostrar yo mismo y luego te estoy mostrando cómo estoy conectando mi dispositivo y habilitando ese modo de depuración, modo depuración USB, como se menciona aquí. Hola y bienvenidos. Yo soy familia y te voy a mostrar cómo conectar tu dispositivo Android. Para calcular eso, en primer lugar, necesario utilizar el cable original, cable USB, que viene con el teléfono originalmente. Por lo que de lo contrario tendrás algunos problemas al conectarte a tu PC. En primer lugar, voy a conectarlo, usarlo, este USB. Y luego tendrás en el teléfono varias opciones cuando te deslice hacia abajo o cuando tengas un desplegable, ese desplegable, es decir como cargar vía USB como ves aquí. Pero ahora a lo que voy, voy a dar clic en esta carga vía USB. Tendrás múltiples opciones. Por lo que esto es diferente de móvil a móvil. Por lo que algunos dispositivos que están teniendo sólo transfieren fotos, transfieren archivos, solo cobran, e invierten carga, e importan midi. Por lo que algunos dispositivos funcionan directamente con su computadora cuando dices transferir archivos. Pero algunos de ellos, necesitas tener algo llamado Import midi. Como dice mi dispositivo aquí, tengo teléfono Huawei y es, tengo esta opción aquí. Por lo que voy a seleccionar esta opción al final. Entonces como ven aquí, y luego se cambiará el comportamiento del dispositivo. Entonces hasta ahora, como ves ese visor, no detectaron nada porque necesitamos habilitar el modo de depuración o modo desarrollador, ¿cómo podemos hacer eso? En primer lugar, debes ir a la configuración de tu teléfono. Por lo que iré a Ajustes y Ajustes. Al final, verás algo sobre el teléfono. Se da click en él. Y entonces tendrás algo llamado Build number. Y como ven aquí en el número de compilación, voy a dar clic varias veces en él. Al igual que pondré mi dedo y lo haré como de una manera que tendré opciones. Al igual que me va a decir abajo que ahora te estás comportando como desarrollador. De acuerdo, ahora todo está bien. Mi dispositivo tripa como desarrollador, pero necesitamos habilitar la depuración USB Android. Entonces como ven aquí, también podemos buscar en el escenario. Entonces cuando voy a mi configuración en mi dispositivo, como ven aquí, tenemos una oleada en la parte superior. Por lo que podemos buscar en el escenario. Y en esta búsqueda se puede escribir depuración Android o USB. Y se encontrará directamente en la segunda opción de sus opciones en la configuración. Hacemos click en él. Y luego te llevará a algo llamado opciones de desarrollador. Y en estas opciones de desarrollador, es necesario habilitar el modo de depuración. Simplemente desplázate hacia abajo y verás depuración USB como ves aquí. Por lo que en la depuración USB, solo necesitas permitir eso. Por lo que voy a permitir eso. Y haga clic, Ok. Y tendrás como algunos, alguna notificación diciendo que asesor está tratando de conectarse a tu dispositivo, entonces tienes que permitirlo. Por lo que hay que presionar en este caso. Está bien. Entonces estoy plus OK. Y ahora todo se ha ido y está bien. Y como ves en la visera que mi dispositivo fue detectado. Entonces cuando vayamos a mi dispositivo en la laptop o computadora, cuando haga clic en play, voy a ver que mi dispositivo se está ejecutando en el emulador aquí. Entonces tendré algo exactamente igual al emulador que teníamos previamente con Android Studio. Y mostrará aquí un anillo metálico de mi dispositivo. Por lo que ahora como ves, tengo toda la información o mostrando mi teléfono totalmente en vivo con esta aplicación. Entonces con eso, podrás desplegar la aplicación en tu dispositivo, en tu móvil. Y luego se ejecutará en tu dispositivo móvil en el NIH, piensa que se instalaría en tu aplicación. Se salvaría aquí. Para que no tengas que molestarte en volver a instalar la aplicación o desplegarla y luego ponerla en tu dispositivo. Ya se desplegará en el dispositivo. Entonces si no viste esas opciones, que hablé antes, está aquí. Entonces cuando hago clic, como ves, he hecho fotos de esfera, transferencia de archivos. Algunos iones móviles tienen midi de entrada. Entonces algo que es como equipo de música, no funciona de otra manera, pero algunos dispositivos funcionan con archivos de transferencia. Entonces de esa manera, necesitas solo cambiar hasta que estés más sabio aplicación detectar este cambio. Y en ese caso, puedes seleccionar lo que quieras. Entonces sigamos e implementemos nuestra aplicación al teléfono móvil. Nos vemos con eso. De acuerdo, Así que ahora como ven aquí, mi teléfono ya está conectado a este visor y vamos a desplegar la aplicación a este dispositivo. Como te dije, debes asegurarte de que el emulador de Android, que instalamos con Android Studio, debe estar apagado. Entonces para asegurarnos también, necesitamos hacer los mismos pasos que antes. Entonces primero, necesitamos primero ejecutar los dispositivos ADB, como recuerdas aquí. Por lo que cuando ejecuto dispositivos ADB, mi dispositivo se detectaría automáticamente. Este es el código de mi dispositivo, y entonces estaría aquí. Por lo tanto, asegúrate de que solo tienes un dispositivo en la lista. De lo contrario, la aplicación React no funcionará correctamente. Entonces vamos a ejecutar de nuevo la aplicación usando Android. Voy a volver a poner el mando. Entonces como ves, es instalar la aplicación. Se va a instalar la aplicación a mi teléfono, a la forma física a la que está conectada. Por lo que llevará también un poco de tiempo de construcción. Pero como ven aquí, que se está volviendo más rápido que el emulador. Porque aquí se instaló la aplicación y se desplegó directamente en el dispositivo, y está usando los recursos del dispositivo. No tenemos que usar recursos de la PC para depurar su código y luego desplegarlo allí. Entonces cada vez que hago algo con mi aplicación, voy a cambiar aquí otra vez, núcleos y guardar. Veremos el directamente, aquí se detectará el cambio. Y también el simulador de iPhone está funcionando y sigue funcionando bien. Entonces como ves aquí, tienes una libertad. Puedes usar emulador o emulador o simulador de iOS. Y también puedes usar tu dispositivo. Y como ves, también puedes desconectarte. Se puede apagar el, totalmente el desarrollo o para la aplicación. Y verás que la aplicación se despliega en tu dispositivo. Por lo que te mostraré rápidamente. Y como ves, la aplicación está aquí, núcleos proyectos. Por lo que cuando haga clic en esta aplicación, te veo abierta directamente y también un desconecto el teléfono. Veremos aún la aplicación y funcionando sin ningún problema. Es como instalado a mi teléfono. Por lo que esta es una gran característica porque está usando el Android nativo. Por eso prefiero usar React Native CLI que x bar, x bar también. De acuerdo, Puedes ejecutar la aplicación, pero sobre algún bridging que se llama aplicación x bar, debes tenerla instalada en tu teléfono y también en tu PC. Pero aquí, la aplicación se está almacenando directamente y puedes usarla en tu dispositivo. 15. Aplicación y registro de Hola mundo: La forma más fácil de depurar la aplicación o aplicación móvil es hacer y iniciar sesión. Registro. Quiero decir que hago un registro de consola, como les mostré antes, que tenemos console.log y luego tenemos un dato. Entonces consola log, me buscará en la terminal, pero ¿qué terminal? El terminal que corre bajo Metro. Metro Bundler, me va a mostrar todos los registros de consola que estoy haciendo. Y es como nuestra consola. Entonces de esta manera, si la consola registra algo y guarda la aplicación, ahí va a registrar los datos. Pero hagamos que este código sea más sencillo. Ya sabes que esto es un poco complicado. Por lo que necesitamos hacer esto más simple para que podamos ir paso a paso. Si vas en la propia aplicación, verás algo llamado lo básico. Es como aplicación helloworld. Entonces vamos a dar click en este enlace y nos llevará a algo así como la introducción. Y tendremos aquí algún ejemplo el cual seremos aplicación completa para Hello World. Entonces vamos a copiar todo este código. Te lo voy a explicar más tarde. Por lo que vamos de nuevo a nuestra aplicación en app.js. Como les dije, el punto de entrada de nuestra aplicación, lo borramos todo. Y luego nos gustaría este código, vamos a abrir contra el simulador y luego presionamos Guardar. Entonces vamos a guardar nuestro código. Como ves, se formatea automáticamente. Y como ven aquí, tengo aquí mi aplicación está depurada y cargada. Entonces si cambio esto, diré, por ejemplo, aquí, Hola mundo. Entonces sólo para estar seguros de que todo está funcionando bien. Está bien, bien. Tenemos aquí Hola Mundo. Si vamos a las partes de la aplicación, verás que es muy sencillo. Entonces primero tenemos que importar React desde la biblioteca React, y también necesitamos importar algunos componentes. Y esos componentes se utilizan siempre. La aplicación, como saben, React Native no es HTML ni CSS. No. Es algo así como podemos decir componentes, estamos usando un componente y luego llamamos a esos componentes y colocamos algunos datos dentro de ellos para mostrarlos en nuestra aplicación, iremos en nuestro curso por los componentes que necesitaremos para construir nuestra aplicación. Entonces para eso, voy a explicar los componentes que necesitamos para el propio curso. Entonces, por ejemplo, tenemos aquí a este punto de vista. Esta vista es algo como se puede decir en HTML, es un div y div que contendrá, por ejemplo, algo más componente dentro, o por ejemplo, textos o botones o cuadros de texto. Entonces aquí, como ves que esta vista se está implementando como un div dentro de mi aplicación. Además, puedo tener una vista dentro de ti. Entonces podemos usar como div dentro de div exactamente de la misma manera. Texto. Si quieres colocar un texto, puedes usarlo también. Al igual que puedes colocar cualquier texto es como un span o podemos decir párrafo. Y luego puedes colocar el texto dentro de esa etiqueta aquí. Entonces ahora después de eso, podemos decir que nuestra app componente se llama tu app. Podemos decir que ésta, tu app, está cargada aquí. Entonces cuando cree mi propio componente y lo coloque aquí, entonces el componente será llamado dentro de mi punto de entrada de mi aplicación. Entonces vamos a renombrar todo esto. Podemos decir que esto es AB y este es AP. Demuestra que esta es una función y esta función devuelven para mí esa plantilla React Native. Y esta función se exportará y se llamará en el index.js como se ve aquí. Y se cargará y registrará el componente principal ya que registro AB y AB hará por mí el funcionamiento de la aplicación. Esta historia abreviada, si vamos a ella, se está comunicando con Android y también con las bibliotecas de iOS para ejecutar la aplicación y cambiarla a una app nativa. No vamos a ir en detalle de esto. Nosotros vamos a hacer unas cosas prácticas. No me gusta hacer muchas Teoría. también me gusta hacer siempre algo práctico. Por eso todos mis cursos son poco prácticos. Porque en realidad me gusta aprender de lo práctico. Necesito ver algo frente a mí. Entonces hagamos un registro de consola. Como les dije, vamos a hacer un registro de consola. Por lo que el registro puede ser como podemos decir el punto de entrada de mi aplicación estará dentro de esta función. Por lo que esta función volverá para mí esta plantilla. Pero antes de eso, puedes escribir cualquier código JavaScript, como te dije. Por lo que código JavaScript podemos decir console.log y podemos decir hola mundo. Para que podamos consola log nuestras cosas. Y donde voy a ver esto aparecerá, aparecerá en mi terminal, que se llama Metro, como te mostré, que se ejecutará inmediatamente después de empacar la aplicación. Entonces, vamos a acercar eso. Yo quiero hacerlo más grande. Y como ven aquí, tenemos Hello World. Agradable. Entonces ahora si voy de nuevo a mi solicitud y cambio esto, como digo aquí, Hola Mundo. Entonces veremos que el inicio de sesión sigue registrándose aquí, y esa es información que se llama log. De acuerdo, genial, así que definamos, por ejemplo , constante, alinearlo constante y digo x. Y esta x tendrá, por ejemplo, valor, mi curso. Y entonces voy a poner esto, y ahora voy a consolar esta x para que podamos quitar esta, guardar todo. El formateo automático está funcionando bien. Y conforme voy a la terminal, nuevo, veré mi rumbo. Agradable. Entonces esto es JavaScript. En realidad estamos escribiendo aquí JavaScript, que vamos a utilizar dentro de nuestros componentes para esta parte, que se llama estilismo. Es como el estilo, pero SS Nazi, Es estilo React Native. Y veremos más adelante cómo vamos a darle estilo a nuestra aplicación. Hablaré de todas las cosas que necesitamos peinar para nuestros componentes. Por lo que de esa manera, puedes iniciar sesión en consola y depurar tu aplicación usando la consola de tu aplicación. 16. Debugging el Chrome: De acuerdo, En esta conferencia, les voy a mostrar cómo depurar nuestra aplicación. Por supuesto, la depuración es una característica muy grande, así que podemos usarla para rastrear nuestros problemas, como les dije, vale, Podemos usar el registro de consola, pero también es mejor usar la depuración. Hay dos formas de depurar en React Native. Primero de ellos es usar Google Chrome. Sí, usando el navegador. Por supuesto que también puedes usar un navegador para depurar tu aplicación. Cómo podemos hacer eso. En primer lugar, debes hacer clic en tu simulador, y luego hay un atajo. Tienes que hacerlo, que es Control D en Windows o Command D en Mac. Por lo que cuando hagas clic en Control D, tendrás un menú como este. Por lo que tendrás múltiples opciones. Uno de ellos debug con el Chrome. Por lo que cuando haga clic en el bug con Chrome, se abrirá para usted en el depurador. Por lo que depuro página. Entonces como ven aquí, podemos ver que tenemos alguna página de depuración. Y esta página contiene alguna información. Para que puedas empezar a depurar. De acuerdo, entonces voy a crear el depurador. Cómo puedo ver, como cómo puedo colocar un punto de ruptura en mi Chrome. Entonces primero tenemos que abrir ese DevTools. Entonces, ¿cómo abrir las DevTools? Simplemente presiona F2 presionando F2. Como ves tengo aquí el inspector, el DevTools de Chrome. De acuerdo, ahora necesito colocar, por ejemplo, un punto de ruptura, pero dónde, cómo puedo llegar al archivo, que es por ejemplo, para mí, el archivo ab.js. Entonces primero, si recuerdas, aquí tenemos un registro de consola. Entonces estoy seguro de que si abres este y abres la consola también, verás el mensaje que hemos impreso. Se ubicará en la consola aquí. Entonces lo puse así. Entonces cuando presione recargar, voy a ver que mi aplicación se recargó. Por lo que ahora podemos ver este mensaje. Entonces cuando haga clic en este app.js seis, me mostrará en el código donde he colocado este comentario, donde he colocado este registro de consola, y se abrirá para mí el código exactamente como lo tengo en código de Visual Studio. Entonces de esa manera, puedes crear un punto de ruptura. Ya sabes, en Chrome puedes crear un punto de ruptura haciendo clic en el número de línea. Entonces cuando hago clic aquí, creé un punto de ruptura. De acuerdo, vamos a recargar ahora la app. Y como vemos que nos hemos detenido en el punto de ruptura automáticamente. Entonces ahora llego a ver y comprobar el valor de x, por ejemplo, simplemente colocando el ratón sobre él. Y puedo ver qué está pasando aquí. Entonces cuando quiero ir un paso más, doy clic en esta flecha. Para que podamos dar un paso más. Y luego voy a ver que x tiene valor, mi curso. Entonces de esa manera, estamos haciendo depuración vía Chrome. Y por supuesto, después de que termines de depurar, presionas play y la aplicación continúa cargando. Por lo que no se puede tratar el archivo app.js exactamente desde las fuentes aquí, como siempre se sabe. Pero necesitas colocar un registro de consola o puedes habilitar este y habilitar los arcos de extremo en las excepciones de capa. Entonces cuando haya una excepción, te mostrará en tu código de aplicación dónde se coloca la excepción. 17. Debugging con VSCode: Otra forma de depurar nuestra aplicación es usar el depurador de código de Visual Studio. Visual Studio también proporciona una herramienta depuradora que podemos usar así como cómo lo hicimos con Chrome. Pero antes que nada, e información muy importante que hay que hacer antes de configurar el depurador en código de Visual Studio, hay que apagar Metro. Metro cómo se abre en nuestra terminal automáticamente cuando ejecutamos iOS, React app nativa. Entonces en ese caso, necesitamos cerrar Metro. Lo mismo puede pasar con Android. Entonces vamos a cerrar eso. Entonces lo voy a parar aquí. Al igual presionando Control C o Comando C. Y entonces lo voy a cerrar totalmente. Y como ven aquí, que ya no tenemos depuración y nuestra aplicación no se puede cargar y ahora tenemos forma normal. Entonces en ese caso, ahora vamos a configurar un depurador usando Visual Studio Code. Entonces, ¿cómo podemos hacer eso? En primer lugar, tienes que ir a este botón. Podemos decir correr y depurar. Y luego encontrarás aquí algo como crear archivo JSON Aidan y lavandería JSON es el archivo donde vamos a poner la configuración para nuestro depurador. Por lo que cuando haga clic en este enlace, entonces obtendrá algunas opciones. Uno de ellos debe ser el nativo AC. Pero como ven aquí, no tengo esta opción porque debo instalar la extensión de la herramienta React Native, que ya les he dicho antes. Se trata de herramientas nativas de React. Entonces en un caso que no funciona, a veces se le pide recarga a geu. Por lo que solo puedes volver a cargar la aplicación o hacer clic en recargar. O por ejemplo, simplemente puedes desactivarlo y habilitarlo de nuevo, y tendrás esa opción. Entonces por ejemplo, tengo aquí otra vez solo para estar seguro de que está funcionando, vale, está bien. Ahora voy a hacer clic en herramienta de depuración y voy a crear, crear archivo JSON largo. Ahora tengo opción React Native. Entonces si no tienes esta opción solo para iniciar la extensión y volverás a tenerla, vale, haces click en React Native, entonces obtendrías otras opciones. Uno de ellos está apegado a empaquetarlo. Hay múltiples formas de depuración, pero por ejemplo, adjuntar al empaquetador es la más fácil. Por lo que podemos desmarcar este y agregar eso al packager. Ahora estoy dando click en Aceptar. Y va a generar para mí un archivo, archivo JSON, donde tiene alguna configuración llamada adjuntar a packager. Y este intento de presupuestar y empacador tiene algunos comentarios donde funcionará con mi depurador. Ok, ahora necesitamos ejecutar nuestra aplicación. No vamos a ejecutar nuestra aplicación de una manera como lo hacíamos antes. Al igual, no iré a Línea de Comandos y diré en px React Native o un iOS o no. Vamos a dejar que el adjuntar al empacador ejecute la aplicación por mí. Entonces si voy aquí a la depuración, Por supuesto, como si estás en la lista de archivos, vas de nuevo al depurador. Tendrás botón aquí y este botón, se llama ejecutar y depurar. Y tendrás múltiples opciones. Uno de ellos está en eso a empacador. Se basa en la configuración que tenemos aquí en el préstamo JSON. Y si tienes curiosidad por saber dónde está este largo Jason se crea. Como ves, será en punto v es carpeta de código. Como les dije antes, que dentro de esta carpeta ponemos alguna configuración la cual compartimos con el equipo, como yo ajustes como lanzamiento, como por ejemplo, alguna recomendación para extensiones, etc. Así que ahora podemos agregar y ejecutar nuestra aplicación. Entonces vamos a dar click en correr. Y como ves, va a ejecutar la aplicación exactamente como lo está haciendo Metro. Si recuerdas que aquí tenemos el mismo letrero y ahora se puso en marcha el empacador. Está bien, bien. Pero ahora mi aplicación que no se inició automáticamente, por lo que necesitas hacer eso y ejecutarla de forma automática o manual, lo siento. Por lo que solo tienes que hacer clic en él. Y tienes, por supuesto, como te dije, la aplicación se instalará en tu máquina o en tu dispositivo y simplemente la ejecutas. Y como ves, al igual que el atacante ya se sabe que hay algún teléfono está ejecutando la aplicación. Por lo que ahora podemos empezar a depurarlo. De acuerdo, intentemos colocar un punto de descanso. Voy a poner aquí un punto de ruptura en nuestra constante que creamos antes. Por ejemplo, éste, y luego guardar. Entonces como ves que la depuración empieza a funcionar. Entonces voy ahora paso a paso. Y aquí tengo el valor de x, exactamente como teníamos con el Chrome. ¿ De acuerdo? En ocasiones el punto de ruptura no funcionará para ti porque necesitamos activar la depuración con Chrome. Entonces no lo sé, lo están llamando activa el trabajo con crecido, pero debería ser como solo activar la depuración. Entonces cómo podemos activar la depuración, si recuerdas, presionamos el atajo, que es Control D o Command D en Mac. Y a veces necesitas presionar varias veces Control D porque no aparece. Rápido, así que tienes que hacerlo varias veces hasta que llegue aquí. Entonces ahora después de eso, ves aquí empezar a depurar con Chrome y luego haces clic en él. Si no haces clic en eso, por ejemplo, voy a detener la depuración. Y luego bien, necesito continuar con mi solicitud. Está bien, sigamos. ves que ya no hay respuesta porque no está apegada a la depuración porque ahora no puedo depurar mi aplicación. Este punto de ruptura no puede ver lo que está sucediendo en la aplicación. Por lo que es muy importante activar el bug con Chrome. Está bien, está escrito con Chrome, pero es con cualquier cosa que sea como apegada al empacador. Por lo que podemos justo aquí, adjuntar depurador o depurar con Chrome. Ahora puedo colocar mi punto de ruptura, recargar la aplicación, me detuve en el punto de ruptura. Por lo que debes estar seguro de que dos cosas. En primer lugar, cerrar el metro, esa terminal, que cerramos al principio. Segundo, debes habilitar la depuración aquí en el DevTools de la aplicación son lo tenemos aquí. Otra información importante si quieres dejar de depurar, porque sabes que la depuración está haciendo que la aplicación sea muy lenta. Por lo que necesitas detener la depuración. Tienes que detener la depuración haciendo muchas cosas. En primer lugar, es necesario hacer clic en este depurador de detención y también dejó de depurar en las DevTools como se ve aquí. Y además, necesitas encontrar un comentario presionando F1 y la F1, necesitas buscar React Native. Detener empacador. Es muy importante hacer eso porque lo contrario el empaquetador sigue funcionando en segundo plano. Y cuando ejecutes el paquete o de nuevo, o ejecutas nueva aplicación, te dirá que el empaquetador ya está funcionando y no lo sabrás porque lo detuviste todo y lo detuviste desde aquí y es sigue corriendo y no sabes desde dónde detenerlo. Entonces la mejor manera de hacerlo es haciendo y presionando F1 y encontrando stop packager desde el comando nativo React. Y entonces se detendrá el paquete o totalmente. Y podrás ejecutar, por ejemplo, la aplicación nuevamente tan normal como vimos en la terminal. O puedes ejecutarlo de nuevo con adjunto a paquete o mencionando el error que te dije, tal vez obtendrás este tema como ves aquí, que obtendrías la suma. Otro depurador ya está conectado al packager. Por favor, ciérrelo antes de intentar depurar con código VS. Entonces esto es muy importante. Por lo que también necesitas detener al empacador, como te dije Aquí, detén ese empacador, empaqueta o parado. Y también es necesario revisar la terminal. Todo está bien, no tienes nada corriendo. Y también que entonces minnow, que hemos utilizado aquí. Por lo que necesitas saber eso o brillante totalmente. Entonces lo tengo aquí. Dejar de fumar. Está bien. Ya tienes en tu teléfono desconectado de Metro y luego corres adjuntar a packager y la aplicación se ejecutará de nuevo. Entonces como ves, lo tengo funcionando de nuevo, pero no tengo ninguna aplicación. Por lo que solo necesitas abrir de nuevo las DevTools. Y por ejemplo, tal vez puedas decir recargar la aplicación solo para que vuelva a conectarla. Y así depurar con Chrome para activar la depuración con puntos de ruptura. Por lo que todas estas soluciones de problemas, hay que tener cuidado. Mira este video varias veces. Si tienes problemas, entonces sabrás depurar con VS Code. 18. Cómo obtener la API de datos de películas: De acuerdo, ahora estamos iniciando la segunda sección después de haber preparado nuestra vitamina y agregar instalado lo que se requiere de nosotros. En primer lugar, necesitamos una API, necesitamos un dato, necesitamos imágenes de las películas. Necesitamos de alguna manera ejecutar un video de la película. Entonces para eso, necesitamos algo llamado API. Y la API nos proporcionará una lista de datos como datos JSON, que podemos utilizar en nuestra aplicación y mostrar cómo se ve aquí en la página web. Existe un sitio web que se llama la película db.org o la película database.org, que está ofreciendo esta API. Entonces como ven aquí, tenemos lista de películas sólo va. Algunas críticas sobre películas solo se está mostrando como algunas imágenes que son los actores y alguien ve, etcétera. Por lo que voy a utilizar la API de este sitio web. Y de nuevo, vamos a mostrar esta información pero en aplicación móvil. Pero por supuesto, si quieres construir tu propio marco, necesitas construir una API. Y construyendo una API puedes usar múltiples tecnologías de backend, como por ejemplo, NodeJs, todo C-sharp. Incluso puedes usar una Firebase. Pero por hacerlo rápido, porque estamos especializados aquí en frente y, y desarrollo móvil. No somos desarrolladores back-end. Vamos a utilizar esta API que ya está implementada. Y si quieres saber cómo construir una API que es como basada en la espalda y basada en Node.JS. Puedes seguir a mi página donde es bits azules aunque Dev, tengo un curso completo sobre construir una API web de e-commerce completa. Esa API lo harás, o en ese proyecto, aprenderás a construir la API tú mismo. En nuestro caso, será como la API de una película. Estás, puedes guardarlas películas, por ejemplo. Hacerlos siempre un filtrado de toda esta información. Por lo que este es un verdadero proyecto práctico con el comercio electrónico, pero además puedes saber subir imágenes, cómo crear las API, y cómo puedes asegurarlas. Para nuestro curso, vamos a utilizar la API que se proporciona en este sitio web, que es de forma gratuita y está disponible para todos. En primer lugar, tenemos que dar click en Unirse, CMDB. Tenemos que registrarnos ahí y crear una cuenta para tener acceso a su API. Por lo que voy a llenar este formulario rápidamente. Y como ven aquí, llené mis datos y me voy a inscribir. Y después de eso recibirás un e-mail y reenviarás ese e-mail que necesitas. Verifica tu cuenta, por lo que debes acudir al correo electrónico. Llegarás allí un enlace, y luego haces clic en el enlace y luego se verificará tu cuenta. Por lo que voy ahora a mi correo electrónico. Obtuve información de que mi correo fue verificado. Por lo que voy ahora a iniciar sesión. Entonces aquí ya tenemos la pantalla. Voy a volver a poner mi contraseña y luego mirar adentro. Entonces vamos a ver después de que mi aplicación o nuestra cuenta se haya creado. Por lo que ahora tengo la cuenta se crea. También podemos usar la API para eso. Entonces cómo podemos empezar a usar API, es muy fácil. Ya sabes que EPI, es algo así como un enlace. Y este enlace, puedes obtenerlo y puedes obtener datos de él, cómo podemos usar ese enlace o cómo podemos encontrarlo. En primer lugar, debes ir a la configuración de tu perfil. Por lo que tendrás que hacer click aquí y luego dar click en Configuración. Y luego después de esa configuración, ves que tengo toda mi información. Tengo algo llamado API. Y para la API necesitamos solicitar una clave API. De acuerdo, vamos primero sin embargo, documentación de esta API. Dijo que nuestra documentación primaria se encuentra en este enlace. Entonces vas a este enlace y como ves aquí, obtenemos toda la información y todos los pasos, cómo podemos usar esta API. Entonces ahora les voy a mostrar esos pasos rápidamente. Entonces, antes que nada, necesitamos ir a nuestra cuenta ahí y luego API. Y luego quiero generar o solicitar una clave API porque cada API necesita una clave. Pagarte puedes elegir la opción desarrollar porque somos desarrolladores y vamos a utilizar esta API. Y decimos que nuestro proyecto sin fines de lucro. Por lo que necesitamos aprobar algún acuerdo para poder leer toda esta información y luego podemos aceptar eso. Y después de eso, cuál es el tipo de uso. Por lo que necesitas saber cuál es el tipo de uso para tu aplicación. Por ejemplo, estoy diciendo una aplicación móvil, o por ejemplo, una aplicación de escritorio o un sitio web. Depende de ti. Por ahora voy a usar una aplicación móvil, por ejemplo. Nombre de la aplicación. Podemos decir la aplicación Películas por sólo un nombre, que es simple. Y luego haces click en enviar. Y después de eso tienes una notificación de que necesitas llenar todo el formulario. Por lo que voy a llenarlo rápidamente frente a ti y daría clic en Enviar. Por lo que siento abajo toda la información requerida. Acabo de poner frente a ti alguna información aleatoria para privacidad. Entonces voy a poner someter. Entonces si dice aquí, estado de dirección no puede estar en blanco. Por lo que puedo poner aquí estado uno, y luego podemos dar click en Enviar. Se han hecho nuestros cambios, y luego obtengo una clave API. Esta clave API, puedes usarla para obtener datos de la base de datos de este sitio web. Entonces, por ejemplo, aquí hay un ejemplo, solicitudes API. Entonces podemos tomar esta URL, este enlace, y luego podemos ir a Cartero o cualquier otra herramienta donde estés rastreando o viendo un dato. Por ejemplo, puedes usar esta URL también en el navegador. Entonces por ejemplo, iré aquí y luego pondré el enlace en el navegador. Y como ven, obtuve múltiples datos e información sobre alguna película. Entonces por ejemplo, consigo caídas adultas, toda esta información para eso. Como ven aquí, que esta API es fea. Entonces estoy usando una herramienta que se llama Cartero. Por lo que este post-dinero, puedes descargarlo desde su sitio web original. Entonces iré aquí. Y como ves tenemos en Google el primer enlace. Y en el primer enlace puedes instalar y descargar un cartero. O si no encuentras el enlace fácilmente, puedes ir directamente aquí en Google para descargar Postman, y luego tendrás que descargar la app directamente en función de tu sistema operativo. Entonces después de descargar cartero, como ven aquí, obtuve esta vista o la pantalla. Entonces este es cartero el cual vamos a usar o para probar nuestra API. Entonces voy a abrir una nueva pestaña. Y esta pestaña me mostrará múltiples métodos para GET, post, PUT, etc. Todos estos son información que voy a explicar por obtener los datos. Estamos solicitando GET, estamos haciendo una solicitud get. Entonces simplemente pegas la URL aquí. Como ves, la API es un enlace que se proporciona y siempre sufijo con clave API. Y esta clave API, lo que conseguimos para nuestra cuenta. Entonces para eso, después de pegar esta API de ejemplo, podemos hacer clic en Enviar. Y cuando envíe una solicitud, entonces obtendré todos los datos sobre, por ejemplo, alguna película. Y esta película se llama Fight Club. Y hay descripción sobre popularidad de películas y toda esta información y reseñas en países, tiempo de ejecución, lenguaje hablado, todos los datos que necesito. Y son exactamente los mismos datos que se ven en su página principal. Entonces por ejemplo, iré aquí y revisaré Fight Club, que es como una película. O podemos hacer click en cualquier película, por ejemplo, los Simpson. Y luego ves descripción general, y ves quiénes son el actor. Todo esto viene con la API, que te mostré ahora en el Cartero. Entonces para eso, también necesitas usar esa API en tu aplicación para mostrar, por ejemplo, como ves también una imagen para que el usuario pueda hacer click en ella y ver algún detalle. De acuerdo, echemos un vistazo a la documentación de esta API. Como ves, hay mucha información que necesitas. Entonces por ejemplo, hay películas y dentro de las películas, hay mucha información como obtener imágenes, obtener créditos, buenos cambios. Película de incursión por ejemplo, obtener películas más recientes, conseguir ahora reproduciendo películas que son, por ejemplo, quiero conseguir películas populares y películas populares. Como ves vas a probarlo. Verás el mismo enlace aquí. Entonces para probar esta API, solo necesitas copiar toda esta URL, ir a Postman y luego colocarla aquí. Y luego necesitas reemplazar esta clave API entre todas esas flechas por tu clave. Por lo que voy a volver a mi cuenta. Y luego voy a copiar la clave API. Y luego iré y reemplazaré con esta clave API como ven aquí. Por lo que ahora tengo toda la información. Tiene alguna otra información como el lenguaje y las páginas porque serán múltiples páginas, como la página 1, la página 2, etc. Así que hagamos clic en enviar y esperar la respuesta. Bonito. Tenemos respuesta. Tenemos múltiples páginas o múltiples como resultados. Uno o primero de ellos es primera película y segunda película, tercera película, como ven aquí. Y cada película tiene como algún nombre o título y tiene como alguna imagen y visión general. Hasta el momento que siempre hay que seguir la documentación para conseguir lo que queremos. Y durante el curso, voy a utilizar esta documentación para cumplir con lo que necesitamos para nuestra aplicación. Entonces lo que se requiere de usted ahora, simplemente regístrese en este sitio web, cree una clave API, y luego vamos a pasar a esa documentación. Y veremos en la próxima conferencia durante la construcción de nuestra aplicación. 19. Crear el proyecto de App de películas: De acuerdo, ahora vamos a crear un nuevo proyecto. El proyecto que vimos previamente que creamos un proyecto Hello World o algo así como un proyecto de curso, que vimos en la introducción. Pero ahora vamos a crear un nuevo proyecto para nuestra aplicación de películas. Entonces para hacer eso, hacemos ese mismo paso. Abrimos la terminal haciendo click en Control J. Y luego vamos a escribir el comando MP x React Native en ella, y luego el nombre de tu proyecto. Pero antes de eso necesitamos saber dónde estamos. Por lo que ahora estoy abriendo la terminal ay, necesitas crear una carpeta. Por lo que prefiero crear la carpeta en mi escritorio. Entonces digamos, por ejemplo, saber que ahora estoy usando el sistema Mac. Por supuesto que tú, cuando estés en Windows, verás la carpeta donde estás abriendo Visual Studio Code. Pero ahora acabo de abrir Visual Studio Code. No estoy en ninguna carpeta porque si haces click aquí, no hay nada. Entonces, en primer lugar, podemos abrir sólo la terminal y comprobar ¿dónde estamos? Por lo que voy a escribir LS, como lista para mí, las carpetas en las que estoy. Por lo que tengo aquí todas esas carpetas. Voy al escritorio. Por lo que puedes decir escritorio y presionas Tab, hará autocompletar. Y luego se puede decir claro, como se puede borrar la pantalla. Ahora estás bajo el directorio Desktop. Entonces vamos a crear ahora un nuevo directorio. Podemos darle un nombre, Por ejemplo, proyectos o por ejemplo, aplicaciones en general, como donde vas a hacer tus aplicaciones. Por lo que lo daré para el examen hacer nefasto, que está creando un directorio. Creará para mí una carpeta en mi escritorio y le daré un nombre, aplicaciones, no sólo eso. Por lo que ahora voy a decir CD, como el acceso, las aplicaciones. Al igual que ahora estoy bajo Aplicaciones aquí, puedo poner mi comando nativo React, como vimos anteriormente para crear una aplicación. Entonces cómo podemos hacerlo y px Reaccionar Nativo, y luego en él. Y luego doy un nombre para la aplicación. Por ejemplo, voy a dar películas en, en este caso, voy a correr y me va a descargar las plantillas y todos los archivos requeridos como vimos anteriormente en la introducción. Entonces voy a saltarme este video y volver a ustedes cuando estén instalados todos los archivos. De acuerdo, entonces ahora mi aplicación se instaló y ahora tenemos sus recomendaciones a las que nos acostumbramos. Por lo que voy a ir o navegar al directorio. Yo diría cd, aplicación de películas. Y luego entraré dentro de la app de películas. Estemos seguros de que estamos dentro. Nosotros tecleamos ls, vale, estamos dentro de aquí. Entonces ahora vamos a abrir el proyecto en código de Visual Studio. Por lo que iré aquí y luego diría Abrir Carpeta. Iré a mi carpeta, a las aplicaciones de escritorio, y luego elegiré aplicación de películas y luego abriré el proyecto. Entonces como ven aquí, tenemos todos los expedientes de los que hablamos antes. Entonces vamos a abrir de nuevo la terminal, MP x, React, Native, y luego correr. Por lo que aquí puedes elegir un sistema en el que quieras trabajar. En este curso. Voy a trabajar en sistema iOS. Y por supuesto, cuando terminemos la aplicación, te la voy a mostrar también en Android. Entonces ejecutemos la aplicación en iOS. Entonces mi simulador por dónde empezar. Y entonces podremos usarlo y ver la aplicación que hemos creado. Por lo que nuestra aplicación se está ejecutando ahora como se ve en el sistema iOS. Entonces lo que tenemos que hacer para reemplazar todo su código predeterminado que teníamos o habíamos creado aquí, y reemplazarlo por algo como Hello world. Si recuerdas, hemos creado una aplicación que se llama Hello World. Y para recuperar el código de esta aplicación, puedes ir a la documentación de React Native, y luego dices introducción. Y luego en la introducción hay aplicación helloworld. Puedes usarlo para startup en ese proyecto. Entonces, antes que nada, voy a copiar este código. Hay dos tipos de estilo de código de estilo React Native. Para que podamos usar uno de ellos. Para mí, prefiero usar el componente de función porque es más corto y más fácil de leer, no como un componente de clase. Para que puedas depender de ti, puedes elegir uno de ellos. Componente de función. Tomemos éste y tomemos todo este código. Vuelve a nuestro Visual Studio. Hagamos la pantalla como normalmente me desarrollo de una manera como pongo esta pantalla como esta pequeña talla. Y aquí la aplicación. Y también hacemos esto más pequeño aquí. Para que podamos trabajar con más libertad. Entonces en el app.js, Vamos a quitar todo y poner aquí nuestro código. Y luego guardamos en nuestra aplicación se erosionará y se reiniciará y se puede empezar a codificar aquí. Entonces si recuerdas que hemos configurado todo como más bonito, toda la configuración que nos necesitamos para codificar en React Native. Por lo que todos ellos, han configurado de forma predeterminada, puedes agregar tu configuración como quieras. Por lo que aquí tenemos la aplicación de la app. Eliminemos todo esto y cambiemos el nombre, por ejemplo, a app solamente. Al igual que no tienes que tener la app Hello World, no es agradable. Por lo que podemos simplemente cambiar el nombre de todos estos para agregar en index.js. Vas ahí y solo asegúrate de que solo estás importando app y todo va a funcionar bien. Por lo que ahorramos, tenemos app.js y ahora estamos listos para codificar. 20. Crear exhibición de servicio de datos: De acuerdo, vimos antes cómo podemos agarrar datos de películas API, que construimos previamente, o que obtuvimos de la base de datos de películas. Entonces como ven aquí, estoy usando Cartero y este cartero, por ejemplo, estoy usando una de las API para agarrar películas populares. Y las películas populares se devuelven de esta manera. Por lo que existe un campo llamado página para referir el número de las páginas que tenemos y también sus resultados. Entonces dentro de eso es todo, será array de películas. Entonces lo que vamos a hacer ahora que necesitamos mostrar, por ejemplo, lista de nombres de películas populares que vienen de esta API. Entonces para hacer eso, necesitamos usar un servicio. Y usando un servicio para agarrar datos de la API, necesitamos una biblioteca llamada eje. Entonces vamos a la terminal y necesitamos instalar una biblioteca que se llama eje. Y este eje, puedes instalarlo por MPM o NPM instalar y luego axioma. Por lo que después de la instalación de esto, asegúrate de que estás en la carpeta de tu aplicación en el mismo nivel de paquete Jason. Y vas a revisar paquete Jason, verás que se agrega ese eje. Entonces después de eso, podemos usar ejes fácilmente. Entonces, ¿cómo usar ejes? Vayamos al app.js. Y aquí podemos decir axiomas de importación desde eje. Por lo que es muy fácil porque ya lo hemos instalado. Por lo que puedo decir eje de importación desde eje. Por lo que antes de abrir la aplicación, voy aquí y defino una constante como en general. Y le di un nombre, por ejemplo, conseguir películas populares. Y esta será una función que defina una función será de esa manera. Por lo que podemos decir que tenemos una función de fila, como vimos con la función app. Por lo que la app es función de flecha y se abre de esa manera. Y se puede hacer lo que dentro de ella. Es como la función y luego conseguir películas populares. Y entonces abrí esos impuestos. Entonces es exactamente de la misma manera. Pero aquí lo estamos haciendo de diferente manera porque estamos usando script de ecommerce o ES6. Por lo que tenemos que acostumbrarnos al estilo de las funciones. Por lo que quiero almacenar la lista devuelta de películas populares en algunas variables. Por lo que tengo aquí constante. Y le di a esta constante como un nombre. Decimos respuesta, que es la respuesta que viene de la API como esta. Y luego voy a tener la respuesta usando eje. Entonces tendré aquí eje, que he importado aquí. Axiomas se está comportando como Cartero que podemos decir en el fondo. Porque doy un GET o post o ambos, o elimino cualquier cosa de la API. Entonces vamos a usar get. Entonces cuando pongas un punto, entonces llegarás aquí múltiples métodos. Uno de ellos es get. Entonces para obtener los datos, como ves, me está pidiendo que proporcione con URL y esta cadena URL. Si recuerdas, lo tenemos previamente y vimos cómo construimos esta URL. Lo obtuvimos de la API de películas y pasamos la clave API entre ella. Entonces ahora voy a usar este enlace y no necesito tener los otros parámetros como el lenguaje EN nosotros a menos que si quieres tener un lenguaje diferente de las películas por ahora, solo lo voy a usar así. Por lo que tomaré la URL principal de la API y luego las películas populares. Vimos cómo conseguimos eso previamente. Y luego la clave API. Por lo que copiaré esta parte y luego volveré al código. Y aquí colocaré la misma cadena que tengo de películas API. Entonces colocamos esta bebida. Y luego la mejor manera de saber si realmente estamos recibiendo respuesta. Hemos usado log de consola, look log, y luego RESP, y eso es todo. Entonces veamos qué eje está regresando para mí. Pero primero, donde puedo llamar a este misil, ¿necesitamos llamar a este método cuando se está ejecutando la aplicación? Entonces si recuerdas, estábamos consolando a globo algo antes de regresar y se estaba ejecutando cada vez que recargo o actualizo la aplicación. Por lo que podemos usarlo aquí. Entonces puedo decir que consigue películas populares, el mismo método que he creado aquí. Entonces vamos a guardar todo. Y ahora después de guardar el IC que se carga la aplicación, pero necesitamos ver el registro de la consola al look de la consola está en el terminal. Si recuerdas, nuestra terminal, hemos creado y se abre automáticamente cuando ejecutamos la aplicación. Entonces voy a hacer que sea más grande ver esos datos. Y como ven aquí que nos estamos volviendo nulas porque estamos diciendo aquí, como si estuviéramos recibiendo alguna API o alguna respuesta, pero está vacía. Está totalmente vacío. No estamos consiguiendo nada como tú eres 0 algo y comprensible. Por lo que necesitamos de alguna manera obtener los datos correctos. Esto debido a que ese método, estos obtienen películas populares se ejecuta antes de este getMethod, que es proporcionado por eje. Porque este método debes proporcionar como esperar hasta que esto sucediera, y luego podemos consolar la respuesta. Entonces la respuesta aquí no está sacando nada del eje porque aún no está terminado. Necesitamos un tiempo, tenemos que esperar. El API está bien, me respondió y luego puedo continuar con su registro de consola. Entonces cómo podemos resolver eso, necesitamos usar JavaScript asincrónico. Podemos agregar una palabra clave antes de que los ejes dot get. Podemos decir como Esperar, esperar hasta que la respuesta esté lista, y luego continuar con el código. Entonces cómo podemos hacer eso, sólo decimos aquí, esperar palabra clave. Esta palabra clave await está reservada en JavaScript, pero requiere algo que el método contenedor, que es éste, debe ser un fregadero. Debemos hacerlo asíncrono como podemos decir como es método sincronizado con hielo, es JavaScript isócrono. Tenemos que esperar de alguna manera la respuesta aquí. Entonces debemos de esa manera hacer de este método como asíncrono. Entonces, vamos a guardar eso. Y entonces se recargará nuestra aplicación. Vayamos a la terminal. Y ves que conseguimos todos los datos. Tenemos todos los datos en el registro de la consola exactamente cómo los tenemos en Cartero. Por lo que nos muestra que vienen todos los datos, que como queríamos con datos extra. Y como ves, es un poco sucio. Tenemos que alinearlo porque viene como JSON y necesitamos alinear esos datos JSON, cómo vienen en el back-end. Entonces para ver la respuesta como la tenemos en Cartero, como ves aquí en el registro de la consola, podemos hacer como algún truco que estará en JavaScript. Por lo que puedo usar una biblioteca JSON. Por lo que se llama JSON o con letra mayúscula y luego stringify. Y este método stringify, puedo rodear su respuesta a su alrededor, pero necesitas tener parámetros extra que sean nulos como este. Y luego el valor, algún valor que es un espacio que será 2. Entonces de esa manera dará un formato para el JSON exactamente cómo lo estamos viendo en Cartero. Entonces soy cuerda de polvo definiendo la respuesta. Y quiero mostrarlo de alguna manera más estilizado y formateado. Entonces cuando guardes y vuelvas a la terminal, veremos que la respuesta está funcionando por eso. Por lo que se puede ver la respuesta JSON de una manera más agradable. Entonces de esa manera estamos listos para agarrar la API. Pero el primer axioma es poner datos extra sobre la API. Entonces por ejemplo, pones datos y luego puso otra información sobre la API, sobre los encabezados que no necesitamos y no nos importa. Por lo que necesitamos obtener sólo los datos porque los datos volverán para mí solo página y resultados hasta el momento que como ustedes saben, necesitamos comprobar cómo contenía la respuesta. Entonces lo que está conteniendo, así que yo, pongo punto y como ven aquí, ese eje volvió para mí campos extra para esta respuesta. Uno de ellos son los datos. Aquí, los datos son datos almacenados que vienen de la API. Otras cosas como encabezados de estado, los veremos. Veremos como por ejemplo, el estado para 0 para como la API no encontrada, etcétera. Entonces por ahora voy a conseguir sólo los datos que vienen dentro de esa respuesta. Digamos que vayamos de nuevo a la terminal para comprobar si todo está bien. Vamos a nuestra terminal. Está bien, bien. Estamos consiguiendo ahora sólo los datos, pero es lista muy larga. Tomemos una película. Entonces aquí, si recuerdas, obtengo los datos y dentro de los resultados, Es array. Y dentro de esta matriz contendrá películas. Por lo que cada miembro de esta matriz es una película. Tomemos el primero. Entonces volveré a ir al código y luego diré aquí, no vuelvas por mí, todos los datos devueltos por mí, resultados. De acuerdo, no puedes encontrar aquí resultados porque los datos son ninguno, se desconoce. No podemos ver en el editor lo que la API es muy diminuta regresando. Entonces tengo que asegurarme de que está bien, obtengo resultados. Y entonces exactamente cómo nos dieron repujado hombre o en la terminal. Y entonces obtendré el primer resultado. Para obtener peores resultados, ponemos estas etiquetas de matriz y ponemos 0. Entonces primera entrada de esta matriz. Entonces voy a la terminal. Nuevamente, vamos al final. Podemos ver lóbulo aquí. Por lo que significa que como si empezara un nuevo registro. Y en este registro, ya ves tenemos una película. Entonces eso es muy grandioso. Ahora estamos listos para exhibir esta película en nuestra aplicación aquí. 21. Mostrar los datos de la película: De acuerdo, Así que ahora en lugar de mostrar hola mundo, vamos a mostrar una película y la película que conseguimos en la consola. Aquí lo vamos a exhibir. De acuerdo, En primer lugar, tenemos que distinguir entre la plantilla o la plantilla de React Native y el código JavaScript. Entonces de esa manera, cuando obtengo algunos datos a través de un servicio, quiero mostrarlos en la plantilla. Cómo podemos hacer eso. No puedo ir así. Por ejemplo, voy aquí y pongo el método aquí y luego bien, eso, que me mostraron. No, no es posible así. Necesitamos primero obtener los datos a nuestra aplicación, que está en función AP, y luego mostrar los datos que se devuelven desde la API o desde el propio servicio. Entonces, en primer lugar, tenemos que devolver los datos. Entonces en lugar de la consola regir los datos, quiero devolver estos datos. Entonces podemos decir de esa manera regresar y los datos que ya no necesitamos al stringify JSON porque lo usamos solo para darle estilo a ese código en el orden la salida en el registro de la consola. Ahora tenemos más y película devuelta por este método. O podemos llamar a este método conseguir película popular, pero ahora la tenemos películas. Entonces regresemos todas las películas primero. Por lo que este método regresará para mí películas populares. Pero este método, Cómo ahora puedo usarlo en la aplicación. Entonces si voy ahora aquí y digo punto después del método, después de que lo llame, llegaré aquí entonces, porque esta película ahora está regresando una promesa. ¿ Por qué está devolviendo una promesa? Porque lo usé como método asíncrona. Y métodos asíncros, devolviendo promesas. Promete significa, como te prometo que te darás datos una vez que los consiga. Entonces aquí, este método, nos está prometiendo con git actos años cuando los datos estén listos, entonces nos los devolverá. Y luego es una función de devolución de llamada. Por lo que podemos usar la devolución de llamada para obtener los datos que se devuelven de esta función. Entonces puedo hacer aquí como algo así como podemos decir películas. Y después de eso, es una función de devolución de llamada. Por lo que podemos usar un método de fila para recuperar las películas. Entonces podemos simplemente, para una prueba rápida, solo quiero iniciar sesión de consola aquí. Entonces para estar seguro de que realmente estoy consiguiendo las películas aquí. Entonces tomemos también la primera película, porque aquí regresamos sólo los resultados. Entonces después de eso, voy al registro de la consola, bien, todo está bien. Tengo la primera película. De acuerdo, ahora nuestro caso es sólo para reemplazar este Hello World, por ejemplo, con el nombre de la película. Al igual que quiero usar el campo de título original. Por lo que sólo quiero imprimir el título original para poder decir original y subrayarlo apretado. De acuerdo, ahora, como ven aquí en el registro, sólo obtuve el título original. De acuerdo, entonces de alguna manera necesitamos reemplazar este HelloWorld por el método o algún valioso que pueda crear. Por ejemplo, puedo darle un nombre como título. Y este título tendrá, por ejemplo, inicialmente algún título. Entonces si quiero usar esta variable dentro del texto aquí, así que en lugar de hola mundo, puedo ponerla aquí, pero no solo título, sino que podemos rodearla con corchetes curvos. Entonces aquí puedo hacer unos corchetes curvos. Y luego escaneé decir aquí por ejemplo, nombre de la película. De acuerdo, tengo aquí el título, nombre de la película está impreso aquí. ¿ De acuerdo? Ahora si voy y digo, vale, no consola log pero make Title es igual al nombre de la película o al título original de las películas. Cuando guarde, entonces veré que sigo recibiendo el nombre original. Y es como si nunca hubiera ido aquí. Es como título, no cambia. Entonces cuando recargo la aplicación guardar, sigue en el nombre de la película. El problema aquí es porque el título se establece después de que la plantilla se inicializó. Entonces tal vez esto entonces se está ejecutando después de El título Gut inicializado en la plantilla y renderizado y mostrado. Por lo que necesitamos de alguna manera actualizar el título. Incluso la plantilla está cargada. Entonces para eso necesitamos usar algo llamado estado Reaccionar nativo. Estado es muy importante. No usamos variables normales como esta. Usamos el estado. Entonces cualquier cosa o cualquier variable que quieras crear y mostrarla en la plantilla, necesitas usarlo como estado, sobre todo cuando esta variable se está actualizando después de algún periodo de tiempo. Entonces cómo podemos hacer eso para definir un estado, voy a usar lo mismo. Entonces podemos decir const. Y luego abro una matriz, y esta matriz tendrá dos cosas. Por ejemplo, el nombre de la variable que desea crear. Por ejemplo, voy a dar un puntería como una película. Y el segundo parámetro de nuestro segundo elemento de esta matriz será establecer la película. Por lo que quiero hacer set movie. Entonces este será un método donde voy a usar en mi aplicación y usarlo aquí cuando los datos estén listos. Entonces podemos ir aquí y decir Igual a usar estado, usa fecha. Se va a importar de reaccionar. Entonces es algo interno en React. Por lo que vamos a utilizar este valioso como variable de estado para que pueda actualizarse después de que haga, por ejemplo, el render que plantilla. Entonces para eso, voy aquí, ya no uso un título. Yo sólo digo set title o sets movie. Y esta película, tendremos no todo sólo el título porque vamos a usar un título en otro lugar. Por lo que pusimos la primera película que está regresando del servicio a ambientar película. En ese caso, película, tendremos un estado o tiene un valor de la primera película la cual se devuelve del servicio. Entonces cuando vaya aquí a la película y la reemplace aquí, entonces ahorramos, obtendremos un error porque siempre un estado se necesita inicializarlo de alguna manera. No siempre es, pero es mejor inicializarlo. Entonces ahora por ejemplo, puedo inicializarlo con cadena vacía. Por lo que esta fecha o esta película se inicializará como una cadena vacía. Por supuesto, vamos a ver cómo podemos manejar eso de manera diferente, pero vamos paso a paso. Por lo que ahora guardo, pero todavía estamos recibiendo un error. Se trata de decir que los objetos no son válidos en React child porque aquí película está puesta a una película y esta película es un objeto. Si recuerdas, cartero, esta película es un objeto, contiene autor adulto, te una visión general, popularidad, etcétera. Por lo que necesitamos usar uno de los campos de esta película. Por lo que voy a decir aquí, esta película punto título original. Entonces quiero un campo de esta película. Entonces cuando vuelva a cargar la aplicación y guarde, veré que me dieron el título de la película. De acuerdo, Puedes agregar otra cosa. Por ejemplo, podemos agregar, como podemos decir, vamos a revisar los campos aquí en idioma bozeman. De acuerdo, no podemos conseguir el idioma original y podemos mostrarlo aquí. El impío y luego E n. Por supuesto que puedes mezclar también con las cuerdas para que puedas decir nombre de la película. Y será algo así como lo impío. Y también el lenguaje. Se puede decir que será e n Añadamos otro campo de texto. Por ejemplo, tomemos duplicado este. Y por ejemplo, vamos a nuestra API y obtenemos fecha de lanzamiento. Y vamos a la fecha de estreno, ponlo aquí. Y podemos teclear aquí liberación. Y vamos a recargar la aplicación y veremos la fecha de lanzamiento está aquí. Entonces en ese caso, usamos el estado, lo cual es muy importante porque el estado está configurando automáticamente la variable después de algún periodo de tiempo o el periodo de tiempo, quiero decir, aquí está obteniendo los datos del servidor . Entonces así es como estamos mostrando los datos de la API a nuestra aplicación. 22. Uso de efectos: Después de la conferencia anterior y tal vez te diste cuenta de que la CPU de tu PC subió y está usando muchos recursos por el cambio que realizamos anteriormente. Entonces hice conferencia separada para eso porque es muy importante antes de empezar nuestro proyecto conocer este tema. Entonces como ves aquí, tenemos nuestra app Movi en mi monitor de actividad o en Task Manager en Windows, verás que está usando el 183% de la CPU. Esto se debe a que tenemos haciendo la gestión estatal sin usar los efectos. Afectar es algo para permitirte realizar efectos secundarios en un componente de función, que es como reflejar la relación entre el DOM y también ese estado de tu aplicación. Es muy importante cuando estás usando algunos métodos asíncronos y estás sentando fincas o estableciendo una variable, tus cosas patrimoniales, necesitas usar efectos. Entonces, ¿cómo podemos usar esos efectos? Normalmente, los afectos se pueden usar después de definir las variables de estado. Entonces solo tienes que ir aquí y puedes decir exactamente cómo hicimos aquí usos estado, vas a usar efecto. Por lo que podemos decir efecto de uso. Te lo estoy explicando en palabras más simples si no estás familiarizado con React. Entonces ahora tenemos este enorme efecto. Tendrá una función de devolución de llamada o método de devolución de llamada, que contendría y ejecutaría para mí la API que obtuve o el servicio que he creado para establecer una película. Por lo que siempre con ese FH King configurando suscripción y cambios manualmente en el dorm con React requerido para usar efectos. Por lo que es mejor que no tengan bucle ilimitado entre el DOM y también la dirección estatal en React. Por lo que los efectos se están ejecutando una sola vez solo para asegurarnos de que solo estamos obteniendo los datos una vez. Entonces para eso también, necesitas pasar un parámetro que viene al final como un segundo parámetro DE la función de efecto US, que será una matriz vacía. Por lo que si desea actualizar los datos o llamar a esta función asíncrona varias veces, puede especificar la hora aquí. Deseo actualizar mis datos cada 1 segundo. Por lo que verá en su aplicación estos datos se obtienen de la base de datos o de la API cada 1 segundo. Por ahora sólo necesitábamos ser ejecutados una vez. Y efecto de uso viene también de reaccionar exactamente cómo vamos a usar la finca. Entonces vamos a guardar eso de nuevo y recargar la aplicación. Y ya verás cómo se está calmando mi monitor de actividades. Entonces como ves aquí, app de cine ahora está usando el 0.3% del procesador. Entonces de esa manera estamos haciendo lo correcto. Ten cuidado. Siempre tienes que usar los efectos para hacer el correcto manejo de los estados entre el DOM y tu estado en la aplicación de React Native cuando quieras comprobar el rendimiento de tu aplicación. Por ejemplo, para ver cuánta memoria está usando y cuánto, por ejemplo, cuáles son las solicitudes van ahí. Por lo que es mejor usar la herramienta que se proporciona aquí con las herramientas de desarrollador. Para que puedas monitorizar tu red y también tu rendimiento. Por lo que solo necesitas en el teléfono presionar Control D. Y en Control D verás inspector corto. Entonces con Show Inspector, verás múltiples cosas. Uno de ellos es la red. Entonces, por ejemplo, cuando vuelva a cargar la aplicación, voy a ver que mi aplicación envíe una solicitud a esta API. Y luego cuando haga clic en él, verá detalles de la misma. Por lo que es muy importante usar esto para saber qué está pasando ahí. Entonces quiero mostrarles cómo, qué pasará cuando ponga este método, que estoy llamando los datos fuera de los efectos, como cómo lo hicimos, cómo se hacía antes. Y te mostraré cómo está haciendo eso. Tiempos ilimitados. Entonces cuando hago clic en él, ves que son tiempos ilimitados. Es pedir datos al servidor, lo cual es totalmente incorrecto. Detengámoslo rápido para no tener un problema aquí. Entonces ahora, si vemos no estamos teniendo más este bucle. También hay algo más que puedes presionar Control D a C también el monitor de rendimiento. Te mostrará siempre cuánta aplicación o tu aplicación está desempeñando aquí, lo cual es muy útil, beneficioso para tu aplicación. Por lo que siempre puedes ver cuánta RAM está usando y cuánto otros datos, que son muy útiles para ti durante el desarrollo. Si quieres saber sobre el gancho de afecto, que viene de React, solo tienes que ir a la documentación de React js.org y luego contar el efecto de búsqueda de engaño. Lo entenderás más contigo no sabes nada de React. Pero en este caso aquí, solo puedes considerar que el efecto es administrar su estado y sus funciones y buscar los datos entre el DOM y también la aplicación React Native. 23. Gestión de errores de errores de servicios: De acuerdo, y si tenemos un problema con nuestra API y el servidor no está respondiendo. Por lo que queremos mostrar un mensaje al usuario en algún lugar aquí para decir que está bien, hay un error en el servidor. Entonces para hacer eso, es muy fácil. Podemos implementar eso muy rápidamente. Entonces, antes que nada, necesitamos ver si tenemos error o no. Entonces después, el método entonces, como ven aquí, podemos tener algo como catch and catch. Podrás captar los errores que pueden ocurrir en tu API. Entonces diré aquí error, y será exactamente un método de devolución de llamada también. Entonces este método de devolución de llamada, puedo hacer algo como consola el error o reemplazar el mensaje de error. Por el momento que voy a utilizar otra constante de estado, que se llamará error. Entonces éste estará aquí, error. Y entonces puedo decir establecer error. Y además, vamos a usar el estado. Entonces para eso, diré que el error de conjunto estará aquí, el error en sí. Entonces después de eso, vamos a mostrar mensaje de error al usuario si hay algún error atrapado. Hasta el momento que podemos, por ejemplo, usar etiqueta de texto, exactamente como lo hicimos anteriormente. Sólo estoy haciendo las cosas simples. Ya lo puedes entender. Entonces aquí tendremos un texto y luego podremos mostrar como error en el servidor. Y también puedes hacer un poco de estilo en él. Simplemente haces un estilo. Y este estilo puedes ser, puede ser un objeto como ves aquí. Es exactamente lo mismo del defecto. Por lo que este estilo puede ser también color. Podemos dar color, y este color será rojo, por ejemplo. Y vamos a guardar eso para ver que todo está bien, bien, tenemos error en el servidor. Por lo que quiero mostrar este mensaje cuando hay un error. Entonces, ¿cómo podemos hacer eso? Entonces, en primer lugar, haces objeto. Entonces aquí hay que abrir dos corchetes. Y estos corchetes contenemos la constante de estado que hemos creado previamente. Y luego puedes decir y agregar dentro de este objeto, pones este texto, así lo cortas y lo pones aquí. Entonces cuando hay error, entonces mostrar ese texto. Eso es como si hay error y texto, entonces muéstralo. Entonces de esa manera. Entonces cuando ahorramos y como ven, me dieron un error. Dice que la cadena de texto debe ser renderizada dentro un componente de texto porque este error se inicializa como una cadena, por lo que necesitamos darle un valor inicial. Por lo que el error por defecto es falso. Al igual que no vemos ningún error por defecto. Pero cuando este boceto actualizará el error y hará que el error de conjunto sea error. Y entonces será tendrá un valor y será algo que se pueda renderizar aquí. Entonces para eso, podemos simplemente inicializar esto a falso. Y entonces, está bien, todo está funcionando bien. No tenemos error. Vamos a equivocarnos en nuestra API, por ejemplo, voy a quitar esta carta aquí, la b. Entonces cuando haga Guardar, voy a ver que tengo en o en el servidor. Cuando lo quite, el error se quedará porque no tenemos tres cargados el totalmente la aplicación. Tenemos que vaciar su estado. Aquí solo estamos usando una recarga en caliente. Hot Reload es solo hacer las cosas que se actualizan en el DOM. Pero también necesitamos recargar la aplicación, para recargar toda esta fecha aquí. Entonces, ¿cómo podemos hacer eso? Por lo que solo necesitas volver a las DevTools. Y luego queremos recargar totalmente la aplicación. Para que puedas hacer clic en Control D y luego tienes algo aquí, recargar. Entonces de esa manera, volverás a cargar toda la aplicación. Y te asegurarás de que no estés actualizando o teniendo este error de nuevo porque tenemos la API adecuada. Entonces esta recarga significa que estoy abriendo la aplicación. El usuario viene a mi teléfono y abre la aplicación por primera vez. Entonces este es el significado de esta recarga. Es muy importante saberlo que puedes recargar tu aplicación o puedes presionar también. nuestro control son te ayudará a recargar totalmente la aplicación sin abrir el menú Herramientas de desarrollo. Entonces cuando cometamos un error aquí y ahorremos, vale, Tendremos el error. Recarguemos la aplicación. De acuerdo, tenemos árboles de lenguaje de nombre de película, están vacíos, así que no tenemos ningún dato aquí porque nuestra API está equivocada y nos está dando un error en el servidor. Haremos todo esto hermoso en las próximas conferencias durante nuestro curso. 24. Refactoring de la primera sección: De acuerdo, en esta conferencia, Hagamos un poco de refactorización. Por ejemplo, siempre los servicios que agarran datos del servidor, algo así, vienen en archivo separado. Entonces voy a crear una nueva carpeta aquí. Podemos hacerlo en la raíz de la carpeta. Para que podamos crear una carpeta, podemos llamar a servicios de TI. Y estos servicios van a contener mis servicios, que quiero crear aquí. Entonces creé una carpeta y luego tenemos un archivo. Podemos llamarlo servicios dot js. Dentro de los servicios, voy a tener la llamada de esta API, por ejemplo, tomaré ésta e iré a los servicios y la pondré aquí. Entonces lo que necesito para que eso importe eje. Por lo que necesitamos también copiar esta Importación e ir de nuevo a nuestros servicios y luego ponerlo aquí. Entonces ahora tenemos conseguir películas populares, pero las películas populares de get-go ahora están indefinidas aquí. Por lo que necesitamos importarlo. Entonces primero, necesito exportar este método. Así que ten cuidado siempre tienes que exportar las cosas en forma de usarlas en otros archivos. Entonces aquí tendré también importación y voy a importar este método. Entonces aquí este es el método. Y entonces digo desde, y entonces este será punto como estoy en la ruta actual de app.js y luego diré servicios, y luego seleccionaría el archivo de servicio. Entonces de esta manera, he importado el método de la manera correcta. Después de eso, vamos a guardar todo. Por lo que guardo los servicios aquí y así guardo sus servicios en el app.js. Ahora nos aseguramos de que todo esté funcionando bien. Hemos separado nuestros servicios. Entonces otro paso que podemos hacer aquí que podemos hacer algunos comentarios, agregamos lado como algún comentario. Podemos decir como para explicar este método. Entonces, por ejemplo, puedo decir conseguir películas populares. Entonces de esa manera puedes explicarle a otros desarrolladores que este es servicio para conseguir películas populares. Además, podemos hacer algo genial como no tenemos que sumar todo esto Nyquist va, vamos a crear otros servicios en el futuro, por lo que no tenemos que repetir esta URL varias veces. Entonces para eso, prefiero usar algo así como una variable. Y podemos usar esta variable en todas partes. Entonces puedo decir aquí const, y luego puedo darle al valioso algún nombre. Podemos decir API URL. En esta URL de API, vamos a tener esto aquí. Entonces después de eso podemos usar esta URL API como vemos aquí. Y entonces podemos combinarlo con este arreglo de películas. Entonces cómo podemos hacer eso, solo necesitamos abrir algo así como llamado un backticks, este signo y esta línea puedes usar como dólar. Y luego con esto, ya que el abogado puede poner variables que están dentro de mismo expediente. Por lo que puedes tener aquí API URL y dentro de esta URL de API o después de ella, puedes decir slash. Por lo que se consideraría como una cuerda aquí. Entonces todo esto, lo que está escrito aquí, puede ser una cadena, así que puedo copiar toda esta parte y quitar esta cadena también y pegado aquí. También la clave es muy agradable tenerla separada, también valiosa. Por lo que también podemos crear aquí una clave. Podemos llamarlo una constante. Y luego la clave API de nuestra API, y la damos dentro de esa cadena. Entonces aquí tenemos claves API, o solo necesito volver a llamar estas como signo de dólar. Y después de eso, pondré la clave API de esta manera. Por lo que me aseguraré de la URL. Por lo que la URL ya construida como con este prefijo, como vemos en nuestra API. Y entonces podemos tener slash y luego más v popular. ¿ Qué queremos conseguir? Porque nos vamos a hacer populares. Conseguiríamos películas familiares, obtendríamos próximas películas. Es la curva. Y entonces pondré un signo de interrogación para pasar el parámetro de la clave API, que almacené en la clave API aquí. Entonces vamos a guardar todo y comprobar si todo está funcionando bien. Hagamos Recarga Caliente o recarga completa. Está bien, Bonito. Aquí no tenemos ningún tema. Por lo que ahora tenemos los servicios en archivo separado y puedes crear otros métodos. Por ejemplo, aquí podemos hacer las películas populares, podemos hacer pop próximas películas. Por ejemplo, las próximas películas API serán seguidas con próximas. Y esto ya lo es, lo sé por la documentación API de esta pelicula. Entonces podemos decir aquí, hasta que vengan películas porque vamos a usarla también en nuestra aplicación. Revisemos también otras API. Por ejemplo, guardar aquí. Y tomemos otra API que podemos tener de la documentación. Por lo que voy de nuevo a la documentación API de base de datos de películas. Entonces vamos a acercarnos un poco también, para que puedas verlo bien. Entonces aquí voy a ir al cine, por ejemplo. Dónde está Aquí, películas. Entonces vamos a conseguir algunas API que van a usar en nuestra aplicación. Por ejemplo, vamos a tener popular y próximo, como les dije, tal vez puedan obtener también los mejores valorados. Tomemos una serie de televisión. Entonces por ejemplo, tenemos un equipo y obtenemos así el popular. Entonces vamos a ser populares. Y aquí es exactamente lo mismo. Entonces es exactamente como las películas, pero sólo tenemos que añadir aquí. Entonces copiamos las películas populares una y luego pegamos aquí. Y podemos decir que la televisión popular es d dt de películas. Y aquí vamos a tener así TV como podemos hacer que este método conseguir televisión popular. Y simplemente cambiamos esto a TV es Td de películas como vimos la documentación. Entonces ahorramos, ahora tenemos la popular TV. Entonces de esta manera conseguimos todas las API que necesitaremos. A lo mejor necesitaremos más como veremos en la aplicación. Entonces los vamos a sumar a los servicios y cómo hicimos editar factoring aquí. Entonces en la siguiente sección, o por ahora para esta sección, aprendimos a usar la API. Por lo que aprendimos a agarrar datos del servidor y mostrarlos en nuestro teléfono. Y luego veremos más adelante cómo darle estilo a las cosas. Empezaremos con la página de inicio y construiremos la primera página de nuestra aplicación en el siguiente apartado. 25. Crear componentes de pantalla en la pantalla casino: De acuerdo, ahora en esta sección vamos a ver cómo podemos crear el componente de la página principal. Como ven aquí, soy capaz de navegar por las películas a través de un slider donde voy a crear en la página de inicio. Y además, tengo múltiples deslizadores para cada tipo de películas. Por ejemplo, como ven aquí, tenemos popular programa de televisión, tenemos familia, tenemos documentales, todos ellos, los llamamos en los servicios. Por lo que tengo esta versión en ejecución en mi dispositivo. Yo estoy usando visor, pero claro que vamos a implementar eso y continuar nuestra codificación para llegar a este nivel como ven aquí. Entonces, en primer lugar, vamos a crear un componente de página de inicio. Y este componente de homepage, lo llamaremos en componente App o al punto de entrada de nuestra aplicación. Entonces cuando abro la aplicación, voy a ver esto. Entonces, empecemos ahora con la creación del componente de la página principal. De acuerdo, al principio, me gustaría mover todo este código que creamos previamente a un nuevo componente. Nosotros lo llamamos un componente de la página de inicio. Entonces, en primer lugar, vamos a crear un archivo o una carpeta. Nosotros lo llamamos pantallas. Por lo que hago clic aquí en este ícono y digo que quiero pantallas. Y si ves como a veces se crea dentro de otra carpeta, simplemente haz clic de nuevo y luego solo tienes que hacer clic, por ejemplo, en app.js para estar en el nivel raíz. Entonces podrás crear la carpeta en el nivel raíz. Por lo que voy a dar este nombre de esta carpeta serán pantallas. Y dentro de este greens, voy a crear un nuevo archivo. Y este archivo se llamará home dot js. Por lo que podemos decir que esta es la página de inicio de mi aplicación. Entonces si recuerdas antes, te dije que instalaras alguna extensión es muy importante para acelerar nuestro código. Entonces, por ejemplo, quiero crear un componente rápidamente. Por lo que con las herramientas React Native snippets, también puedes crear un componente. Por lo que quiero mostrarles eso. Por lo que cuando vayas a las extensiones que hemos instalado previamente, verás muchos comentarios. Uno de ellos como podemos crear retorno de componente sin estado. Entonces vamos a usar este formato porque como ven aquí con React, tenemos un componente y luego tenemos un retorno. Entonces aquí podemos definir nuestras variables porque quiero mostrarles los dos casos. Entonces si vas aquí, diremos, por ejemplo, vamos a crear este único componente apátrida. Por lo que diré como L y automáticamente se completará para mí. Entonces crearía un componente, pero en ese caso, no tengo un retorno, por lo que no puedo definir mis variables. Fácil. Por lo que ahora podemos crear otro componente, que es con retorno S L, retorno de componente sin estado. Entonces con eso, crearía para mí un componente y también si el retorno y todas las cosas en cada componente también. Es muy importante importar React. Entonces también hay un comentario para eso. Entonces en esta extensión, si vas ahí, consulta IMR import React. Entonces cómo podemos hacer eso rápidamente. Por lo que acaba de poner aquí yo, MR. y luego se importará para que reaccionen rápidamente. Entonces ahora movamos el código de la app y luego a la página de inicio. Entonces si recuerdas, tenemos en el app.js, definimos algunos valiosos. Vamos a moverlas a todos. Hagamos una tripa como podemos cortarlas totalmente antes del regreso. Por lo que todas estas variables antes de regresar, vamos a llevar y colocarlas aquí antes del regreso de nuestra aplicación domiciliaria o homepage o componente Hong. Ahora, vamos a tomar todo lo que está dentro de esta vista. Por lo que también podemos tomar todo esto, todo lo que podemos tomar toda la vista. Entonces todo dentro de eso Apagó app.js. Entonces vamos aquí y lo pegamos dentro de un componente de retorno de casa. Entonces pegamos todo aquí. Y no olvidamos que copiamos las importaciones. Ahora los copiemos, no los conseguimos porque necesitaremos algunos de ellos más tarde. Entonces ahora los voy a copiar todos y pegarlos aquí. Entonces cuando presiono Guardar OK, se formateará automáticamente porque tengo más bonita, bonita. Ahora voy a AS y luego guardo, entonces no obtendríamos token inesperado de error porque necesitamos poner algo dentro de esta app. Tenemos que poner una vista para que así podamos poner esta vista que estaba aquí con la aplicación Hello World. Si recuerdas, vino con un poco de estilo. Entonces vamos a copiar lo mismo y ponerlo aquí dentro, la vista, y la vista se va a cerrar como ven aquí. Entonces después de eso ahorramos, vale, todo está bien. Pero ahora tenemos app.js vacío. Por lo que necesitamos llamar aquí al componente del hogar, al hogar que creamos aquí. Entonces para eso, solo podemos teclear como etiqueta casa. Y como ves, se me sugiere importarlo desde las pantallas de casa. Entonces de esa manera, también puedo importar este. Y como ven aquí, tenemos importación home desde pantallas home. Cuando guardo, obtenemos un error. Este error proviene del componente home como ves, porque el componente home, si recuerdas, está dentro de la carpeta de pantallas. Entonces cuando estamos importando los bienes popular servicio de cine, necesitamos no estar en el mismo nivel de la carpeta porque aquí tenemos dentro de esta carpeta verde en JS está dentro de las pantallas. Por lo que necesitamos avanzar un paso hacia arriba y luego llamamos al servicio. Entonces necesito subirme. Y luego entro a componente de servicio o carpeta de servicios, y luego llamo a los servicios JS. Entonces para estar seguro más puedes eliminar todo esto y pones punto y luego barra. Y te sugeriría la carpeta. Por lo que verás que no hay ninguna carpeta. Por lo que necesitas subir un nivel. Por lo que cuando subas un nivel, tendrás acceso a las carpetas que creamos en el nivel superior de este componente de casa. Entonces voy a Servicios y luego corte y luego llamo a los servicios, los servicios dot js. Entonces ahora todo está bien para el componente de casa. Y como ves, el app.js llamó al componente home dentro de esta vista. Y entonces se renderizará exactamente cómo lo creamos aquí. Entonces esta es una forma de cómo puedes dividir tu aplicación. Se puede decir, por ejemplo, voy a tener pantalla de inicio, he buscado pantalla, tendré así un detalle de la pantalla de película. Entonces de esa manera, podremos dividir nuestra aplicación. Y además, hay que recordar que si no consigues todo no pones estilo aquí, tal vez no vas a ver nada si pones solo vista. Porque ahora no se puede ver porque todos los artículos están aquí. Por lo que hablaremos de estilo más adelante. Demos las cosas así ahora. Y simplemente ahorramos como es. Y justo al final retiramos las importaciones que no necesitamos. Por ejemplo, no necesitamos éste. No necesitamos en, bueno los efectos y no necesitamos éste, que se llama texto. Entonces vamos a guardar todo. Ahora somos verdes y podemos trabajar bien. En la siguiente conferencia, veremos cómo podemos crear el deslizador, la primera página, o el deslizador que está en la parte superior, que contiene imágenes de mis películas. 26. Pasador de imágenes de películas: Muy bien, En esta conferencia vamos a ver cómo podemos crear este slider. Agarraríamos las últimas imágenes de sus películas, de las últimas películas. Y solo vamos a hacer un slider para que se pueda deslizar automáticamente para que la gente, cuando abrieron mi aplicación, puedan ver imágenes de las últimas películas. Por lo que para este deslizador, hay un componente que se llama deslizador React Native. Nosotros lo vamos a usar. Por lo que el uso de componentes requiere siempre instalar algunas bibliotecas externas. Para eso, instalaremos una biblioteca la cual contendrá este slider y la usaremos en nuestros componentes de la página principal. Entonces pasemos a nuestro código. Hay una biblioteca que se llama React Native image slider box. Entonces pongámoslo en Google. Podemos decir React Native image, slider books. Por lo que todo este nombre, lo buscas y lo tendrás en la biblioteca del NPM. Por lo que ahora vamos a esta biblioteca y podemos ver documentación al respecto y cómo podemos usarla. Entonces como ven, tenemos aquí la biblioteca. Entonces, en primer lugar, necesitamos instalarlo. Por lo que vamos a npm, instalamos React Native image slider box. Entonces vamos allá y vamos a abrir la terminal y luego pegamos nuestro comentario. Por lo que npm instalar, React Native image slider box. Entonces hasta que termine la instalación, echemos un vistazo aquí. Por lo que podemos tener, primer lugar, algunos componentes. Y estos componentes, podemos usarlo en nuestra plantilla. También hay un ejemplo. Por lo que se puede decir aquí, importar caja deslizante. Tenemos que importar esta caja deslizante a nuestro código. Y luego creamos una vista. Y esta vista, que será una caja deslizante, contendrá matriz de imágenes. Por lo que también vamos a construir este conjunto de imágenes. Por lo que aquí se instaló nuestra biblioteca. Vamos allá y a la documentación. Y veremos primero, como necesitamos importar caja de control deslizante desde la caja de deslizador de imagen nativa. Entonces vamos aquí y en el componente de la página de inicio, vamos a importar esa caja deslizante. Y después de eso, vamos a cerrar la terminal u ocultarla de alguna manera para que podamos tener más espacio aquí. Y luego vamos a ver cómo está usando este componente. Por lo que en diapositiva ahí, una caja en React Native, tiene slider evoca imágenes. Por lo que nos requiere tener algunas imágenes. Entonces vamos a quitar la parte que creó previamente este nombre de una película y todas estas cosas. Entonces vamos a quitarlos para que podamos mantener sólo la vista porque te dije la vista, será como un div para mí, un div o un contenedor el cual contendrá todo en su interior. Por lo que luego vamos a su documentación y llamamos a esta línea. Por lo que decimos deslizamiento por ahí camina imágenes. Volveremos a ir. Y llamamos a esa diapositiva ahí caja como importamos aquí. Entonces, vamos a guardar eso. Nos meteremos en el simulador y error. Pero no te preocupes porque aquí no estamos teniendo las imágenes correctas. Por lo que necesitamos tener todos crear las imágenes. Entonces para eso, en primer lugar, necesitamos crear una variable de estado. Y esta variable de estado, se llenará con las imágenes de próximas películas. Entonces llamemos a esta constante no película. Podemos llamarlo imágenes de cine por ejemplo. Por lo que necesitamos configurar también esto para que sean películas o películas imágenes o más de estas imágenes. Entonces de esa manera tenemos el nombre correcto. Y ahora usaremos eso para que podamos conseguir películas populares. Pero en nuestro caso, queremos agarrar las próximas películas. Por lo que creamos un servicio antes, como recuerdan, acabamos de llamar a get coming amorfo. Entonces vamos a por ellos. Y yo voy a quedarme con este, quedarme con este método. Por lo que vamos a crear otra convocatoria para seguir las próximas películas. Y estas siguen próximas películas, lo vamos a volver a llamar desde este airless. Entonces de esa manera, necesitamos importarlo también. Y será exactamente lo mismo. Por lo que necesitaremos también entonces y atrapar. Entonces también podemos usar la misma sintaxis que hemos creado aquí para películas populares, pero ya no tenemos set movie. Por lo que podemos quitar esta parte no tendrá un AdWords. Por lo que volveremos a este servicio más adelante cuando vayamos a utilizar o crear los otros deslizadores. Entonces por ahora vamos a tener imágenes de películas de set aquí, pero donde lo vamos a usar. Entonces necesitamos aquí imágenes de alguna manera. No podemos tener las películas, toda la película. Entonces para eso, si te acuerdas, estoy regresando las películas con su devolución de llamada aquí. Por lo que podemos usar esta devolución de llamada para crear una constante. Por lo que voy a crear constante, puedo darle un nombre que se llama películas imágenes. Pero las imágenes de esta película para no tener un conflicto con este nombre. daríamos también algún sufijo. No podemos llamarlo una matriz. Entonces de esa manera se inicializará con matriz vacía. Entonces cuando consigo las próximas películas, no tengo nada en esa matriz. Entonces vamos a llenar esta matriz. Entonces diremos películas. Imágenes, array dot push. Entonces vamos a empujar película por película. Entonces de esta manera, tendremos aquí múltiples películas. Por lo que antes de eso, iré aquí a otra línea y diré películas punto para cada uno. Pero podemos escribir eso, no hay problema. Para que puedas tener películas para cada uno. Porque si recuerdas, estábamos regresando de este próximo servicio. Estábamos regresando siempre los resultados de punto de datos. Y si vamos a Cartero, como recuerdan, tenemos aquí en los resultados de la matriz. Entonces todos ellos con Ven aquí. Entonces volvamos a nuestro código y luego agregaremos exactamente la misma sintaxis. Por lo que para cada película dentro de las películas array, que se devuelve de la API, conseguiré una película. Entonces de esto, para cada uno, obtendré una película y esta película o una función de devolución de llamada donde la, puedo usar para usar esta película desde esa función de devolución de llamada. Entonces puedo mover entonces estas películas array para empujar la película, que tengo aquí. Pero no queremos empujar la película en sí donde se necesita empujar sólo la imagen de esa película. Entonces si volvemos a Cartero para ver cuál es el contenido de esta API, Tomemos primera película, por ejemplo, como les dije, los resultados contienen múltiples películas. Entonces, vamos a obtener el primer resultado. Uno de esos campos que hemos apuntalado camino. Y en este camino de póster, obtendré la imagen de la película. Entonces vamos a conseguir este. Voy a ir aquí y voy a decir más. No nos afiches camino. Por lo que empuja para mí camino de póster de película. Y después de eso, películas imagenes array se establecerán imágenes de películas. Por lo que necesitamos establecer esta variable o esta variable de fecha que creamos. Entonces aquí voy a decir películas imágenes array estará dentro de películas imágenes. Entonces vamos a guardar todo. Ahora, hemos formateado nuestro código, y de esa manera, podremos usar imágenes de películas donde en el deslizador. Por lo que tendremos aquí imágenes de caja deslizante. Serán las imágenes de las películas. Por lo que el campo películas imágenes. Guardemos eso e vayamos a nuestro simulador. Y veremos que no podemos ver nada porque necesitamos a los socios. Necesitamos también, el camino completo. Si vamos a Cartero, veremos sólo parte de la imagen, como sólo el nombre de la imagen. Por lo que esto debe tener el prefijo de algo. Si vamos a la documentación de la película que obedece a API, hay algo aquí después de la introducción que se llama imágenes. Al interior de estas imágenes, nos mostrará cómo podemos conseguir esas imágenes porque como les dije que el baño de Boston está devolviendo sólo el nombre de la imagen. Por lo que para obtener la ruta completa de la imagen, debes prefijarla con el enlace donde obtendrás esta imagen. Entonces prefijemos nuestra ruta de imagen con ese nombre. Entonces de esa manera, entonces cuando empujo los elementos a la matriz, esa manera, solo necesito empujar también el camino. Entonces podemos decir aquí, sólo empuja este enlace que hemos copiado antes, y luego decimos plus. Por lo que puedes decir esto como prefijo. Y luego el camino del cartel que viene con la película como ven aquí. Y viene siempre con una baraja. Por lo que no es necesario poner una baraja en el código. Por lo que podemos quitar esta barra, porque de esta manera obtendrás dos barras. Entonces después de eso, podemos guardarlo todo, ir a nuestro simulador. Y como ven, tenemos aquí las imágenes. Por lo que ahora estamos obteniendo las últimas imágenes de las últimas películas o próximas películas. 27. Slider de imágenes de cine Styling: De acuerdo, ahora en esta conferencia vamos a ver cómo darle estilo a este slider. En primer lugar, si ven aquí que tenemos alguna queja de ES pelusa, que es como arreglarme los errores en mi código como live, hablé de ES vinculado previamente. Por lo que ES nombra se queja de que tenemos que poner los estilos en algún lugar fuera del componente. Esto es como estilo de codificación, como ni estilos en línea. A esto se le llama estilo en línea. Entonces cuando tienes estilo en línea ES pelusa, nos quejamos de ello. Por lo que es mejor ponerlos en algún lugar fuera de estos componentes. Entonces, ¿cómo podemos hacer eso? No podemos definir fuera del componente de casa, como ven aquí. En el exterior, podemos definir una constante. Nosotros lo llamamos estilos en general, como estilos normales. Y estos estilos vendrán de hoja de estilo y componente de hoja de estilo. Debemos importarlo de React Native. Por lo que iré aquí y llamaré a la hoja de estilo React Native de React Native. Entonces cuando volvamos aquí ahora, voy a tener un método dentro de esto que se llamará crear. Por lo que voy a crear un archivo de estilo o varios estilos que puedo usar dentro de mi componente. Es como para nosotros en caso de HTML, como un archivo CSS. Y este archivo CSS contendrá clases, por lo que puedo utilizarlas en mis componentes o en mis etiquetas HTML. Entonces cómo podemos crear un Clases, llamémoslo clases ahora. Entonces la forma como tenemos un objeto y luego defines tus clases. Por ejemplo, para esta vista, lo llamaré contenedor de estilo o contenedor deslizante. Por lo que podemos tener aquí contenedor deslizante. Y este contenedor deslizante tendrá algunas propiedades. Nuestro exactamente mencionado aquí. Entonces puedo cortar todo esto y luego basarlo aquí. Entonces de esa manera, he definido mis gafas. Entonces todo centro, centro. Entonces por supuesto cuando te quites todas estas cosas, te mostraré más tarde. Por lo que tenemos que usar este contenedor de control deslizante de clase en algún lugar de aquí. Entonces cómo podemos hacer eso, solo decimos que los estilos salpican los estilos. ¿Cuál? Es éste, que la constante que definimos. Entonces estilos. Y luego pongo el contenedor deslizante como ven aquí. Por lo que estilos dot slider container, llamará a aquellos estilos que se crean aquí. Entonces cuando ahorremos, veremos que todo sigue igual. Vamos a dar, por ejemplo, algo de espacio desde arriba. Por ejemplo, esto sólo por un ejemplo para mostrarte que los estilos están funcionando. Entonces cómo podemos dar algo de espacio, podemos usar bateo top acolchado es hacer un espacio dentro del contenedor desde la parte superior, como no fuera, no empujando todo el contenedor. Si quieres empujar todo el contenedor, puedes usar margen. Entonces podemos decir margen superior, y luego le das un valor en píxeles, por lo que podemos decir 20. Y ahora como ves, se empuja un poco desde arriba. Entonces de esa manera, estamos seguros de que nuestro contenedor está usando esta clase o esta hoja de estilo. Podemos decir si recuerdas que tenemos como algo de altura de este deslizador, estaba tomando casi la mitad de la pantalla o tres cuartas partes de la pantalla. Por lo que necesitamos dar una altura para los libros de deslizador. Entonces cuando volvamos a la documentación del deslizador, veremos múltiples propiedades. Por ejemplo, podemos decir las imágenes que utilizamos previamente propiedades. Es decir, son apoyos que puedo pasar a este componente, por ejemplo, puedo pasar imágenes, puedo pasar otras opciones que me pueden ayudar a peinarlo o hacer algo con él. Por ejemplo, deshabilitar en prensa. Es como si estuviera presente, entonces se desactivará el seno de la imagen no vigilada. Por ejemplo, la caja Slider esconde esta que necesitamos. Será por píxel. Dará una altura para el deslizador y también compró en él color de punto porque hay algunos puntos de reproducción automática. Esto es bonito. Vamos a usarla. Podemos decir auto-play como si se deslizara automáticamente cada vez que abras la aplicación. Por lo que podemos establecer esta propiedad también. Después de las imágenes hice espacio. Y luego digo auto-play. Y luego abro un objeto y lo pongo en verdadero. Entonces es booleano, está tomando valores balón. Tan verdadero o falso, el valor predeterminado es falso. También hay, ciclo, bucle, ciclo loop. Significa como podemos decir un bucle infinito. Por lo que el usuario, cuando se desliza y cuando obtenemos las últimas imágenes, volvería a volver a la primera imagen cuando todavía se desliza o se desliza. Por lo que también podemos encajar este a cierto. Por lo que podemos ir al código de la misma manera. Ponemos espacio y luego abrimos un objeto y dentro de él, dijimos en regla, vamos a guardar eso. A ver si nuestra aplicación sigue bien. Agradable. Entonces si voy ahora a las imágenes de casa, como de alguna manera. Sigo deslizando. Volveremos a la primera imagen. Entonces si me sigo deslizando ahora, voy a hacer que veas la primera imagen de nuevo. Por lo que nos estamos deslizando en un bucle. Por lo que tan bien como les dije, vamos a utilizar la altura de la caja deslizante. Por lo que podemos usar también esta propiedad y la configuramos como entero en un número. Y este número va a implementar para mí la altura de este deslizador en píxeles. Entonces podemos establecer, así decimos aquí espacio. Y luego ponemos la propiedad que queríamos poner. Por lo que tendremos altura de deslizador y luego le damos un valor. Entonces pondré aquí igual, y entonces podemos poner un valor, por ejemplo, 600. Podemos olvidar, digamos como aquí, 600, será en pixel. Y como ves, tengo aquí, así más ligero, más grande. Pero aquí tenemos un tema. ¿ Y las pequeñas formas? Porque cuando pongo aquí a la estática de altura, entonces tal vez en formas pequeñas, este deslizador será más grande que el tamaño de fuente. Y entonces tendré como la mitad de la imagen atractiva, que no es agradable. Entonces es mejor conseguir la altura de este teléfono o de cualquier forma donde se está ejecutando mi aplicación? Y luego calcule esto. Por lo que podemos decir 1, 0.5. Entonces lo que podemos decir, por ejemplo, usar tres cuartas partes de la pantalla para el control deslizante. Entonces cómo podemos hacer eso en React Native es proporcionarme las dimensiones del teléfono que estoy usando. Entonces, ¿cómo podemos hacer eso? Podemos importar algo de React Native, que se llama dimensiones. Y esas dimensiones, contiene dos propiedades, ancho y alto y ancho y alto me darán la altura del teléfono y el ancho del mismo. Entonces para demostrar eso, quiero mostrarles, podemos definir una constante. Podemos llamarlo dimensión o fin de semana, definir esta constante en algún lugar fuera. Entonces digo aquí const. Y luego dimensiones, podemos decir diamantes rusos. Y esta dimensión contendrá también una propiedad que se llama get. Y este Get, tiene una propiedad que se llama pantalla. Y luego decimos git screen. Y de esa manera, obtendré la dimensión de esta pantalla. Entonces vamos a guardar eso y podemos consola log esta propiedad. Podemos consola log la dimensión para ver en la consola ¿cuáles son la dimensión que tengo? Entonces podemos ir, por ejemplo, al inicio de mi solicitud y podemos hacerlo aquí. Por lo que podemos decir en casa, hacer al principio console.log, console.log. Y entonces pondré aquí dimensiones que aquí he definido. Entonces cuando guardamos, volvemos a abrir esa terminal para ver qué tenemos en el registro. Como pueden ver tenemos aquí Font Scale. Tengo que hacerlo más grande solo para que se muestre. Por lo que tenemos aquí ahora Fuente, Escala, Altura y también escala y también anchos. Por lo que necesito la altura, para que podamos obtener la altura de la propiedad y usarla para medir nuestro deslizador. Entonces, ¿cómo vamos a hacer eso tan fácilmente? Podemos decir aquí dimensiones altura de punto. Entonces en ese caso, puedo usar esta variable de dimensión. Entonces cuando vayamos al deslizador libros esconden, diré altura de punto de dimensión, como se ve aquí en el autocompletar y luego dividido por 1.5, es como un tres cuartos de esta pantalla. Entonces cuando lo pongo, por ejemplo, uno, tomaría pantalla completa como ven aquí. Pero sólo necesitamos el 1.5. Entonces vamos a conseguir este. Y como ves lo que lo pongo lleno, hay al final, al fondo algunos puntos. Entonces necesitamos quitar todos para que esos puntos porque vamos a poner otros contenedores debajo de nuestro deslizador. Deslizadores. Entonces para quitar eso también, podemos ir a las propiedades de nuestro deslizador de imagen, y veremos una propiedad que se llama estilo de punto. Dot es dy. Entonces podemos dar un estilo para esos puntos como la altura o el radio y etc Voy a hacer esta altura de esos puntos ceros para que pueda ser 0, ya no se puede ver. Entonces tenemos que decir aquí, estilo de punto será Hide y luego 0. Entonces como ven aquí, es Eastland se está quejando de nuevo de que no hay estilo en línea. Por lo que no podemos dar un estilo para esta caja más ligera. Por ejemplo, puedo decir estilos dot. Podemos darle estilo de deslizador. Podemos decir justo en absoluto. Y este estilo de deslizador, lo vamos a definir dentro, aquí, dentro de nuestros estilos y estilo, tu estilo tendrá objeto y este objeto tendrá una altura, y esta altura será 0. Entonces de esa manera, no podremos ver esos puntos. Pero tenemos un error aquí porque aquí tengo corchetes extra. Quitémoslos totalmente. Entonces ya basta así. Ahora tenemos altura completa y esos puntos están desaparecidos. Entonces de esa manera, hemos quitado los puntos. Entonces volvamos a poner la altura para ser 1.5. Y entonces tendremos más tranquilo de la pantalla. Y ya ves ahora tenemos el estilo del deslizador. 28. Trabajar con los cartos de listas de películas: De acuerdo, en esta conferencia, vamos a ver cómo seguir con nuestra página de inicio y empezar con los carruseles. Esos carruseles, quiero decir, con esos componentes que veremos aquí, que podemos deslizarnos entre nuestras múltiples películas. Al igual que tenemos categorías de películas como popular, popular programa de televisión y familiares y documentales. Por lo que también podemos tener un deslizador aquí para poder ver las últimas películas populares. Entonces de esa manera, terminamos el slider, que estaba en esa parte superior de aquí. Y vamos a trabajar con esta que es películas populares. Por lo que vamos a empezar simple y vamos a darle estilo y a tener la forma correcta de crear componentes y cómo también podemos trabajar con esas listas. Entonces, en primer lugar, vamos a trabajar con una lista o carrusel muy simple. Entonces cómo podemos ponerlo aquí en nuestra aplicación como ves debajo del deslizador. Por lo que podemos trabajar en eso con el uso de un componente que se llama lista plana. Si recuerdas, te dije en React Native, también tiene en la documentación algunos componentes. Por lo que podemos ir al botón de componentes aquí. Y veremos que hay muchos componentes que pueden ser útiles y útiles para tus aplicaciones en React Native. Uno de esos componentes es lista plana. Y con una lista plana, puedes crear lista de componentes o lista de mazos, o lista de cualquier cosa en React Native. Y puedes hacer Cardozo con él. Entonces el uso aquí, así que déjame alejar un poco. Entonces ven aquí que tenemos una lista y esta lista, por ejemplo, ahora es vertical. Vamos a ver cómo podemos hacerlo horizontal. Tiene muchas propiedades. Este componente, es necesario leerlos todos. Nosotros vamos a usar. ¿ Qué necesitamos para crear nuestro carrusel para lo amorfo? Entonces el ejemplo más simple que podemos usar es éste, el principio. Por lo que no podemos decir ni crear una vista. Y esta vista contendrá para mí el nombre o la lista que vamos a llamar aquí lista plana. Por lo que la última lista estará dentro de algunos de ustedes. Entonces vamos a crear otra vista en nuestro código. Entonces podemos ir aquí a Visual Studio Code y luego crearemos otra vista. Entonces digamos que ese sería el mismo. Podemos dárselo así. Y podemos decir aquí, no contenedor deslizante, podemos decir célula de corte. Y esta celda tendrá las mismas propiedades de estos contenedor más ligero. Por lo que también podemos ir aquí, definir carrusel y carrusel, tendremos las mismas propiedades. Entonces vamos a copiarlos y guardar todo. Como ven aquí, estamos recibiendo un error. Entonces este error, quise mencionar que no podemos poner dos componentes en el mismo nivel en su devolución porque esto no está funcionando como React Native, debes ponerlos en un componente contenedor. Se pueden poner, por ejemplo, en otra vista. Y estos puntos de vista estarán dentro de la mala entrevista. Pero para eso, será como un poco complicado. Por lo que React Native provisto de algo llamado React dot fragmento. Y este fragmento de punto React, Es como un contenedor div, pero no se renderiza en la aplicación. Por lo que no puedes ver, cuando estás inspeccionando en la aplicación, no verás nada relacionado con ese fragmento. Entonces por eso, como ves, nuestro deslizador se hizo más pequeño. Por lo que hay que hacerlo un poco más grande, como veremos más adelante y cómo vamos a darle estilo y hacer algo de refactorización. Entonces, en primer lugar, ahora soy capaz de tener dos vistas en un componente o en un fragmento. Entonces de esa manera, puedo tener también mi lista de piso aquí. Entonces llamemos a nuestra lista plana desde la importación. Por lo que iré a React Native importaciones y pediré lista plana. Es de React Native como ves aquí. Entonces vamos aquí abajo y decimos que queremos tener una lista plana llamada aquí. Y vamos a pasar los inmuebles que veremos en la documentación. Entonces como ves aquí en este ejemplo, tenemos un elemento de datos y render y extractor. Entonces primero veamos qué son los datos. Los datos serán, por ejemplo, nuestras películas. Por lo que podemos decir la lista de películas populares. Consigamos primero la lista de películas populares. Entonces vamos aquí y otra vez, hemos definido previamente películas populares. Podemos llamar también a un estado constante. Podemos definirlo como películas populares. Entonces podemos decir aquí, no películas, imágenes, pero sí podemos decir películas populares. Y en estas películas populares también necesitamos ponerlo. Entonces de esa manera, tendremos nuestras películas populares, pero las películas populares vendrán de obtener servicio de películas populares como vimos anteriormente. Por lo que diría año set películas populares con películas. Por lo que cuanto más devolución de llamada de visa de este servicio se devolverá en set nuestras populares películas aquí. Por lo que los datos de esta lista plana. Como ven aquí que necesitamos definir datos serán nuestras películas populares. Entonces veamos otras propiedades. El inmueble se llama elemento render. Por lo que necesitamos tener un elemento de render. Tenemos que dividir mostrar el elemento, la película en sí, como ves aquí, tenemos aquí múltiples películas y estamos mostrando artículo, artículo, artículo. Cada artículo es una película para mí. Ahora empecemos con solo nombre de película. Al igual que va a tener un texto para no hacerlo muy complicado, vamos a tener paso para crecer en la aplicación. Por lo que usaremos render item como un elemento render. ¿ Y qué es el elemento render aquí? Se trata de una función Volver elemento, y el ítem se utilizará como componente, o bien definió aquí su propio componente, que se llama ítem. Y se definirá en algún lugar de la aplicación, por ejemplo aquí. Y tiene una vista y está de lado en el texto. Te estoy mostrando un SEMP. Te voy a mostrar el camino más sencillo. Por lo que tenemos que ir primero a renderizar elemento. Por lo que el elemento render tendrá una devolución de llamada como esta. Por lo que vamos de nuevo a nuestro código y veremos cómo podemos crear un elemento de render. Por lo que render item, será, como les dije, una devolución de llamada que se llama ítem. Pero este artículo estará dentro de un objeto como se ve aquí. Por lo que tenemos aquí artículo como objeto, este ítem presentará para mí cada película que se devuelva de esos datos. Entonces de esa manera, puedo poner esto en un objeto y luego la devolución de llamada de esta función estará devolviendo para mí un componente de componentes React Native el cual puedo crear yo mismo o usar uno de sus componentes listos los cuales tenemos en Reaccionar Nativo. Ahora voy a usar el texto. Por lo que podemos decir ese componente de texto, que habíamos visto antes. Y voy a decir que dentro de este componente de texto poner para mí artículo. Y este artículo será así. Contamos con objeto, item dot title. ¿ Por qué título? Porque aquí me devuelven las películas con un título. Si recuerdas en Cartero, tenemos todas las películas, como las películas populares. Entonces la popular película, cada película ahí dentro es toda 310 con un título u otras propiedades. Entonces tomemos ahora por ejemplo, ese título. Por lo que diré aquí render item será item dot title. Entonces vamos a ahorrar aquí ya que veremos qué va a pasar. Entonces voy a guardar esto y voy a devolver el nombre de la película o el título de la película. Entonces veamos nuestro simulador. ¿ Qué hay? Está bien, Bonito. Tengo menos lista de nombres de películas. Y una de las propiedades que se definen en este componente, que se llama horizontal. Entonces si te desplazas o lees la documentación, no voy a hacer todas las propiedades. Simplemente ves lo que necesitas y luego puedes usarlo. Lo que necesito ahora es algo llamado Horizontal. Horizontal debe establecerse en true. Entonces en ese caso, puedo usar estos ítems como listas, lista plana como horizontal, como vemos en nuestra aplicación, algo así. Horizontal, no necesitamos que sea vertical. Entonces de esta manera diré horizontal igual a verdadero. Y luego ahorramos, volvemos a nuestro simulador. Y veremos que aquí tenemos la lista. Pero es muy diminuto y pequeño porque contiene sólo los nombres de ellas películas. Ahora somos capaces de conseguir la película, así que es muy genial. Entonces lo que necesitamos aquí para crear un componente, que es como un componente lo hará para mí como tarjeta. Entonces este guardia, podemos decir la tarjeta de película, podemos decir aquí. Entonces éste, Es guardia. Por lo que implementarán para mí como componente. Entonces les estoy mostrando en la próxima conferencia cómo crear su propio componente en React native para renderizarlo aquí y no usar los componentes listos. 29. Crear componentes de lista: De acuerdo, en esta conferencia vamos a pasar a un paso más grande. Entonces te voy a mostrar cómo trabajar dinámicamente con React. Por lo que ahora en React Native, cuando vas a crear un componente que sostendrá múltiples cosas repetibles, como si tuviéramos un componente y lo vamos a utilizar varias veces. Entonces para eso, por ejemplo, puedo decir que esta lista plana contendrá un título y también algunos, otro componente que será exactamente como lista plana. Y luego lo vamos a mostrar como te mostré en la demo, tenemos un título y luego lista de películas documentales. Otro título que es sostener películas populares y películas menos populares debajo de él. Por lo que necesitamos propiedades para ese componente, título y el contenido de ese componente. Hasta el momento que voy a crear una carpeta que se puede llamar componentes. Simplemente vamos a sostener los componentes con los que vamos a trabajar. Entonces componente. Y dentro de este componente, vamos a poner un archivo que se llamará menos NodeJs, porque quiero tener una lista de películas y esta lista de pelicula tiene un título. Entonces, y luego en ese caso, en mi página de inicio, puedo decir que quiero este componente de lista múltiples veces. Entonces aquí en lugar de esto, vamos a tener al menos cuatro películas populares, menos para documental, menos cuatro, por ejemplo, las películas familiares, etc. Así que para crear componente, como ven aquí, tengo un componente y te mostré previamente los atajos, fragmentos para React Native. Estamos usando esa extensión que te dije antes. Para esa extensión, si volvemos a las camas de dormir React Native, que hemos descargado aquí. Y verás como múltiples atajos que hablamos previamente de React puros componentes o por ejemplo, componentes sin estado y con retorno. Entonces usamos éste, pero ahora aquí en este caso vamos a usar un tipo diferente, que se llama componente puro. Y este componente, lo vamos a utilizar como componente también para importarlo en nuestra aplicación. Es lo mismo que éste, pero de manera diferente. Entonces en este curso, te estoy mostrando múltiples cosas para generalizar o como cubrir todos los temas sobre React Native. Entonces vayamos aquí y digamos que quiero, por ejemplo, el atajo, que me sostendrá una clase de componente puro. Entonces iré aquí y digo B, C, su clase de componentes. Y entonces tendré este componente. Y como les dije antes, queremos el componente que tenga entradas o apoyos. Y esos apoyos, podemos crearlos de una manera como la siguiente. Entonces no necesitas esta etapa 4 ahora no la vamos a usar, pero dentro de la rendición y Rick, antes del regreso, podemos definir una constante. Y en esta constante, podemos definir un utilería. Y esos apoyos, cómo podemos definirlos, por ejemplo, necesito un título. Voy a renderizar un título dentro de este componente. Y además, quiero tener un contenido, y el contenido será la lista de películas. Y esta constante hay que poner así puntales y esos prompts con vienen de React Native. Pero en este caso no se ve ninguna autocompletar aquí porque se necesita importar un componente puro el cual se extienda para que el componente puro sea una clase que se utiliza en el React Native. Puedes importarlo desde React. Entonces para eso, necesitamos importar React también. Entonces exactamente cómo lo tenemos aquí en los fragmentos, se puede decir que soy importación React. Entonces tenemos aquí estoy. Y entonces obtendrás reaccionar y estos componente, se extenderá desde componente puro que viene de reaccionar. Por lo que de esa manera, tendrá aquí la importación correcta. Entonces después de eso, este puntote, nos vamos a definir. Por supuesto, porque este puntal viene con el componente puro, así es lo que extendemos desde los componentes puros. Por lo que extendemos también sus propiedades. Y una de esas propiedades o variables son los apoyos. Entonces probemos ahora nuestro componente. Entonces por ejemplo, quiero renderizar una vista, vista normal. Por lo que podemos decir aquí tienes. Por lo que necesitamos importarlo aquí también. Por lo que diré aquí Vista de importación de React Native. Y digamos que vamos a poner sólo el componente, o por ejemplo, el título. Por lo que podemos decir aquí, podemos importar también el componente de texto. Por lo que este componente de texto vendrá también de React Native. Entonces me he atrevido aquí. Y entonces este texto sostendrá sólo el, como, algún texto aleatorio. Tendrá ese título, ese título que es chicle como propiedad para este componente. Entonces, vamos a guardar eso. Y luego vamos a usar este componente, cómo podemos usarlo o cómo podemos llamarlo. Por lo que voy aquí a crear otra vista bajo esta, bajo la lista plana. Por lo que el dipolo debería aparecer aquí abajo. Por lo que tenemos otra visión. Y esta vista dentro de ella, llamaré a mi componente, qué componente lo llamé lista. Y esta lista con vienen de dónde? De este componente. Entonces en ese caso, necesito importar este componente. Así que aquí. Por lo que tengo que decir aquí Importar y luego enumerar desde. Y luego tengo que decir como dobles componentes y luego enumerar. Entonces aquí importé el componente correcto de la carpeta de componentes. Entonces vamos de nuevo aquí. Y como les dije, hay utilería. Cómo podemos usar los apoyos exactamente después del nombre del componente. Se puede decir los apoyos que se quieran. Entonces lo que quiero aquí, tengo dos avisos. Uno es diagonal, otro es contenido. Sólo pondríamos título como ejemplo. Entonces iré aquí y digo título, y luego pasaré como cualquier texto codificado, Digamos por ejemplo, mi menos componente, Python. Entonces así así, porque lo vamos a ver aquí. Entonces cuando guardo, conseguí un adulto. Por qué con este tipo de elemento no es válido se espera una cadena para la construcción de componentes. Siempre, hice este error por propósito, solo para mostrarles que cómo es la diferencia entre los componentes agudos y esos componentes de función. Entonces componente de función, algo así como se ve aquí. Pero un componente puro, hay que llamarlos sin todos esos corchetes exactamente como estamos llamando reaccionar. Entonces cuando se quiere llamar a un componente puro, hay que importarlo así o a componente de clase. Y luego sin todos estos corchetes, funcionaría bien. Entonces ahora vamos a ahorrar de nuevo. Y notaremos que no vimos nada porque necesitamos poner un estilo para esta vista. Y vamos, por ejemplo, ahora copiar esta vez para un show rápido y guardar de nuevo. Y como ven aquí, tengo en mi título, mi lista título de componente. Entonces de esa manera, soy capaz de usar el componente z. Entonces cuando voy aquí y digo, por ejemplo, agregarme una cuerda. Podemos decir título y algún número, 2 a 2 por ejemplo. Y como ves eso, ha llegado ese componente con esa entrada que especifiqué en el hogar. Por lo que dije título tiene una entrada, mi componente de lista, título y dentro del componente de lista, lo agregué a esta cosa. Entonces en ese caso, lo veo también. Por lo que de esta manera se puede crear un componentes dinámicos. Entonces para eso, voy a mover esta lista, que tenemos aquí en la página de inicio a ese componente. Entonces hagámoslo rápidamente. En primer lugar, vamos a tener toda esta parte. Por lo que tenemos aquí como no más la vista, tendremos sólo la lista. Entonces conseguí esa lista plana. Entonces cuando volvamos de nuevo aquí a la lista, eliminaré este texto. Pondré aquí que tengo la lista plana, pero al menos necesitamos llamarlo de nuevo como componente. Entonces a partir de aquí, necesitamos copiar siempre todo el componente importante en esos componentes objetivo. Por lo que podemos tener aquí también dimensiones bucear tramposo porque las necesitaremos más adelante. Entonces eliminemos esto importante para tener la aplicación. Todos ellos son importados de React Native. Y aquí, como ven aquí, necesitamos un dato. Y esos datos, no vendrán del título. Ellos irán con el contenido, ese contenido apropiadamente. Por lo que esta propiedad de contenido de esa manera, necesito especificarla también en el componente de lista aquí. Por lo que tendré, además del título, necesito decir contenido. Y también como alguna propiedad, que serán, por ejemplo, mis películas populares. Entonces lo pondré aquí también. Entonces en ese caso, estarás seguro de que tienes las propiedades correctas se pasan a ese componente de lista. Entonces de nuevo, eliminemos esta lista plana porque ya no la necesitamos. Y ahora tenemos aquí la vista, no la necesitamos también. Por lo que tenemos aquí para guiar de estilo o celular. Entonces guardamos aquí, y así guardamos aquí, vale, seguimos recibiendo algunos errores porque la película popular variable no se encuentra aquí. Entonces en lugar de películas populares, porque te dije esto, películas populares, hemos venido por esta propiedad. Entonces dije, el contenido serán películas populares las cuales obtuve del backend y lo paso a la lista. Entonces en el componente de lista, tenemos que usar ese contenido en empinada. Entonces vamos a ahorrar. De acuerdo, ya tenemos esa lista. Entonces como recapitulación, rápidamente, hemos definido un nuevo componente que se llama lista. Y este componente de lista me sostendrá un título y un contenido. Y dentro de esta plantilla de auditoría de eso, será un título más plano y además algún título. Entonces tal vez tengas otra vista como sobre esto. Por lo que podemos tener una vista para el título. Por lo que tendré así una vista aquí. Y como te dije, no puedes tener otra vista como contenedor porque no puedes poner dos componentes del mismo nivel directamente en la devolución, necesitas contenerlos todos en un solo contenedor. Por ejemplo, aquí usé. Reacciona fragmento como recuerdas, pero aquí digamos que también podemos usar la vista. Entonces vista contenemos múltiples vistas. Y también necesito otra vista para ese artículo. Entonces en este caso, te tendremos a ti y vistas en el interior como ves aquí. Y dentro de esta vista, especificaré un texto, y este texto me sostendrá el título. Entonces aquí tengo también la pelea. Entonces el título que vendría del componente de la página de inicio y que especifico aquí en la prop. Guardemos eso. Y como ven, el título se muestra, pero está bajo el Cardozo porque necesitamos darle estilo a todas estas cosas aquí. Entonces vamos a crear como vamos a escuchar, una hoja de estilo. Entonces tendré lo mismo. Podemos tener aquí, una constante. Recuérdalo de Stein. Y esto es mareas sostendrán hoja de estilo y luego Crear. Y entonces podemos abrir y poner nuestras clases aquí. Por lo que de primera clase necesito tener aquí como estilismo para el texto, digamos que ha muerto. Y entonces vendrá del texto de puntos de Stein por ejemplo, vamos a definir esta clase. Por lo que volveré a ir aquí a mis clases. Diré el hallazgo para mí, el cristal de texto. Y dentro de este objeto de texto tendrá tamaño de fuente. Por ejemplo, ponemos 20 y 20. Sería como un píxel. Y podemos poner así font-weight. Es exactamente como CSS, pero como ves, no tenemos font-weight normalmente en CSS, lo escribes así. Pero aquí, no, porque estamos usando objetos, objetos javascript, por lo que será como CamelCase. Por lo que podemos tener aquí el peso de la fuente y este peso de la fuente, vamos a ser una cadena, y esta cadena será negrita. Entonces de esa manera es algo así como CSS, pero lo estás cambiando a sintaxis de JavaScript de alguna manera. Y el color, tal vez podamos poner algún color el cual será negro o cualquier cosa. Entonces de esa manera puedes poner color. Y se puede decir aquí relleno de fondo, como empujar el texto debajo de él o la lista debajo de él. Algunos píxeles. Por lo que podemos decir aquí a los 20. Entonces de esa manera como ves, como se muestra aquí arriba. Por lo que la vista misma necesita ser empujada desde arriba. Entonces para esa vista podemos definir como Will Stein y este cristal de estilo que hemos contenido. Podemos decir Styles y luego podemos llamarlo menos para ver por ejemplo, sí, solo lista. Podemos decir así. Por lo que podemos decir lista. Y la lista tendrá otra clase. Por lo que no podemos decir lista. Y lo podemos dar como bateo top o margen top por ejemplo, diría yo. Y este margen superior como empujar la lista desde la parte superior unos 25 píxeles de esa manera. Y aquí nosotros, me olvidé de la coma. Y luego como ven, tenemos el título de la manera correcta para esta lista. En la siguiente conferencia, vamos a hacer más estilismo y además, vamos a mostrar las imágenes de las películas como vimos en la demo. 30. Crear componentes de tarjeta: De acuerdo, en esta conferencia vamos a ver cómo podemos peinar y más hacer hermosa esta lista. Por lo que recuerdas solo estábamos mostrando el título. ¿ Y qué hay de mostrar algunas imágenes? Entonces hagámoslo de una manera que veamos como las imágenes de ellas siempre. Entonces, antes que nada, si recuerdas, sabíamos cómo podemos crear un componente. Por lo que creamos un componente de lista. Y este componente de lista, contiene lista plana, y esta lista está renderizando un solo texto. Entonces, ¿qué pasa, en lugar de eso, renderizamos un componente de tarjeta, un dios que voy a crear ahora y que sea clicable. Entonces cuando hagas click en una de las películas, nos llevará, como vemos más adelante en la navegación que navegaría por nosotros a los detalles de esa película. Entonces en lugar de que pueda ser, pasaré el artículo a un componente que se llamaría tarjeta. Entonces vamos a crear un nuevo componente y vamos a llamarlo card dot js. Y este perro guardia JS, yo usaría también, ese estilo de componente puro. Y de esa manera puedo usar también exactamente la forma en que lo hicimos con los componentes de la lista. Yo importaría aquí los tres actos y así los componentes React dot view. ¿ Cuáles son las propiedades de este componente? Podemos definir una constante y le damos un nombre como ítem. Y el artículo será como la película, que vamos a exhibir en ese jardín. Por lo que diremos este punto-apoyos. Entonces de esa manera, definí una constante que se llama ítem. Y este ítem sería una propiedad para ese componente. Y por supuesto, esto debe ser dentro del render y antes del regreso. Y tendremos que hacer de esta guardia un clickable. Entonces, ¿cómo podemos hacer eso? Si recuerdas, en React Native, existen múltiples componentes que podemos utilizar. Uno de esos componentes llamados opacidad tocable. Y la opacidad tocable te está dando la habilidad al hacer clic en algún botón o algún componente o algún elemento, si hacemos como alguna opacidad como sombreado. Y responderá por los clics del usuario y se mostrará como un considerado, como se ve aquí. Entonces de esa manera, vamos a usar ese componente también. Por lo que necesitamos importar un componente de opacidad tocable. Por lo que necesitamos decir importar opacidad tocable de React Native. Y de esa manera tengo la opacidad tocable y puedo llamarlo como componente, el regreso aquí. Por lo que una opacidad tocable tendrá también otras propiedades, como veremos más adelante, y les daríamos algunos estilos. Entonces vamos a preparar nuestro archivo de estilo. Podemos decir estilo. Y estos diales serían como a partir de estas mareas. Por lo que necesitamos también constante, que llamó estilos. Y creará aquí una hoja de estilo. Además, necesitamos importar esta hoja de tiempo. Y esta hoja de estilo no tendría un Create. Y aquí vamos a crear nuestras clases. Entonces llamemos a este estilo de opacidad tocable como por ejemplo, le damos el nombre y lo llamamos contenedor, por ejemplo. Y aquí iré al estilo y diré que tengo un contenedor y este contenedor tendrá el objeto y las siguientes propiedades. Podemos dar algo de bateo en general, algo así como podemos decir cinco píxeles. Y también podemos decir como necesitamos un puesto familiares. Te diré por qué después. Entonces de esa manera estamos preparando este componente para tener algunos estilos. Entonces tenemos aquí el estilo serán estilos aquí y opacidad tocable. Entonces vamos a guardar ese componente en general, y voy a importarlo en mi lista. Entonces en lugar de texto, usaría guardia. Y este guardia tiene una propiedad que se llama artículo. Y pasaré lo que el artículo que está regresando de la lista de películas como recuerdas. Entonces tenemos aquí ese artículo, que es jefe a su tarjeta. Y esta tarjeta, la estaremos cerrando. Y para que no necesites usar todo esto, que podamos usar esas etiquetas de cierre de un lado. Por lo que necesitamos importar ese artículo del carrito. Entonces iremos aquí y necesito hacer guardia de cristal de importación de componentes, que estará en este mismo nivel de la carpeta de la lista. Entonces sería así. Entonces tenemos a DIOS, desde el archivo de la tarjeta porque están en el mismo nivel del archivo. Entonces guardamos y tenemos aquí nuestro componente, artículo o título, pero no tenemos nada aquí porque está vacío. Entonces vamos a esa tarjeta, necesitamos poner dentro de esta opacidad tocable, algo. Por lo que ahora está funcionando como una opacidad tocable, pero está vacía. Pongamos también otro componente que se llama imagen. Pondré esa imagen de la película dentro de este componente. Entonces como ven aquí, también tiene estilo. También es necesario importarlo. Desde React Native, y luego puedes usarlo. Y tiene dos propiedades. Uno de ellos ha muerto y después la fuente. El origen sería la fuente de la imagen que se desea utilizar dentro de ese componente. Por lo que iré a importar la imagen también de React native. Pondré aquí imagen. Entonces pondré aquí ese componente de imagen. Y la imagen de componente tiene alguna propiedad. Y también serán componentes de un lado, por lo que no tenemos nada dentro, así que tienes que usarlo así. Entonces primero necesitamos que esto muriera por ese componente o por esa imagen. Por lo que usaríamos también los estilos. Por lo que yo diría estilos. Imagen por ejemplo, o imagen de película depende de ti. Y después de eso podemos definir que murió aquí. Entonces iré aquí y diría estilo, y necesitamos la fuente como vimos en la documentación. Entonces, ¿cuál será la fuente? El origen, si recuerdas que estamos consiguiendo el ítem a ese componente para que el contenido de estas populares películas se escriban para mí array de películas. Y esas matrices de películas se utilizan en la lista plana. Y la lista plana los haría artículo por artículo, película por película. Y le paso cada película a esa tarjeta. Por lo que cada año de cine se pasa a esta tarjeta. Por lo que puedo usar las propiedades de las películas. Por lo que sí recuerdo esa propiedad que vamos a utilizar para obtener la imagen será esa presumir o imagen. Por lo que puedo poner aquí artículo que refuerza camino. Entonces como recuerdan, tenemos aquí repartee post a su jefe de la película, que usamos antes. Pero leamos más detenidamente la documentación. Voy a guardar aquí, tenemos aquí campo y se llama como si nos estuviera dando un error, esa propiedad inválida. ¿Por qué? Porque año, cuando quieres usar esa propiedad y quieres la visualización de la imagen fuente desde URL, necesitarás usar este objeto que se llama URI, no puedes poner esa fuente de la imagen o por ejemplo, la camino de la imagen directamente. En este curso, necesitarás utilizar una propiedad que se llama URI. Entonces para eso, no soy suficiente para usar solo el artículo. Tenemos que poner otro objeto dentro. Y dentro de este objeto tenemos una propiedad que se llama URI, así. Y entonces, de acuerdo, la imagen no me daría ningún error. Pero no estamos viendo ninguna imagen. Trae ahora. ¿Por qué? Porque si recuerdas, necesitamos prefijar la imagen con algún baño, como hicimos con este Finder. Y hemos creado el array de imágenes. Y estas imágenes array se prefija así. Por lo que necesitamos usar también cada imagen para tener prefijo URL como este. Entonces vamos a copiar esta parte también. Y acuda a nuestra guardia. Y voy a decir que u es el URI, esta cadena más el ítem dot poster. Entonces cuando guardemos, veremos que todavía no vemos nada porque no dimos una clase para la imagen hasta el momento que necesitamos ir a los Estilos y darle un estilo, un nuevo nombre de estilo, que se llama imagen como definimos aquí. Y voy a dar una altura por esta imagen, digamos 200. Y también podemos dar, por ejemplo, trigo, que será 20 o 120 fin de semana decir. Y podemos ver tan bonito como ves, tenemos esa lista ya de las imágenes, pero también necesitamos darle como algún radio de frontera. Solo estoy mostrando aquí como algunas habilidades CSS. Podrás hacerlas todas como quieras en base a lo que necesites para tu diseño. Entonces voy aquí a dar radio fronterizo 20. Y tenemos aquí nuestra lista, y tenemos nuestros componentes o películas. Y cuando haces clic en ellos, como ves, es exactamente como se esperaba de nuestra aplicación. En ocasiones si la imagen de la película es muy pequeña, tal vez se cortaría así. Pero debido a que estamos usando la misma API, tenemos imágenes confiables. Entonces de esta manera es mejor usar alguna propiedad que se llama re-size mode cover y este molde de redimensionar lo cubre. Cubrimos el contenedor de esa imagen exactamente en la misma altura y anchura que acabamos de especificar aquí. Por lo que ese tamaño de la imagen original no importa. Se ajustará exactamente en este ancho y altura. Entonces cuando guardes, tendrás el mismo ancho y altura, exactamente como especificaste aquí, incluso la imagen es más pequeña. Entonces cuando queremos usar múltiples listas, solo podemos ir al hogar y duplicamos todas estas vistas. Por lo que quiero tener otra vista aquí. Entonces conseguiré otras películas, y además conseguiré otras películas, etc. Así que de esa manera, podrás conocer tu lista de películas populares. Por supuesto que necesita más estilo como veremos más adelante. Pero de esa manera estamos reutilizando ese componente pero con datos diferentes. Entonces de esa manera, hemos creado nuestro componente y vemos la lista de las imágenes. Entonces vayamos aquí a la página de inicio y demos para este componente un nombre como o esta lista podemos decir películas populares. Entonces no podemos poner aquí películas populares. Y va a exhibir para mí las películas populares. Y más adelante veremos cómo podemos listar cada vez más listas para nuestras películas. Pero vamos a hacer más pasos como estilizar y refactorizar y mostrar imágenes de marcadores de posición para que este componente de tarjeta sea más mejor y más dinámico. 31. Ponedor de imagen en el componente de tarjeta: De acuerdo, Una de las preguntas importantes que podemos enfrentar en el futuro si no hay imagen mostrada aquí. Entonces cuando no podemos recibir de la API ninguna imagen. Entonces, ¿cómo podemos resolver eso? Para eso, utilizaría una imagen de marcador de posición e imagen que se almacena dentro de la aplicación. Y cuando hay un error de cargar esa imagen, entonces mostraría aquí un tenedor de lugar. Entonces para eso, quiero almacenar una imagen dentro de mi estructura de carpetas. Por lo que esa carpeta puede ser, por ejemplo, nombrada como activos. Por lo que en este activo, puedes poner cualquier cosa que necesites para tu solicitud. Uno de ellos puede ser como imágenes. En el interior de las imágenes de carpeta. Puedo crear mis propias imágenes y colocarlas aquí. Entonces por ejemplo, he creado una imagen de portador de lugar para mí. Lo hice bien con Photoshop. Por lo que con Photoshop, puedo colocar esta imagen en lugar de la imagen de la película cuando no hay imagen disponible. Entonces para eso, podemos usar eso también. Entonces cómo podemos mostrar esa imagen cuando no hay imagen disponible. Entonces cuando voy aquí, Definamos una constante. Podemos llamar a esa imagen de marcador de posición constante. Entonces digamos un año imagen de titular de lugar constante. Esta imagen titular del lugar se requeriría del baño que he especificado, que estará en la carpeta de activos. Entonces para eso, usaría la carpeta de activos. Voy a ir un paso arriba activos imágenes, y luego voy a especificar la imagen que quiero. Y el nombre de la imagen será marcador de posición que B y G. Así que en ese caso, tendré mi imagen dentro de la imagen de marcador de posición. Por lo que en el componente de imagen se puede especificar URI o directamente un archivo. Entonces cuando se quiere usar una multa, se utiliza requerido. Por eso usé eso requerido. Por lo que la fuente de la imagen puede ser URL o puede ser un archivo. Entonces para eso, necesito especificar algo dentro de la fuente. Diré item dot poster path. Es como lo estoy haciendo aquí. Y si, y luego pongo signo de interrogación, este oro en línea. Si. Entonces, puedes, por ejemplo, poner un if en una línea para que después del signo de interrogación, pongas el punto de valor Es a través. Y luego pones colon, y luego el valor será cuando sea falso. Entonces en este caso aquí será cuando la ruta de refuerzo tenga un valor, o esté definida, o tenga un contenido, y cuando esté indefinido, obtendrá este valor. Entonces para eso, usaría cuando tenga un valor, dame este objeto, que será tú eres yo y toda la imagen del cartel. Pero cuando no tenga ningún valor, pondré aquí un colon. Y después de esta columna, pondré imagen marcador de posición. Entonces en ese caso, después de guardar, está formateada. Si el ítem, la ruta del póster es indefinida o no está disponible, todo eso es error, o está vacío, entonces no mostrará que debas que tome la imagen del portador del lugar. Pero cuando haya un valor, tomará el primer valor, que es después del signo de interrogación, que éste será cuándo. De acuerdo, Entonces, ¿cómo podemos probar eso? Podríamos así esta imagen portadora del lugar de una manera que volteamos. Pero esta condición, así que pongamos aquí no. Entonces en este caso, cuando haya una pantalla de imagen de póster para mí, esa imagen de marcador de posición y guardar, veremos que tenemos las imágenes de marcador de posición. Pero de esa manera, no sabemos cuál es el nombre de la película. Por lo que es mejor también mostrar el nombre de la película. Por lo que mostramos el nombre de la película por si solo hay marcador de posición de imagen. Por lo que podemos decir también alguna condición aquí. Por lo que añadiré también, como después de la imagen, tendré un texto componente y este texto se mostrará cuando no haya trayectoria de cartel. Entonces diré aquí y objetaré después de la imagen. Entonces tenemos aquí, como cuando hay artículo, ese tenedor de lugar, o cuando no hay artículo y soporte de lugar, entonces y hacer tiempos como recuerdas, lo hicimos cuando manejábamos el error. Entonces colocaré un componente de texto. Por lo que aquí llamamos un componente de texto. Y le damos a este componente de texto un valor el cual será el nombre de punto del elemento. Para que podamos tener el nombre de la película, o en este caso, tenemos en nuestra API, Se llama ítem dot-dot-dot. Entonces cuando guardo entonces bien. No veo nada porque dije cuando no hay imagen de póster, pero en nuestro caso, esa es una imagen de póster. Entonces solo para prueba, como les dije, volteamos las condiciones aquí para ver qué vamos a hacer con la imagen de marcador de posición. Entonces como ves, necesitamos importar también aquí el componente de texto, así que lo copiaré y está bien, bonito. Tenemos ahora el nombre de la película, pero es fea porque cuando el nombre de la película es largo, acercando a las otras películas. Entonces para hacer eso, o podemos manejar eso colocando, por ejemplo, el nombre de la película aquí en medio de la imagen del portador del lugar. Entonces vamos a darle a este texto algún estilo que veremos aquí. Estilo y este estilo podemos agregar también algunos vidrios los cuales pueden ser estilos. Y luego dentro de esto muere, no podemos decir nombre de película, por ejemplo. Y dentro de este nombre de película, vamos a darle estilo a nuestro nombre de la película en el soporte del lugar. Entonces vayamos ahora a los estilos que añadiré aquí y a tu vaso, que será el nombre de la película, que tenemos como aquí nombramos. Entonces diré aquí que el nombre de la película será un objeto. Por lo que la primera propiedad para esta clase, le vamos a dar una posición, absoluta. Te diré por qué. Y así podemos, por ejemplo, sólo para ver qué está pasando. El absoluto de posición es ubicar el componente en el medio o al principio del componente padre. Entonces en nuestro caso, nosotros, nuestro componente padre es este contenedor, como ven aquí, opacidad tocable. Tiene nuestro componente padre del texto. Entonces en ese caso, necesitamos poner el componente padre son relativos. Entonces cuando tenga una posición relativa o absoluta, entonces estarán relacionados entre sí por relativo. Porque al quitar este familiar, entonces la posición de este ítem, a veces o un Android, se ubicaría en la parte superior de la pantalla porque no voy a tener una posición electiva para este niño con su patente. Entonces volvamos a ponerlo. Tenemos ahora posición absoluta. Tienes que estar seguro de que tienes posición relativa. Y ahora voy a dar como algunas propiedades. Por ejemplo, para darle algo de ancho, podemos poner lo similar, el ancho es el mismo sobre el ancho de la imagen pero menos como 20. Y además, podemos hacer que ese texto se alinee con el centro. Para que podamos tener ese texto en el centro. Entonces es exactamente como lo hacemos con el CSS normalmente. Y además, podemos este artículo ubicado en el medio o ponerlo en el medio, tienes dos opciones. Aquí. Se puede hacer el contenedor como una línea de artículos. Se puede poner de una manera como centro, como se ve aquí. O puedes hacer, en este caso son el artículo en sí. Se puede decir alinearme y esto yo mismo dejaría, el componente tendrá una posición central. Entonces una de esas dos opciones, prefiero usar nuestros artículos de línea, como quiero alinear todos los artículos dentro de este contenedor en el centro. Entonces ahora necesitamos empujar el texto en la parte superior un poco como desde la parte superior para no estar exactamente en el borde de la imagen. Por lo que también puedes ponerlo aquí en el centro. Quiero mencionarles que es muy importante poner una altura para el contenedor porque nuestro contenedor en este caso es esta tarjeta. Entonces de esa manera, si ves, si alineas sus componentes como puedes, por ejemplo, intentemos ponerlo en el centro aquí. centrará la instrucción para que se pueda decir justificar el contenido. Entonces cuando guardo eso, cuando pongo justifique centro de contenido, como ves, todos los contenidos empujaron hacia abajo esto porque que la altura de este contenedor tiene el resto de la vista. Entonces tenemos aquí este slider, y luego tenemos el resto de la vista se asigna automáticamente porque el contenedor principal es un flex. Entonces de esa manera, tenemos que tener cuidado con eso. Es mejor dar altura para ese contenedor. Por lo que se lo daré también a un píxel de 100. Por lo que en ese caso, veremos que nuestro artículo se encuentra exactamente en el medio y el nombre de la película se encuentra en el medio y la altura del contenedor es así a un 100. Entonces en ese caso, hay que garantizar todos los tamaños para no tener problemas en el futuro. En mi caso, no voy a poner el centro justify-content, pero voy a mantener la altura. Pero voy a empujar un poco ese texto aquí desde arriba. Entonces podemos decir aquí DHAP del nombre de la película, tendrá como 10 píxeles, podemos decir. Por lo que voy a poner aquí entonces pixel. Entonces después de guardar, veremos que el texto es de manera más bonita cuando la película no tiene imagen. Entonces ahora, cuando queremos que funcione con normalidad, tenemos que voltear de nuevo sus condiciones. Entonces cuando hay una imagen de cartel o camino reforzada mostrar para mí la imagen que la imagen normal. Entonces no necesitamos este nudo. Y no hay una exhibición de baño post-doc para mí, un texto donde sostendrá el nombre de la película, así que no la necesitamos así. Entonces decimos cuando hay una imagen sin cartel, entonces no les gusta esta hoja, ese texto. Entonces simplemente guardamos eso. Y entonces tendremos el comportamiento normal. Como ven aquí, todo está funcionando bien. No tenemos ningún problema. 32. Verificar de tipos en React Native Native: A medida que tu aplicación está creciendo, siempre necesitas atrapar muchos errores y errores con la comprobación de muertos. Para algunas aplicaciones, también puedes usar extensiones de JavaScript como ley o TypeScript para la comprobación de tipos. Pero hay una manera más fácil con el TypeScript o JavaScript que estamos usando aquí. Por lo que también puedes revisar el muslo de tus variables, todos tus apoyos. Entonces cuando quieras hacer un tipo de prop, también podemos hacerlo aquí. Por lo que podemos definir una constante, podemos llamarla tipos de gotas. Por lo que no podemos decir esta const. Y luego tipos de prop. Y este tipo de utilería sería un objeto. Y este objeto contendrá también ese prop que aquí hemos definido. Por lo que definimos aquí artículo, este punto apoyos. Y este artículo aquí, no asignaremos sólo como un valor o algo así. Asignaríamos un pañal y estoy donde puedo llevar tipo. No puedo traer pañales en una biblioteca que se llama tipo de prop, y ya está instalado cuando instalas React Native o ¿iniciarás un proyecto? Por lo que ahora tenemos un tipo de prop de tipos de prop. Y estos prototipos tenemos todo tipo que necesitas para tus prompts. En nuestro caso aquí tenemos el artículo será un objeto. Por lo que podemos decir que el tipo de prop de este ítem será objeto. O bien puedes definir cadena. También se puede definir, por ejemplo, número. Para que puedas definir cualquier tipo que quieras. Por lo que aquí voy a decir que los tipos de prop de este ítem o este prompts serán como objeto. Y entonces esto no es suficiente tienes también para adjuntar esos prototipos al componente. Entonces, ¿cómo hacemos eso? Bajamos cuando vamos a exportar la clase o el componente o el componente puro, decimos guardia el nombre de la clase en sí y luego tipos caídos. Como ven aquí. Entonces se puede decir que los tipos de prop, que se definen en la parte superior. Por lo que los tipos de utilería de esta guardia serán los prototipos que definimos en la parte superior. Entonces después de guardar eso y cuando estás depurando tu aplicación o cuando lo estás haciendo, por ejemplo, alguna asignación para este mensaje, te dará error cuando digas que este ítem es S3, saber que debe ser un objeto. Entonces hagamos lo mismo también para el elemento de lista, necesitamos también el componente de lista que hemos creado previamente. Por lo que necesitamos también definir una constante, hace frente a tipos. Tenemos aquí título. Por lo que ese título sería tipos de prop pero murió de cuerda porque estamos recibiendo la cadena del título o para la película. Y también ese contenido tendrá objeto porque contendría toda la información sobre la película. Por lo que pondremos aquí también contenido y no olvidamos importar tipos de prop de tipos de roca. Por lo que aquí pondremos también el libro Tipos. Y al final tienes que exportarlo, que no tengas que olvidar eso. Por lo que decimos list dot props type es igual a tipos de prop como vemos aquí. Entonces cuando ahorramos, garantizamos que todo está funcionando bien. No tenemos ningún error en la consola ni algo así. Por lo que ahora sostenemos nuestros componentes con tipos de prop. En ese caso, no obtendrás ningún error cuando estés llamando a esos componentes. Por lo que te voy a mostrar para el examen. Yo llamaría aquí un número para este título. No llamaré, por ejemplo, un texto. Por lo que ahorraríamos, verá prop inválido, título de tipo. Entonces tenemos aquí un error en el tiempo. Entonces cuando pongas este como cadena, entonces no verás ningún error. Por lo que debes estar seguro de que el tipo está justo aquí. De lo contrario obtendrás errores. Entonces cuando veas en la siguiente conferencia, es cuando estoy definiendo un componente, hago este prototipos es solo para depurar y atrapar muchos bugs, tal vez viene con un mecanografiado. Entonces como ves aquí, cuando recibo un error, título de prop inválido de tipo string suministrado a la lista debería esperarse como objeto. Esto se debe a que como ves, he definido este título como un objeto, pero debe ser una cadena. Entonces tenemos año para poner una agitación y eso ahorramos. Y volvemos a ir a la consola. No obtenemos ningún nuevo error. Tenemos sólo el error donde tenemos el tipo fue objeto. Por lo que en este caso puedes ver también tus errores aquí. 33. Agregar vista para desplazar la pantalla de inicio: De acuerdo, en esta conferencia vamos a ver cómo podemos hacer un pergamino para esta revisión o para la página de inicio. Por qué voy a hacer un desplazamiento aquí. Porque si ves que si creo otra vista, por ejemplo, tendremos documentos, películas y también tendremos películas familiares. Entonces en ese caso, verás que no podrás desplazarte. Y una vista se está haciendo cada vez más pequeña. Y nuestro slider, Nuestra vista está dividida por todas esas vistas. Entonces en ese caso, es mejor crear un pergamino tuyo. Por lo tanto, crear una vista de desplazamiento es mediante el uso de un componente de React Native, que se llama ScrollView. Por lo que podemos usar esta vista de desplazamiento fácilmente. Puedes importarlo desde React Native como ves aquí, y luego puedes usarlo. Y para Raúl estás contento con ese ScrollView. Entonces voy a rodear todas las vistas que tenemos aquí con ese ScrollView. Por lo que dentro de su fragmento de reaccionar aquí, necesitamos localizar la vista de desplazamiento y luego la cerramos antes de que la etiqueta de cierre off reaccione fragmento. Entonces no volveré a ir aquí y lo cerraré. Y como ven aquí, ahora tenemos posibilidad de desplazamiento en la aplicación. Entonces de esa manera, cuando creo múltiples vistas para otras películas, como como por ejemplo, podemos decir aquí múltiples vistas. luego podamos desplazar nuestra aplicación de forma segura y pacífica sin ningún problema. Y como ven, tenemos, cubrimos la parte posterior, las señales del deslizador, que habíamos hecho antes. Entonces volvamos a poner todo. En la próxima conferencia, veremos cómo podemos agarrar los datos de películas populares, familias, y documentales, etc. 34. Documentos de televisión popular: De acuerdo, Si recuerdas, hemos creado múltiples servicios para conseguir TV popular, próximas películas y películas populares. Entonces vamos a crear también un slider para esos servicios. Y además vamos a sumar más servicios como las películas familiares y documentales. Entonces empecemos a crear un deslizador para la televisión popular. Tenemos películas populares, tenemos próximas películas recreadas aquí. Ahora usemos la popular TV. Entonces voy a la página de inicio y luego diré también, llévame la televisión popular para que podamos llamar nuevamente al servicio de la misma manera como lo hicimos exactamente con los servicios anteriores. Entonces aquí diremos que pónganse popular, dv es exactamente ese nombre del servicio como lo tenemos aquí. Y vamos a importar de los servicios. Por lo que hay que recordar que siempre estás importando esos servicios. Y luego bajamos a la superficie otra vez y necesitamos poner algo así como set popular TV. Por lo que podemos decir una variable donde obtendríamos televisores populares. Entonces de esta manera, también podemos crear otra variable de estado que será exactamente como las películas populares, pero se llamaría TV popular. Entonces lo hacemos con su mismo, copiamos la misma línea y decimos TV popular. Y aquí decimos set popular TV. Y de la misma manera, vamos a utilizar la variable que se llama TV popular para encaminarla a la lista. Entonces duplicemos esta vista. Y luego agregaremos aquí, no películas populares, pero podemos decir programas de televisión populares, por ejemplo. Y entonces el contenido será TV popular valioso, que hemos creado en la parte superior. Y ahora tendremos esa popular TV. Aquí. ¿Ves eso? Sí, el plomo se está quejando de que los componentes vacíos se autocierre. Por lo que es mejor no tener un cierre así. Yo quería mencionar eso antes, pero no tuve esa oportunidad. Por lo que sólo tendrías aquí para poner como esta etiqueta de cierre es escritura de todo el componente DAG que es como una puerta, hazla una etiqueta de cierre lateral. Por lo que de esa manera que tenga longitud sería feliz. Entonces vamos a ahorrar. Y luego vamos aquí. Tenemos esos populares programas de televisión. Entonces lo que tenemos ahora, películas populares, programas de televisión populares, tengamos documentales y familia. Entonces de la misma manera que vamos a sus servicios y luego voy a tener un nuevo servicio cual se llamará conseguir familia o conseguir películas familiares o documentales. Empecemos primero con buenas películas familiares. Entonces aquí en lugar de conseguir próximas películas, podemos decir Obtener películas familiares. Y para muchas películas, necesitamos revisar la API para eso. Por lo que necesitas ir al sitio web de la API de base de datos de películas y luego debes revisar cómo obtener las películas o la familia. Entonces pondríamos películas y veremos que tenemos muchos recursos. Y hagámoslo un poco más grande. Y verás que no tenemos algo así como unas películas familiares especiales como no tenemos las categorías. De esa manera. Prefiero que leas más la documentación para conseguir lo que quieres. Por lo que después de leer la documentación, descubrí que hay algo llamado Descubrir. Y dentro de esta portada hay más que descubrimos y TV descubrimos y cuya película descubren. Puedes usar esta API como esta película de tirantez de portada para obtener más de estos basados en algún filtro. Es como filtrar las películas en base a algo, por ejemplo, por región, por, buscado por, y también certificaciones de pórtico incluyen adulto, incluyen video, toda esa información. Puedes conseguirlos cuando quieras factorizar la película. Entonces quiero filtrar por, por ejemplo, Jenna, Jenna, por ejemplo, es tipo de ellos será categoría org de la película. Y luego necesitamos pasar el DNI de la Ginebra donde queremos ver las películas familiares. Y luego obtendremos la película familiar hasta el momento que necesitamos también enumerar lo generoso antes de usar esta API. Pero primero pongamos un oso en qué API para eso. Por lo que ahora usaré este baño de la API en mi servicio es Paul. Entonces aquí tendremos la URL API, la original, y luego pasaré aquí la cosa que se llama Descubrir y luego película. Entonces en ese caso, después de eso, también pasamos la API. Y aquí tendremos ese filtro Jenner. Entonces género, filtro Jenner será como después de la clave API que ponemos fin. Y luego vamos a la documentación y copiamos la parte donde está diciendo qué Jeanette o qué parámetro quieres usar con esta API para obtener la información filtrada. Entonces, por ejemplo, me pondría con Jenna. Entonces en este ancho Jenna, lo puedo sesgar aquí. Y después de eso, pondré la identificación, que será un número, donde será la película de categorías familiares. Entonces, ¿cómo vamos y conseguimos esa identificación? Entonces volvemos a ir a la API y veremos una de esas API, que se llama genéricos. Entonces aquí podemos usar eso y nos pondríamos como lista de películas genérica. Y podemos usar esta API de la misma manera como lo hicimos con un cartero para conseguir también, los más V o el ID de categoría familiar. Entonces abramos Cartero y así de la misma forma que vamos a llamar a ese servicio. Entonces aquí estábamos llamando a películas populares y volveremos a llamar al DNI o a los ingenieros o a las categorías de las películas. Entonces vamos a copiar esta parte. Podemos decir lista de películas genérica. Queremos conocer la identificación de la visa más para que podamos, después de esto popular, tenemos, esta es una API básica como vimos aquí estamos reemplazando y aquí está nuestra clave API. Entonces de esta manera, lo ponemos aquí y no se olvide de quitar este listón. Y luego presionamos enviar hielo. Tenemos ahora todos los genomas y uno de ellos es de familia, y la identificación de eso será de 10 mil 751. Por lo que vamos a copiar este DNI. Es muy importante copiar el DNI, no el nombre. Entonces de esa manera, irías aquí con Jenna y luego colocarás esa identificación aquí. Y nosotros ahorramos. Y entonces conseguiríamos también sus películas familiares en la página de inicio. Entonces exactamente cómo lo hicimos con dv popular. Por lo que copiamos aquí la misma parte y llamamos al servicio, que se llama Obtener películas familiares, enojado. Nuevamente, arriba, lo importamos de los servicios. Y entonces decimos aquí una nueva variable de estado la cual será constante. TV popular, no, necesitamos así establecer películas populares o familiares. Por lo que aquí vamos a obtener velocidad de las películas populares. Agregaremos películas familiares. Y aquí se colocarán películas familiares. Por lo que se establecerá familia. Entonces en ese caso, podemos usar también esas dos variables de estado. Entonces primero, pongamos las películas familiares, que obtuvimos de la API que tenemos aquí películas. Y luego decimos películas familiares de set. Y luego usamos esa variable que creamos aquí. Simplemente lo llamamos películas familiares. Lo utilizamos en nuestra lista. Entonces vamos a crear otra lista u otra vista incluyendo la lista. Y aquí dentro, de esta manera, tendremos exactamente como también, algunas películas familiares. Y aquí en lugar de la televisión popular o las películas populares, llamaríamos valiosas a las películas familiares. Entonces aquí tendremos una variable mini películas y luego correremos el simulador. Otra vez. Lo guardamos todo. Ya veremos que nos dieron también las películas familiares, que aquí se enumeran. Como ves, sigue siendo como el documental o una televisión popular. Esto se debe a que tenemos importante el servicio, pero no lo usamos, Así que debemos usarlo también. Todavía tenemos aquí TV popular. Entonces de esa manera obtendríamos películas familiares y se refrescarán ratones. Tenemos ahora que las películas familiares Jenna, o categoría que viene de la APR. Entonces hay última cosa que se llama documentales. Dejaré que te siga como tarea. Puedes hacerlo rápido. Seguro que lo puedes hacer. Será exactamente lo mismo. Basta con buscar en la API y obtendrías exactamente eso del audio de la documentación y obtenerlo del general como lo hicimos antes. Entonces como verán aquí, que tenemos aromas calientes, sabiduría thriller. Y además hay algo llamado documental como se ve aquí. Entonces quiero que crees un servicio y luego tú también, necesitas crear el servicio más antiguo, crea variable de estado y agrega la lista o la lista de desplazamiento a nuestra aplicación. 35. Segunda sección Refactoring de sección: De acuerdo, hagamos un poco de refactorización ahora en nuestro componente de la página principal. Entonces la primera refactorización, que quiero hacer es sobre los que recopilan los datos de las películas en múltiples métodos, como tenemos promesas múltiples, como entonces y atrapar múltiples veces. Por lo que también podemos hacer todo esto en un solo objetivo mediante el uso de combinación de promesas. Entonces saben que éste está regresando para mí una promesa como les mostré antes. Entonces ahora lo vamos a hacer como todos ellos en un solo método y luego tendremos una entonces y una captura. Entonces en este caso no nos vamos a fundir múltiples errores o múltiples thens, y tendremos acorde largo. Entonces para ello, primero, voy al final de este efecto, como ven aquí, hemos usado efecto. Después de ello. Definimos un componente o una constante o una función, o se puede definir eso también antes que él. Por lo que no se puede decir constante, podemos decir ir a obtener datos. Entonces con estos buenos datos, será una función donde vamos a recoger todas las promesas juntas. Entonces creando una función es exactamente la forma en que lo hicimos aquí en el componente. Definimos una función como esta. Y luego tenemos una función de flecha, y luego tenemos el detalle de la función. Entonces voy a ir aquí y voy a decir como tengo esos corchetes y luego una fila. Y dentro de este método voy a definir mis datos. Entonces antes de eso, no olvides poner igual para tener la constante de la manera correcta. Entonces ahora que Get Data es una función, voy a hacer unas promesas donde me va a devolver una promesa de todas las funciones que he definido ya dentro del efecto. Entonces para hacer eso, ponemos retorno, sólo regresamos. Tendremos una promesa así, como ese poema es el vidrio viene de JavaScript. Y decimos todo. Entonces cuando establecimos todo, esta será matriz de múltiples promesas de que se van a combinar juntas y me den esa exaltar también en la matriz. Entonces vamos a abrir el efecto de uso de nuevo, tenemos múltiples métodos. Entonces pondré aquí en toda la matriz donde voy a llamar a todas las funciones que necesito para las películas. Entonces, vamos a conseguir primero las próximas películas. Y entonces vamos a conseguir esas películas populares. Y nos pondríamos tan bien esa popular TV. Y entonces vamos a conseguir esas películas documentales y familiares porque te dije que creé las películas documentales en como tarea para ti y tú lo hiciste. Yo estoy seguro. Por lo que ahora tenemos conseguir películas documentales al final. Entonces de esta manera, tendremos todas esas promesas fueron devueltas para mí en un solo objetivo que se llama matriz de promesas. Entonces ahora vamos a llamar a obtener método de datos. Entonces para usar ese método de datos, lo estamos usando como promesa también porque su retorno para nosotros una promesa. Y esta promesa, podemos llamarla efecto de uso interior. Entonces nos desharíamos de todo eso. Entonces vamos a mantenerlo así. Y llamamos a eso función de obtener datos aquí. Simplemente podemos hacer un registro de consola para estar seguros que realmente estamos obteniendo los datos de la manera correcta. Por lo que voy a decir aquí, Get Data. Y luego da obtener datos, volverá para mí entonces porque es una promesa. Entonces de esa manera, voy a decir entonces, y luego voy a conseguir valores. Y esos valores de esa manera también serán una matriz porque tenemos la promesa como array de viejo. Entonces de esa manera pondremos la matriz de promesas exactamente el mismo orden como lo colocamos aquí. Por lo que la respuesta tendrá toda la devolución de llamada será una matriz contenida próximas películas, por ejemplo, y así las películas populares y populares de televisión y películas familiares. Entonces coloqué esa matriz respuestas de esta manera. Soy películas próximas, películas populares, y TV popular, películas familiares documentan cualquier película. Tienes que tener cuidado de que tengas el mismo orden que colocaste que llama aquí, debes tener la matriz de la misma manera aquí también. Así que ten cuidado de no perder tus datos. Por lo que las películas populares no se llevarán a cabo de otra cosa si se mezcla eso. Y como saben, esta es una función de devolución de llamada. Entonces de esa manera, también necesito devolver algo así. Podemos hacer eso usando la función de flecha como esta. Y esta función de flecha, puedo especificar qué va a hacer con esas variables, como establecer el documento que filmes set películas películas familiares y TV popular. Entonces de esa manera, puedo mover todos esos artículos que aquí se llaman, para que podamos moverlos dentro de este Get Data entonces. Entonces vamos a Guardar ahora para ver si estamos formateando en este momento todo está bien. Y ahora voy a poner mis datos y poner los datos dentro. Entonces, antes que nada, necesitamos tener las próximas películas y tenemos las películas como imágenes como recuerdas. Pero en lugar de tener películas aquí, lo tendremos como películas populares. Entonces de esta manera, podemos cortar esta parte y ponerla aquí. Y luego decimos próximas películas para cada película. Y luego construimos la matriz de imágenes de películas como vimos anteriormente. Nuevamente, necesitamos también conseguir las películas populares. Por lo que también podemos ponerlo aquí después de películas populares, pero la variable no serán películas, serán películas populares. Y también necesitamos conseguir la televisión popular exactamente de la misma manera como lo hicimos con todas esas cosas. Entonces lo voy a hacer rápido. Entonces de esa manera, establecemos todas esas variables o variables de estado con sus matrices de byte o respuestas de esa obteniendo datos de los servicios que hemos creado antes. Por lo que ya no necesitamos todos esos llamados servicios. Ya los podemos quitar. Entonces porque no necesitamos de nuevo tener seco y luego agregar catch por cada servicio. Ahora, combinamos todo en uno y tendremos menos espacio para el código. Por lo que aquí no tenemos muchas llamadas, pero también necesitamos captar el error. Entonces después de eso entonces ven aquí tenemos aquí, entonces, y luego después de eso entonces pondré aquí atrapar. Y con esta captura, cogeré un error. Y es exactamente como lo hicimos antes para captar el error que viene en caso de que haya un problema en el back-end. Entonces de esta manera, diré error y luego estableceré error, que es éste. También nos hemos quedado valiosos creados para el error de conjunto. Será un error. Por lo que podemos, de esa manera, mostramos algún mensaje de error como vimos anteriormente. Pero de cualquier manera, haremos un componente especial para el error como veremos más adelante. Entonces ahora vamos a guardar todo y a ver si nuestra aplicación sigue funcionando bien. Como ven, todavía estamos obteniendo los datos bien. El único pequeño problema o advertencia que podemos llamar que tenemos nombres duplicados de variables. Entonces porque aquí tenemos la variable de estado que se llama películas populares. Tenemos de nuevo aquí popular película. Entonces me gustaría tal vez sufijo esas variables con un dato que podamos poner así. Por lo que próximos datos de películas y así para todo el resto. Y de esa manera, podemos distinguir entre esas variables valiosas y las de estado. Entonces de esa manera tendremos todos ellos sufijo a sus datos. Y aquí tendremos también próximos datos de películas y luego películas populares que, y aquí tendremos datos de TV populares y muchos datos de películas. Y lo mismo para el documental. Entonces de esa manera, vamos a tener, mantener el, me gusta. No tenemos duplicación de nomenclatura de constantes porque no tenemos películas populares como variable de estado. Y luego lo defino aquí como una variable de datos, así que es mejor tenerlos de esa manera. Otra cosa que quería mostrarte como tampoco podemos mostrar esa vista o la lista totalmente, por ejemplo, este slider hasta que los datos estén listos. Por ejemplo, para el cuadro de deslizador, puedo rodearlo todo en un objeto como se ve aquí. Entonces podemos poner aquí un objeto. Y este objeto contendrá para mí datos que estoy llamando. Por ejemplo, en este caso aquí, las películas imágenes. Y luego pongo y 2 veces, como si hay películas imágenes, entonces pongo esta vista. Entonces de esa manera, también puedo poner la vista en el camino. Al igual que no tenemos ningún problema cuando no tenemos ninguna película, imágenes. Esos son slider, no se mostrará si no hay películas imágenes o películas imágenes es indefinido. Entonces haremos lo mismo por los demás. Entonces en la forma como podemos hacerlo como para evitar cualquier problema. Simplemente puedes crear un objeto. Y dentro de este objeto pones la variable de datos. Y luego pones y, y luego pones otros corchetes. Y dentro de esos corchetes puedes poner aquí la vista misma. Y cuando guardes más bonita, ahorraremos para todos ustedes o reformatearemos para ustedes ese código. Entonces haré lo mismo por los demás tipos de películas. Entonces podemos tener aquí el nombre de la película y también esos corchetes para que podamos ponerlo en todo. Entonces tendremos éste y también éste y también éste de aquí pondremos televisión popular. Si no hay TV popular entonces reservado. No muestres nada y pon la vista si hay TV popular. Lo mismo que haremos también para películas familiares, vistas y así aquí. Entonces, ¿por qué estoy haciendo esto? Estoy haciendo esto porque quiero evitar cualquier problema le puede pasar a mi aplicación como colgar o que no se esté mostrando ni nada. Por lo que necesitarás rodear tu aplicación siempre con los datos correctos, porque de lo contrario tendrás problemas. Siempre cuando vamos a aparecer para el usuario. Por lo que no se debe mostrar nada al usuario, usuario C, siempre la aplicación es estable sin ningún error inesperado. Por lo que siempre necesitas rodear el, cualquier problema esperado puede ocurrir en tu aplicación. Y tal vez te preguntes cómo puedo agregar comentarios en React Native. Por lo que si ves aquí, puedes agregar un comentario pulsando Control Slash. Por ejemplo, puedes poner aquí películas familiares como esta. Y luego pones Control Slash o comentario slash en el teclado. Y entonces será así. Por lo que será objeto y dentro de él un comentario. No se puede poner un comentario como este solo en React Native porque este es un comando no reconocido. Entonces para poner un comentario, hay que ponerlo de esta manera entre objetos. Por lo que también puedes decir que tenemos los comentarios, como para muchas películas o cualquier comentario para describir tus funciones de la manera correcta, pondré así los populares programas de televisión y otros comentarios que hacemos aquí. Entonces de esta manera, vamos a hacer también documentación para los desarrolladores. Por lo que también puedes poner comentarios para el desarrollador que describa qué es este método o qué está haciendo esta vista. Entonces de esa manera, no tendrás ningún tema de no entender tu código. Estamos entre los desarrolladores. Pero antes de pasar al siguiente paso, tal vez veas que ocurre un error en tu aplicación cuando establecemos todas esas condiciones, como aquí, como ves, tenemos aquí películas, imágenes, y todas esas condiciones. Y este error diciendo que la cadena de texto debe ser renderizada dentro de un componente de texto. Esto está sucediendo porque hemos inicializado nuestras variables de estado con un valor de cadena. Entonces de esa manera, cuando estás diciendo eso, vale, tengo una cadena, un valor de cadena vacío. Eso lo necesitábamos previamente porque queríamos inicializar nuestro estado. Entonces de esa manera, nos desplazamos o vemos, tendremos aquí una cadena, valor de cadena vacío, que no es posible renderizar porque debe tener una cadena dentro de un texto o un componente de texto. Entonces de esa manera, es mejor poner siempre todos estos estados iniciales como nada, como indefinidos o no. Por lo que de esta manera, su aplicación se cargará bien sin ninguna inicialización de cadenas. Por lo que evitarás ese error si lo ves. Entonces de esta manera, puedes renderizar como un objeto o valor indefinido inicialmente en el ScrollView, y luego se llenará de datos y luego el, nuestras vistas se renderizarán correctamente. Entonces solo cosa importante, asegúrate de que estás inicializando estados de cura con valores vacíos. Nada especial. Entonces tenemos aquí como por ejemplo, el error se inicializa fue falso. Está bien, eso está bien porque necesitamos al principio que no tengamos ningún error. Y luego ponemos el error a verdadero cuando tenemos como algún error. Pero aquí tenemos, estamos asumiendo que todas esas variables de estado son nulas o indefinidas al principio. Entonces de esa manera, tenemos ahora comentarios y documentación clara de mi código. Y además rodeé todo para no tener un error aquí. Por lo que esta es la refactorización más importante que podemos hacer para la aplicación de la página de inicio. En las próximas conferencias, veremos cómo agregar carga y cómo podemos agregar también el componente de error en caso de que haya algún problema en nuestra API de la aplicación. 36. Añade el giro de carga: Muy bien, Aquí estamos en una nueva sección. Vamos a ver cómo podemos implementar una navegación. Por qué necesitamos la navegación, esa navegación se requiere en el caso cuando quiero visitar alguna película, cuando quiero ir al detalle de la película. Por lo que cuando haga clic en esa película, navegaré a otra pantalla u otra página. Para que la navegación en React Native esté trabajando con alguna manera específica donde necesitamos alguna biblioteca externa, que se llama React native navigation. Y necesitamos instalar esta biblioteca para poder navegar múltiples pantallas en nuestra aplicación. Pero antes que nada, como ven aquí, tenemos un error que es, me olvidé de arreglar en la sección anterior, sólo decimos fallido tipo de prop contenido de prop inválido. El contenido de Europa miembro de la lista de contenidos viene como una matriz. Y dijimos aquí es un objeto. Entonces cuando la API o la página de inicio esté enviando a su lista una matriz y aquí hay un objeto, entonces obtendremos este error. Y también se puede ver el detalle de este error en la terminal. Como ven aquí. Por ejemplo, tengo aquí como tipo de prop relleno inválido tipo prop contenido de tipo array porque proporcioné aquí y array. Entonces es mejor cambiarlo también. No puedes tener una matriz de opciones o lista, por lo que puedes tener múltiples opciones de eso ajeno para mí. Lo pondré como una matriz. Y como verán, el error se ha ido y ya no lo tendremos. Entonces eso es y es un beneficio de escribir. Cuando los datos vienen en un tipo diferente al que especificas aquí, entonces notarás ese error. Y esto es una gran cosa sobre el prototipado. De acuerdo, vamos a nuestra navegación React. Cuando quieras ir e instalar esa navegación, necesitas visitar un sitio web que se llama React navigation.org. Y cuando vayas a este sitio web y vayas a la página de inicio, como ves aquí, verás algo llamado redox. Y necesitamos aquí para instalar esta biblioteca. Por lo que te aconsejo que siempre leas la documentación con mucho cuidado porque realmente a veces es complicado instalar la biblioteca de navegación, sobre todo con React Native. Y vamos a utilizar aquí React Native CLI, no exportar. Por lo que hay que tener en cuenta que está utilizando React Native CLI. Entonces ahora empecemos. Entonces, antes que nada, necesitas ver algunos místicos de ladrillo como por ejemplo, como aquí necesitas tener un React Native Express. Necesitas algún conocimiento en React cuyos reproches React Context. De acuerdo, no hay problema con eso. Empecemos a instalar la biblioteca. En primer lugar, necesitas ejecutar npm install React Native o reaccionar nativa de navegación. Por lo que entonces podrás instalar esta biblioteca. Vamos a nuestro Código Visual Studio e instalemos esta biblioteca. Voy a abrir la terminal como siempre como aprendimos anteriormente, y pegar aquí este comando. De acuerdo, Aquí se instaló la biblioteca y tengo mi instalación lista. Sigamos en la documentación. Tienes que leer la documentación con mucho cuidado. Entonces aquí dice que esta biblioteca instalará ahora nuestro manejador de gestos React Native, React Native, animadas en 3D React Native pantallas React Native Contextos de área segura nativos. Actúan máscara nativa a ver. Por lo que todos aquellos que necesitamos para instalarlos. Entonces aquí está diciendo que hay que instalar para diferentes CLI's. Uno de ellos es Expo y el otro es React Native. Y como estamos usando React Native CLI, vamos a copiar este comentario. Siempre tienes, a veces algo llamado Yarn. El hilo es exactamente igual a MPM. Puedes ir a la documentación de hilado y también puedes instalarlo y usar R1 o hilo en lugar de MPM. Entonces de esta manera, voy a copiar este comentario. Tienes aquí un botón de copia para que puedas copiarlo. Y entonces se instalarán todas esas bibliotecas que aquí se mencionan. Ahora, vamos de nuevo y tratemos de instalar esas librerías usando nuestra línea común. Y luego lo pegaré y esperaremos la instalación. De acuerdo, ahora la instalación se puso lista. Entonces tengo alguna advertencia aquí que está diciendo como MPM está disponible, actualización sobre NPM, su actualización de NodeJS. Por lo que siempre cuando necesites instalarlo, solo puedes ver cómo actualizarlo. Simplemente está ejecutando npm instalar un MPM global. Entonces cuando veas esta nota, significa que puedes actualizar a una versión más alta de NodeJS y también al sistema de administración de paquetes para que puedas actualizarla también. Entonces aquí se instalaron nuestras bibliotecas porque estamos usando React Native, necesitamos ejecutar algún comentario. Aquí. Dice que no es necesario ni de React Native 0.6 y superior. Al igual que el enlace es automático. A lo que quiere decir vinculando, vinculando React nativos a componentes iOS o componentes Android, que están en los proyectos que tenemos. Como podemos ver aquí. Se vinculan automáticamente como iOS y Android. Porque la instalación. De esas bibliotecas es ir a los Módulos Node y es necesario vincular los componentes y los componentes nativos que se instalan en iOS o Android o un módulo de nodo, es necesario vincularlos desde React Native 0.6 y superiores. No necesitas hacer eso como React Native link. Pero si tienes bajo o menor React Native, entonces necesitas ejecutar este comentario. Pero en mi caso, no lo necesito por ahora. Entonces está diciendo si estás en Mac y desarrollando para iOS, como mi caso aquí, como ves, estoy usando iOS, estoy usando Mac. Debe ejecutar este comando el cual se llama MAX pod install iOS. Entonces de esa manera, necesitas instalar otras bibliotecas, pero irán a donde van a las bibliotecas del proyecto iOS. Entonces de esta manera, voy a pegar este comentario aquí y ejecutarlo. Y luego después de la instalación de estas bibliotecas, debes saber que cualquier instalación de like por ejemplo, esos pod instalan, como vimos anteriormente, necesitas reiniciar el URI del proyecto para reiniciar también el simulador de iOS. Entonces en ese caso, nuestro proyecto no funcionará sólo cuando reiniciemos el proyecto. Entonces como vemos aquí, tenemos la terminal, por ejemplo aquí, esta, hay que cerrarla totalmente. Y luego en tu terminal, necesitas ejecutar el comentario que se llama React Native run iOS. Lo mismo va para Android. Por lo que también necesita reiniciar su proyecto nuevamente después de la instalación de algunas bibliotecas para no obtener un error como vemos aquí. Y en React Native está diciendo que finalice la instalación de React Native. Al igual que manejador de gestos, que es una biblioteca que se adjunta con aquellas bibliotecas que instaló. Añada lo siguiente. En la parte superior. El tope del archivo de entrada, que es ab.js o index.js. Entonces de esta manera, necesito usar esta importación y agregada a mi app.js. Entonces tenemos que ir aquí, y luego vamos a app.js. Y aquí necesito importar esta biblioteca. Y dijo que es mejor estar en la cima. Por lo que necesitamos poner eso en la parte superior de la lista de las importaciones. Entonces después de eso, estamos asegurándonos de que la biblioteca de la navegación funcione bien. Entonces aquí vemos cómo instalamos esta biblioteca. Siempre cuando hay algunas actualizaciones, siempre hay que seguir la documentación porque pueden surgir algunas actualizaciones, algunas actualizaciones tal vez cambiaremos o cambiará alguna forma de instalación. Por lo que es mejor seguir siempre la documentación en el momento de grabar este video. De esa manera es como te mostré. Entonces ahora vamos a hacer un ejemplo de la navegación, como veremos en la próxima conferencia. Pero recuerda, reinicia tu aplicación antes de iniciar la siguiente conferencia. 37. Añadir componentes de error: De acuerdo, en esta conferencia vamos a hacer un componente de error para mostrar como algún error aquí en caso de que los datos no se carguen de manera correcta. Por lo que podemos crear un componente como lo hicimos anteriormente. Por lo que iré a la carpeta de componentes y luego diré aquí error Node.js y este punto flecha JS usaré los fragmentos. Por lo que para generar un componente puro y generar componente puro a a, B, B, C, S y clase de componente puro de fin de semana para que podamos quitar esta parte de estado. Y como les dije anteriormente, necesitamos importar esto desde o extender esto desde reaccionar. Por lo que necesitamos importar también en este componente reaccionar. Entonces podemos hacer eso usando EMR. Entonces de esta manera tenemos React importado de React. Por lo que ahora nuestro componente está listo. Entonces para mí, como componente, crearía, por ejemplo, dos errores. Y esos errores, pueden ser como algo. Primera línea puede ser algo salió mal. Y el otro, podemos estar como asegurarnos de que estás en línea y reiniciar la app. Pero hacemos también estos componentes de alguna manera dinámicos, por lo que podemos dar valores por defecto para nuestros apoyos. En primer lugar, tengamos dos indicaciones. Y esas dos sondas, podemos darles nombres. Pueden ser, por ejemplo, podemos decir algo así como texto de error 1 y texto de error dos. Y esas dos indicaciones luego vuelven a obtener un nombre como texto de error 1 y texto de error también. Por lo que voy a poner aquí constante, como como un prompt va a ser error Text1 o texto de error. Podemos decir uno y textos de error a la línea dos. Y entonces tendrá este puntal punto. Y podemos hacer divs para esas indicaciones. Por lo que también podemos importar los tipos de una manera o derecha, los tipos que podemos dar aquí, tipos de prop y texto de error uno tendrá prop type una string porque van a ser sólo una cadena. Y error toma dos tendrán así como cadena. Entonces de esta manera tengo los tipos de prop, tengo también, las indicaciones para su componente. Por lo que a continuación podemos crear en la plantilla como alguna vista, y esta vista estará en medio de la aplicación. Por lo que necesitamos importar también el componente vista. Entonces tenemos aquí una vista, necesitamos importar, una vista de Reaccionar suelo nativo. Tenemos aquí vista y vendrá de React Native. Entonces de esta manera, tendremos la vista de la manera correcta. Y luego dentro de la vista tendré dos componentes de textos. Por lo que necesitamos importar también esos componentes de texto. Entonces tendré aquí texto, y luego llamaré aquí que el componente x. Por lo que tenemos aquí Text1 o como componente fijo primero uno. Y incluirá dentro de ella el, el, el componente o el error Text1. Entonces de esta manera tendremos texto de error uno en la primera línea y texto de error también en la segunda línea aquí. Entonces hagamos también un poco de estilo. Entonces definiré una constante, podemos llamarla estilos. Y estos estilos se importarán de hoja de estilo, que vamos a importar. Y esto tendrá método de creación. Y podemos crear método, definir la posibilidad de tener múltiples clases para nuestro estilo. Entonces vamos a importar la hoja de estilo también desde el componente React Native. Entonces tenemos aquí, el componente es importante. Tenemos crear y vamos a definir una clases también. Entonces hagamos como para el contenedor como siempre, podemos darle un estilo y este estilo se puede importar de estilos. Y podemos darle como lo llamamos contenedor, como cualquier clase siempre lo hacemos en la aplicación. Entonces este contenedor tendrá exactamente las mismas cosas que estamos definiendo siempre. Por lo que contenedor tendrá patas uno, justificar contenidos centro, alinear artículos, centro. También podemos darnos muriendo por estos como textos de error. Para que podamos darle tu estilo y este estilos tendrá como el nombre del texto. Podemos darle así. Y sucederá lo mismo para la segunda línea del componente adulto. Por lo que aquí tendremos otra clase que se llamará texto. Y este texto contendría como las propiedades que podemos dar el color. Podemos decir color. Aquí, podemos darle como negro o no podemos dar ningún color. Tomaría por defecto el color negro. Y podemos dar aquí font-weight para ser como audaz, para ser algo así como un grande, un poquito para que el usuario pueda leerlo. Y no olvidamos al final porque tenemos tipos de pronta, podemos decir eso también. Componente de error, este que creamos antes es tipos de apoyos del mismo son los tipos de prop que definí en esa parte superior. Entonces de esta manera, garantizo que este componente está leyendo esos tipos de prompts. Entonces de esa manera, nuestro componente está listo, podemos usarlo. Ahora, tengo que quitar este punto y coma. También. Aquí tengo un error que se llama tipos de apoyos. Necesito importar los tipos de prop, que hicimos también antes. Por lo que necesitamos importar el tipo de prop de tipos de prop. Por lo que de esta manera tendremos todos los ítems definidos y nuestro componente está listo para su uso. Entonces llegamos de nuevo a la página de inicio y podemos en la pantalla de inicio, fuiste este error como cuerpo estatal capaz de mostrar un error exactamente como lo hicimos con cargado. Entonces podemos definir también aquí si hay o hay error, como si no tenemos un error. Entonces si hay estado de error, y entonces se puede mostrar el componente que se llama error. Por lo que de esta manera necesitamos importar nuestro componente. Entonces tenemos aquí error. Y este error será como cerrado de inmediato porque es un solo tipo o una sola línea. No tiene ningún contenido. Por lo que necesitamos importar el error. Entonces vamos en la cima y luego vamos a nuestras importaciones. Podemos hacerlo aquí después de importar la lista. Entonces diré aquí Importar error de, y luego pondré mis componentes, y esos componentes serán uno de ellos error. Entonces de esa manera, he importado por componente de error. Ahora bien, bonito, tenemos todo está bien, pero no tenemos la capacidad de ver el mensaje de error aquí porque actualmente no tenemos ningún error, porque después de este error inicialmente tiene un falso. Entonces cuando hay un error en nuestra API, entonces podemos establecerlo en 0, no en absoluto qué hacer. Entonces de esa manera, también podemos eliminar este error. Podemos simplemente volver a poner una llamada así para no hacer una queja dormida. Y entonces tenemos el error de conjunto también. Entonces tenemos que decir que si lo hay, está cargado y no hay error. Por lo que también podemos agregar otro extremo para decir que si no hay error, entonces está bien, Mostrar para mí, la aplicación o la vista de desplazamiento, todo ello. Pero cuando hay un error, entonces muestra ese componente de error. Bonito. Entonces tenemos ahora aquí, si no hay error, así que volvamos la condición como lo hacemos siempre solo para probar. Entonces estoy recibiendo un error aquí porque creo que hay un error tipográfico. Entonces sé que es un prototipo, así que debemos tener un tipo de prop, tipos de cultivos. Por lo que hay que tener cuidado siempre con errores tipográficos para evitar como algunas flechas como esta. Entonces vamos a ahorrar. De acuerdo, ahora tenemos una página vacía. Entonces esta página vacía, porque no tenemos ningún valor, no tenemos ninguna entrada o parámetro para este error porque tenemos apoyos aquí y esos no tienen ningún valor. Por lo que de esta manera podemos establecer unos valores por defecto para esos errores. Entonces de la misma manera como lo hicimos con los tipos de accesorios, podemos establecer también los valores por defecto. Entonces esos valores por defecto, podemos definirlos de la misma manera como tenemos tipos abruptos. Por lo que podemos definir una constante, lo llamamos un puntales y error por defecto. Text1 tendrá como orbes, algo salió mal. El error en x2 tendrá también esta frase. Y entonces podemos usar de la misma manera como lo hicimos con los tipos de prop de error. Podemos decir Error dot valores por defecto. Por lo que en los apoyos por defecto. Por lo que de esa manera, los puertos predeterminados se asignarán exactamente de la misma manera en que se les nombra. Por lo que el nombre error text1 tendrá este valor y error toma dos tendrá este valor. Cuando ahorremos, veremos que tenemos Ops. Todo salió, algo salió mal. Entonces volvamos atrás esas condiciones. Entonces cuando hay error, muéstrame este mensaje de error. Cuando no hay error, entonces muéstrame las películas cargando y la aplicación de películas o la lista de películas que tenemos aquí. 38. Instalación de la navegación nativa de React Nativo: Muy bien, Aquí estamos en una nueva sección. Vamos a ver cómo podemos implementar una navegación. Por qué necesitamos la navegación, esa navegación se requiere en el caso cuando quiero visitar alguna película, cuando quiero ir al detalle de la película. Por lo que cuando haga clic en esa película, navegaré a otra pantalla u otra página. Para que la navegación en React Native esté trabajando con alguna manera específica donde necesitamos alguna biblioteca externa, que se llama React native navigation. Y necesitamos instalar esta biblioteca para poder navegar múltiples pantallas en nuestra aplicación. Pero antes que nada, como ven aquí, tenemos un error que es, me olvidé de arreglar en la sección anterior, sólo decimos fallido tipo de prop contenido de prop inválido. El contenido de Europa miembro de la lista de contenidos viene como una matriz. Y dijimos aquí es un objeto. Entonces cuando la API o la página de inicio esté enviando a su lista una matriz y aquí hay un objeto, entonces obtendremos este error. Y también se puede ver el detalle de este error en la terminal. Como ven aquí. Por ejemplo, tengo aquí como tipo de prop relleno inválido tipo prop contenido de tipo array porque proporcioné aquí y array. Entonces es mejor cambiarlo también. No puedes tener una matriz de opciones o lista, por lo que puedes tener múltiples opciones de eso ajeno para mí. Lo pondré como una matriz. Y como verán, el error se ha ido y ya no lo tendremos. Entonces eso es y es un beneficio de mecanografiar. Cuando los datos vienen en un tipo diferente al que especificas aquí, entonces notarás ese error. Y esto es una gran cosa sobre el prototipado. De acuerdo, vamos a nuestra navegación React. Cuando quieras ir e instalar esa navegación, necesitas visitar un sitio web que se llama React navigation.org. Y cuando vayas a este sitio web y vayas a la página de inicio, como ves aquí, verás algo llamado redox. Y necesitamos aquí para instalar esta biblioteca. Por lo que te aconsejo que siempre leas la documentación con mucho cuidado porque realmente a veces es complicado instalar la biblioteca de navegación, sobre todo con React Native. Y vamos a utilizar aquí React Native CLI, no exportar. Por lo que hay que tener en cuenta que está utilizando React Native CLI. Entonces ahora empecemos. Entonces, antes que nada, necesitas ver algunos místicos de ladrillo como por ejemplo, como aquí necesitas tener un React Native Express. Necesitas algún conocimiento en React cuyos reproches React Context. De acuerdo, no hay problema con eso. Empecemos a instalar la biblioteca. En primer lugar, necesitas ejecutar npm install React Native o reaccionar nativa de navegación. Por lo que entonces podrás instalar esta biblioteca. Vamos a nuestro Código Visual Studio e instalemos esta biblioteca. Voy a abrir la terminal como siempre como aprendimos anteriormente, y pegar aquí este comando. De acuerdo, Aquí se instaló la biblioteca y tengo mi instalación lista. Sigamos en la documentación. Tienes que leer la documentación con mucho cuidado. Entonces aquí dice que esta biblioteca instalará ahora nuestro manejador de gestos React Native, React Native, animadas en 3D React Native pantallas React Native Contextos de área segura nativos. Actúan máscara nativa a ver. Por lo que todos aquellos que necesitamos para instalarlos. Entonces aquí está diciendo que hay que instalar para diferentes CLI's. Uno de ellos es Expo y el otro es React Native. Y como estamos usando React Native CLI, vamos a copiar este comentario. Siempre tienes, a veces algo llamado Yarn. El hilo es exactamente igual a MPM. Puedes ir a la documentación de hilado y también puedes instalarlo y usar R1 o hilo en lugar de MPM. Entonces de esta manera, voy a copiar este comentario. Tienes aquí un botón de copia para que puedas copiarlo. Y entonces se instalarán todas esas bibliotecas que aquí se mencionan. Ahora, vamos de nuevo y tratemos de instalar esas librerías usando nuestra línea común. Y luego lo pegaré y esperaremos la instalación. De acuerdo, ahora la instalación se puso lista. Entonces tengo alguna advertencia aquí que está diciendo como MPM está disponible, actualización sobre NPM, su actualización de NodeJS. Por lo que siempre cuando necesites instalarlo, solo puedes ver cómo actualizarlo. Simplemente está ejecutando npm instalar un MPM global. Entonces cuando veas esta nota, significa que puedes actualizar a una versión más alta de NodeJS y también al sistema de administración de paquetes para que puedas actualizarla también. Entonces aquí se instalaron nuestras bibliotecas porque estamos usando React Native, necesitamos ejecutar algún comentario. Aquí. Dice que no es necesario ni de React Native 0.6 y superior. Al igual que el enlace es automático. A lo que quiere decir vinculando, vinculando React nativos a componentes iOS o componentes Android, que están en los proyectos que tenemos. Al igual que podemos ver aquí. Se vinculan automáticamente como iOS y Android. Porque la instalación. De esas bibliotecas es ir a los Módulos Node y es necesario vincular los componentes y los componentes nativos que se instalan en iOS o Android o un módulo de nodo, es necesario vincularlos desde React Native 0.6 y superiores. No necesitas hacer eso como React Native link. Pero si tienes bajo o menor React Native, entonces necesitas ejecutar este comentario. Pero en mi caso, no lo necesito por ahora. Entonces está diciendo si estás en Mac y desarrollando para iOS, como mi caso aquí, como ves, estoy usando iOS, estoy usando Mac. Debe ejecutar este comando el cual se llama MAX pod install iOS. Entonces de esa manera, necesitas instalar otras bibliotecas, pero irán a donde van a las bibliotecas del proyecto iOS. Entonces de esta manera, voy a pegar este comentario aquí y ejecutarlo. Y luego después de la instalación de estas bibliotecas, debes saber que cualquier instalación de like por ejemplo, esos pod instalan, como vimos anteriormente, necesitas reiniciar el URI del proyecto para reiniciar también el simulador de iOS. Entonces en ese caso, nuestro proyecto no funcionará sólo cuando reiniciemos el proyecto. Entonces como vemos aquí, tenemos la terminal, por ejemplo aquí, esta, hay que cerrarla totalmente. Y luego en tu terminal, necesitas ejecutar el comentario que se llama React Native run iOS. Lo mismo va para Android. Por lo que también necesita reiniciar su proyecto nuevamente después de la instalación de algunas bibliotecas para no obtener un error como vemos aquí. Y en React Native está diciendo que finalice la instalación de React Native. Al igual que manejador de gestos, que es una biblioteca que se adjunta con aquellas bibliotecas que instaló. Añada lo siguiente. En la parte superior. El tope del archivo de entrada, que es ab.js o index.js. Entonces de esta manera, necesito usar esta importación y agregada a mi app.js. Entonces tenemos que ir aquí, y luego vamos a app.js. Y aquí necesito importar esta biblioteca. Y dijo que es mejor estar en la cima. Por lo que necesitamos poner eso en la parte superior de la lista de las importaciones. Entonces después de eso, estamos asegurándonos de que la biblioteca de la navegación funcione bien. Entonces aquí vemos cómo instalamos esta biblioteca. Siempre cuando hay algunas actualizaciones, siempre hay que seguir la documentación porque pueden surgir algunas actualizaciones, algunas actualizaciones tal vez cambiaremos o cambiará alguna forma de instalación. Por lo que es mejor seguir siempre la documentación en el momento de grabar este video. De esa manera es como te mostré. Entonces ahora vamos a hacer un ejemplo de la navegación, como veremos en la próxima conferencia. Pero recuerda, reinicia tu aplicación antes de iniciar la siguiente conferencia. 39. Crear un navegador de pila: De acuerdo, hasta ahora no hemos terminado con la navegación hasta ahora no podemos navegar a otra página o al detalle de la película. Entonces sigamos en la documentación de React, Native, y navigation. Al final, cuando hemos hecho toda la información de la primera página, hay algo continuar a Hello React navigation. Aquí nos dará un ejemplo de cómo podemos pasar a otra página de aplicación React. Entonces de esta manera, necesitas instalar algo llamado biblioteca de stack navigator. Y instalar esta biblioteca es solo usar un comentario MPM, instalar, Reaccionar navegación, y luego apilar. Entonces voy por la documentación rápido. Por supuesto que tendrás tiempo para leerlo y además, necesitas saber más información sobre este navegador de pila doc navigator en realidad es como algo así como está sosteniendo mis viejas páginas donde voy a navegar. Entonces de esta manera, tendré la página de inicio, tendré el detalle. Tendré su página de búsqueda. Tendré todas las demás páginas que quiero mostrar en mi aplicación. Por lo que de esta manera, necesitamos instalar MPM, React nativa navigation stack. Entonces volvamos al código y luego peguemos este comentario. Y me va a instalar esta biblioteca. Entonces después de eso, usando esta biblioteca, veremos un ejemplo proporcionado por React Native Navigator. Por lo que tenemos que crear un navegador de pila, creando una pila ahora Vd navigator se proporciona en este ejemplo. Entonces, por ejemplo, tenemos que crear un componente. A este componente lo vamos a llamar en algo llamado contenedor de navegación. Y en este contenedor de navegación, tendré un navegador de pila. Y por cada página de la aplicación, tendré una pantalla de pila. Por lo que de esta manera, tendré pantalla de inicio. Tendré así pantalla detallada y tendré la pantalla de búsqueda. Entonces hagámoslo exactamente de la misma manera como lo ha hecho. Entonces, en primer lugar, necesitamos importar dos cosas. Uno de ellos es crear pila Navigator. Entonces voy a importar este método el cual se llama Create Stack navigator. Y además, podría definir una constante que se llama pila. Y a este DAG, llamó a esta función que importamos aquí. Entonces hagamos lo mismo en app.js. Entonces cerremos la terminal. Y entonces diremos aquí importar, Reaccionar o crear stack navigator. Y vamos a definir nuestra constante que se llama pila. Entonces volvemos de nuevo al código y luego definimos esta constante aquí. Entonces después de eso, dentro de esta vista, no tendrás esta vista. No vamos a llamar a casa. Estamos poniendo este componente de casa en la pila. Cómo podemos hacer eso. Entonces primero tenemos que decir o contenedor de navegación. Porque contenedor de navegación, como ves aquí, es un componente que gestiona tu, nuestro árbol de navegación y contiene el estado de navegación. Este componente debe envolver toda la estructura del navegador. Por lo general, renderizaríamos este componente en la raíz de nuestra aplicación, que suele ser componente o exportado desde app.js. Entonces hagamos lo mismo para no salir de la documentación. Entonces voy a tener un contenedor de navegación y luego apilar navegador, y luego llamaré a ese componente para que podamos copiar toda esta parte y luego ir a nuestra aplicación. Quitamos toda esta vista o pongámosla como cerca de ella para ver qué podemos copiar de nuevo. Por lo que tengo contenedor de navegación, necesitamos importarlo también. Por lo que volveré a importar. Entonces vamos aquí y decimos que necesitamos importar el contenedor de navegación. Y luego tenemos el navegador de puntos de pila. Exactamente. Esta pila tiene un método que se llama o tiene un componente que se llama Navigator. Y esta pila Navigator tiene también un componente que se llama pantalla. Por lo que podemos llegar a esos componentes usando este operador, que es punto normalmente. Entonces podemos decir un nombre para ese componente. Por ejemplo, pobreza que navegación, y luego especificamos el componente al que vamos a navegar. Entonces en nuestro caso, se llama hogar. Ya hemos importado el componente de casa, así que puedo poner aquí a casa. Y entonces vamos a sentarnos más esta vista que teníamos anteriormente aquí. Y luego guardamos nuestra aplicación e iremos al simulador y veremos qué está pasando. Entonces ahora nosotros, como ven que no tenemos ningún problema en nuestra aplicación. Y en la parte superior, veremos que tenemos algún área guardada, como antes la aplicación estaba llena en la pantalla. Entonces voy a tener un control que rápidamente, sólo para mostrarte, ves que nuestra aplicación es caída completa en la pantalla por lo que a veces no puedes leer toda esa información son múltiples formas. Por lo que el navegador está usando algo llamado Guardar navegación de área o pantalla de área segura. Entonces de esa manera, puedes garantizar que tu navegante esté trabajando de una manera que para salvar toda esta zona no se vaya a mover ni a la parte superior, a la forma. Tendrá como algún espacio aquí. Entonces voy a volver a poner ese código. Y como ven, tenemos aquí esta zona segura. Por lo que veremos más adelante cómo podemos quitar todas esas propiedades. Al igual que por ejemplo, podemos quitar como este nombre que se llama hogar. También podemos hacer algunas otras opciones como veremos más adelante. Entonces ahora eliminemos esta importación de esta vista para que ya no la necesitemos. Y hemos importado todas estas cosas. Y nuestro navegante de esa manera está funcionando perfecto. Cuando recibas algunos errores, asegúrate de que iniciaste tu aplicación como te dije anteriormente. Por lo que necesitas terminar la terminal y luego la cláusula totalmente y luego volver a ejecutar la aplicación usando el comando run iOS, como vimos anteriormente. 40. Ve a la componente de detalles de películas: De acuerdo, entonces en esta conferencia vamos a añadir una nueva pantalla, que será la cola de la película. Entonces cuando hago clic aquí, debo navegar hasta el detalle de las películas o un nuevo componente que se llama detalles. Entonces aquí si recuerdas en la pila Navigator, hemos creado múltiples pantallas y una de ellas es casa. Entonces de esta manera también podemos agregar la página de detalles para que podamos ir aquí y decir que quiero aquí detalles. Podemos darle como un IM, como un detalle. Y también el componente se llamará detalle. Entonces vamos a crear el componente de detalle. Iré a la carpeta de pantallas y luego crearé un archivo. Voy a llamar a este detalle de expediente. Y en este detalle, vamos a crear un componente. Si recuerdas, no hemos creado el componente de la página de inicio usando los fragmentos, y haremos lo mismo con el detalle. Entonces si recuerdas, tenemos ese comentario que se llama F, son componentes apátridas devuelven. Y de esta manera tendremos esta const y luego tendremos el detalle. Y por supuesto tendremos la otra información que necesitamos. Y vamos a importar también, reaccionan. Por lo que voy a decir aquí están sus tres actos de React. Y entonces usaremos aquí el fragmento si recuerdas. Por lo que voy a poner aquí un componente. Diré Reaccionar fragmento de punto. Y dentro de este fragmento podemos colocar algún texto, todos ustedes, solo para decir que este es el detalle de la película para que podamos ver cómo podemos navegar hasta él. Entonces diré aquí como un texto. Y este componente de texto contendrá, por ejemplo, algo así como decir, detalle de película, así como eso. Por lo que de esa manera, podremos ver la página detallada de la película cuando queramos navegar a ella. Y además no olvides importar el componente de texto desde React Native. Entonces vamos a guardar este componente y vamos a ir a nuestro app.js y necesitamos importar los componentes detallados. Entonces aquí tenemos que hacer una importación y luego detalle desde. Y luego ponemos las pantallas exactamente como lo hicimos con el componente home para que así podamos obtener el detalle. Entonces de esa manera, llamamos al componente de bolas. Está bien, bien. Todo está funcionando bien. No obtuvimos ningún error hasta ahora, por lo que podemos continuar con ello y documentación de la biblioteca. Y si recuerdas, hemos agregado como una pantalla y vamos a sumar otra, que ya agregamos. Entonces hay algo de inflamación que tal vez sea interesante para ti, como configurar el navegador. Configurar el Navigator viene siempre como con alguna configuración extra que desea agregar al navegador. Por ejemplo, dice, como podemos agregar algo llamado Opciones. Y luego en esta opción se puede especificar un título de esta navegación. Por lo que ese título se mostrará aquí en la parte superior. Entonces de esa manera puedes tener como algunas opciones extra. Pero sigamos más. Al igual que volveremos a este paso apoyos adicionales más adelante. Pero primero necesitamos ver cómo podemos navegar entre las pantallas. Por lo que quiero pasar a otra sección que se llama mover entre pantallas. Entonces aquí tenemos también algo como exactamente como HTML. Quiero tener un enlace y presiono sobre él, y luego iré a la página de detalles. Pero es exactamente cómo se hace con HTML. Lo haremos con React Native. Entonces necesitamos un botón, necesitamos un evento. Nosotros, cuando necesitamos que el usuario haga clic en algo para ir al detalle de la película. En nuestro caso aquí tenemos pinchando en esos botones o podemos decir pinchando en esas tarjetas. Si recuerdas, este componente llamado tarjeta, y hemos creado esta tarjeta como una opacidad tocable, si recuerdas. Por lo que necesitamos utilizar también el componente que se llama opacidad tocable. Tenemos que añadir la función de compresa. Entonces tenemos aquí en prensa y luego hay que pasar algunos parámetros. Vayamos a nuestra tarjeta y luego veremos cómo podemos hacer eso. Tan custodiado dot js, si recuerdas, usamos algo llamado opacidad tocable. Entonces vayamos a este componente en biblioteca de componentes y veremos cómo podemos usar esta opacidad tocable en la documentación. Como ven, tenemos algún método el cual se llama a presionar sobre prensa para opacidad tocable. Por lo que podemos utilizar el mismo método o la misma propiedad para especificar un método exactamente como lo ha hecho en la documentación de la navegación al usar un botón. Entonces agreguemos esta función a nuestra guardia. Volveré al código y veré aquí que tengo opacidad tocable. Y luego tenemos compresa y tenemos sobre método de prensa y método de comprimir. Todavía no está definido. Vamos a definirlo exactamente cómo se define en el camino en la biblioteca de navegación. Por lo que tendrías él en mama y luego será una función de llamada de flecha función. Y dijo navegación, navegación puntos y detalles. Entonces de esa manera, necesito especificar en su tarjeta que necesito navegar por la navegación. Para navegar a la página de detalles. Está bien. Y de qué viene esta navegación, de donde viene de aquí, pantalla de inicio, necesitas usar algo variable de estado, que se llama navegación, y está dentro de un objeto. Y luego necesitas definir una navegación y puedes usarla dentro. Entonces de esta manera, el componente de escolaridad domiciliaria sabe que tiene alguna propiedad llamada navegación. Y esta navegación me ayudará a navegar a otra pantalla. Entonces es exactamente como algo, un enlace, digo, vale, en esta pantalla de inicio tengo unos enlaces. Y en estos enlaces quiero enlazar o ir a otra página que se llama detalles. Entonces hagámoslo de la misma manera. Pero aquí no estamos en la pantalla de inicio como ven, estamos en una tarjeta, en un componente. Entonces, en primer lugar, vayamos a nuestra pantalla de inicio y luego añadamos este objeto, que se llama como dentro de él, lo llamamos navegación. Y esta navegación, lo voy a pasar como un accesorio a componente de tarjeta. Es muy importante porque necesitamos pasar esta función que no puedes hacer con aquí como directamente. De lo contrario se moverá en que tiene fuera de este DAG del árbol de navegación. Por lo que el árbol de navegación debe ser consistente, debe especificarse. Por lo que necesito ir desde la pantalla de inicio. Utilizo la misma referencia de navegación o la misma navegación tres. Por lo que quiero pasar este árbol de navegación a mi tarjeta. Por lo que volveré a ir aquí a mi tarjeta. No tengo aquí tarjetas porque tengo una lista y lista contienen múltiples cartas como recuerdas. Entonces aquí necesito pasar también esa navegación como prop. Por lo que voy a definir un prop, llamarlo navegación en ese componente de lista. Por lo que voy a ir aquí al componente de lista. Tendría múltiples apoyos y uno de esos prompts también se llamará navegación. Entonces aquí ¿Cómo verás que estamos pasando el árbol de navegación? Por lo que pasando el árbol de navegación desde la pantalla de inicio a los niños y componente para usar la misma referencia. De lo contrario, saldremos de Navegación 3 y nos causará algunos problemas. Entonces tengo aquí ese componente de tarjeta al que llamé previamente como ven aquí. Y luego este componente de guardia también. Tendremos una propiedad que se llama navegación. Por lo que necesitamos ir a su componente de tarjeta. Y en los apoyos, voy a añadir la prop de navegación. Y de esa manera, cuando tengo aquí el método que quiero hacer sobre la prensa sobre la opacidad tocable. Puedo usar la navegación exactamente de la misma manera como se hace aquí. Entonces recuerda, los tres deben ser consistentes. Entonces es exactamente la forma de mantener la oscuridad de la navegación. De acuerdo, vamos a copiar este método ahora y vamos a nuestro componente de tarjeta. En lugar de estos on-premise, podemos definir el método de esa manera. Entonces tenemos aquí ese método de navegación, que he usado como referencia, luego navegar a la cola. Aquí no tenemos detalles. Contamos con un componente de detalle. ¿ Por qué tengo detalle? Porque en la pila he definido un componente que se llama o navegación de pantalla, que se llama detalle. Entonces tenemos aquí detalles, pero también necesitamos definirlo como detalle. Por lo que el nombre aquí debe ser el mismo nombre de la navegación a la que vas a navegar. Entonces tengo aquí detalle, entonces debo tener en su carrito también un detalle. Entonces, vamos a guardar eso. Guardemos esa lista. Eso es hogar seguro y guardar todo. Y luego vamos a la aplicación. Y en la aplicación ahora tengo todas las películas. No tengo ningún error. Entonces cuando hago clic en uno de ellos, está bien, Dice que indefinido no es un objeto. Esto sucedió porque hice clic en algo que aún no está indefinido. Para que podamos tener, aquí tenemos algo así como en la pantalla de inicio, tenemos múltiples listas. Si recuerdas, pasé la navegación sólo para su primera lista. Por lo que necesitamos pasarlo a cada lista de la biblioteca o en los componentes de la página de inicio. Por lo que tenemos lista, lista, listas múltiples. Lo guardamos todo. Ahora voy a esta lista, está bien, Vemos que nos trasladamos a un detalle de película. Por lo que de esa manera, podré navegar a otra página usando como esta herramienta de navegación. Y ahora tenemos la navegación de ese detalle. Lo que necesitamos ahora es solo darle estilo a este detalle de película y poner un detalle de película real del componente de la película. Y necesitaremos ver cómo podemos pasar los datos de componente clicado o click movie. Entonces hice clic en esta película, entonces quiero ver el detalle de esta película también. Entonces de esa manera, necesitamos enviar también algunos datos extra con la navegación, como veremos en la próxima conferencia. Entonces como recapitulación, hemos empezado desde esta baraja. Por lo que lo recapitularé como ahora rápidamente. Tenemos que apilar pantallas. Entonces tenemos uno es casa, uno es detalle. Y con los detalles, tenemos que hacer algo, así que necesitamos navegar a él de alguna manera. Por lo que en nuestra aplicación tenemos una pantalla de inicio Inicio es será ésta. Por lo que en mi caso, quiero dar click en una de esas tarjetas. Y esta tarjeta es componente que creé antes. Por lo que voy a ir a este componente de tarjeta y voy a decir que el punto de navegación navega al detalle. Pero en este caso, tenemos un problema de donde obtendría esta navegación. Hicimos la navegación como prop porque necesitamos pasar la navegación, no directamente cómo la tenemos aquí en la pantalla de inicio y en la documentación? No, porque nosotros cuando queremos mantener su pila. Por lo que creé un prop llamarlo navegación. Y luego esto desde la pantalla de inicio usando el mismo método cómo lo hizo exactamente. Entonces en el propio componente, definí la navegación y luego la navegación. Esta variable vamos a llamarla, se pasa a la lista porque no tengo acceso a su auto directamente aquí. Por lo que estoy enviando a su lista. Y dentro de la lista, defino una propiedad que se llama navegación. Y en su navegación están en la propia lista. Tengo una tarjeta, y esta tarjeta tiene también propiedad es navegación. Entonces estoy usando exactamente el mismo árbol de navegación. Tienes que tener cuidado con la cosa. Entonces de esa manera, no perderás las referencias porque a veces vamos a añadir como ir a la pantalla de inicio, ir a la parte superior, o quitar el árbol de navegación. Entonces esto es muy importante para ti. En nuestro caso, tenemos solo películas detalle. Vamos a navegar a ella y ver el detalle de la película. 41. Descripción de detalles de película: De acuerdo, lo que vamos a hacer en este apartado, veremos el detalle de las películas. Si recuerdas, tengo una demo ejecutándose en mi aplicación o en mi simulador de Android, y estoy usando el simulador de iOS. Pero ahora si quieres verte ahí detalle de película como lo que vamos a hacer en el futuro o en esta sección. Entonces cuando corra aquí o cuando haga clic en una de las películas, voy a ver como una imagen de la película. Voy a ver aquí alguna URL como para volver atrás. Y entonces tendré un botón de reproducción. Y también como el título y lo que Jenner, esta película pertenece o a qué categoría. Y además tendremos alguna calificación y además, tendremos alguna descripción y fecha de lanzamiento. Toda esa información provendrá de la API de nuestras películas. Entonces de esa manera, necesito pasar esos datos de su película clicada al componente de detalle de la película como hablamos anteriormente. Entonces empecemos a trabajar con esto, y espero que disfruten de esta sección. 42. Pasar los datos seleccionados a los datos de la película a los componentes detallados: De acuerdo, volviendo a nuestro proyecto, si recuerdas, paramos al final cuando intentábamos navegar a nuestro detalle de película, pero aún no tenemos los datos. Por lo que quiero obtener los datos de la película cliqueada. Cuando hago clic en esta película, quiero ver en eso también. Por lo que podemos ir aquí y así podemos leer la documentación de React navigation. Por lo que después de movernos entre pantallas, tenemos algo llamado pasar parámetros a las rutas. Entonces pasando parámetros a la ruta, como quiero pasar la película en la que hice clic en la página de inicio y luego enviarla al componente de detalle de película. Entonces de esa manera, podré leer esos datos. Pasar parámetro es muy, muy fácil con la navegación nativa React. Entonces solo vas aquí y puedes ir al on-prem, como cuando creamos el on-premise en nuestra guardia, paso también algunos datos como segundo parámetro de ese método, que hablamos, que se llama navegar. Entonces, en realidad, cuando voy a mi aplicación y voy al componente guardia, por ejemplo, vamos aquí, componente guardia y aquí hemos definido el evento click o evento de compresión. Entonces aquí, después de especificar el componente donde voy a navegar también al campus. Puedo pasar también algunos datos extra. Esos datos pueden ser el ítem o la película que estoy enviando para navegar a esa página. Entonces de esta manera, puedo dar un nombre por nuestro detalle. Puedo llamarlo detalle de película por ejemplo. Por lo que podemos decir detalle de película aquí. Y el valor del detalle de la película será el artículo en sí, el artículo o la película que se pasa al detalle de la película o a su propio carrito. Ahora estamos bien. Tenemos nuestro componente de tarjeta y hemos pasado por la navegación los datos, así que está bien. En detalle componente, cómo podemos leer esos datos. esta manera se menciona la lectura de los datos en la documentación. Entonces vas a la pantalla de detalles que hemos creado, y luego pasas ruta y la navegación porque tenemos aquí ese componente de detalle como verde en la pila. Entonces de esa manera, no puedo decir que pueda usar una ruta. Y también la ruta de navegación es algo en ti donde vamos a conseguir los parámetros. Y como ves, definió una constante. Es exactamente como lo definió aquí. Por lo que ha pasado Item ID y también otros params. Y luego los recibió exactamente con los mismos nombres en los fondos de ruta. De esa manera, puedo leer también los fondos de detalle de película y luego asignarlos a alguna variable o a una constante y leer esas variables o estas copias de seguridad. Entonces vamos a nuestro componente detallado. Y luego en el componente detallado, como vimos anteriormente, necesitamos pasar ruta. Y así la navegación, exactamente cómo se define o cómo se muestra ahí. Entonces, y entonces podemos definir una constante, y llamamos a esta constante como detalle de película. Entonces de esa manera, podemos decir que la película b del es route dot params. Y el nombre del componente o del objeto que he definido aquí, donde está sosteniendo el detalle de la película. Entonces de esta manera, fui un detalle de película. Por lo que aquí tendré RouteParams punto más detalle. Entonces de esa manera, estoy sosteniendo el detalle de la película en esta constante que aquí he definido. Entonces de esa manera, puedo ver también cuanto más renombrar en el que hice clic. Entonces cuando hago clic en esta película, quiero ver el nombre de esa película. Entonces de esta manera, podemos quitar esta parte y decir como detalle de película punto. Si recuerdas el campo para el que está sosteniendo el nombre de la película , lo hemos llamado, o está en la API llamada título. De esa manera, cuando haga clic en esta película, voy a ver que el título de esa película en la que hice clic. Entonces aquí tenemos múltiples películas y por ejemplo, tengo películas familiares. Se trata de Luka, otra RIAA, y múltiples películas. Y es dinámico para mí. Entonces de esa manera, estoy pasando todos los datos dentro de mi componente de la tarjeta en la que hice clic. Por lo que la película vino de como un artículo, como un apuntalamiento a este guardia y luego se les pasa detalle de película. Y luego en el detalle, leí esos datos y me robaron aquí. 43. Servicio al detalle de película: De acuerdo, ahora en esta conferencia vamos a utilizar el servicio de detalle de película. Vale, tal vez me vas a decir por qué tienes que crear un servicio de detalle de película. Por qué necesitas volver a agarrar los datos de la película, cuando ya tienes los datos definidos en el detalle de la película. Por supuesto, la API como ves aquí en nuestra película DBAPI. De acuerdo, tenemos suerte de que lo estamos consiguiendo cuando obtenemos lista de las películas, por ejemplo, las películas populares, Estamos consiguiendo todas las películas de alguna manera de esta manera. Por lo que nos metemos en los resultados, cuanto más refuerzamos y adulto y género id vio de esta manera, se nos puede saber que tenemos suficientes datos. Pero si revisamos el detalle de la película, si vamos aquí para allá, obtenemos detalles y veremos más v, y luego conseguiremos ese detalle de la película. Si vamos a ello, veremos que tenemos más detalles. No tenemos sólo géneros como. Tenemos DNI y el nombre del periodista. Entonces podemos, de esta manera que podamos conseguir toda la, por ejemplo, información en detalle, no sólo identificaciones. Por lo que en primer lugar, iría a mis servicios y luego crearía un nuevo servicio el cual se llamará get movie. Por lo que sólo necesitamos conseguir detalle de película. Entonces de esa manera, copiaremos una de esas API o esos servicios y le cambiaremos el nombre. Diremos conseguir película. Aquí, pasaremos el DNI de la película. Tenemos que pasar ID porque como ven aquí, nuestra API ¿ está adquiriendo un DNI? Entonces para conseguir una película, necesito conseguir también la identificación de la misma. Entonces de esta manera podemos tener la misma API. Entonces pondré éste como aquí. Podemos tener una película de slash y luego nos deshacemos de todo esto. Y sólo tendremos así. Por lo que tendremos API URL, la película de slash de URL básica, y luego la clave API. Y no necesitamos estos con géneros. Entonces de esa manera, podemos ahorrar y tendremos listo nuestro servicio. Pero los datos, no será con los resultados porque si lo comprobamos, esa respuesta aquí, dice que nos dará directamente un objeto que contiene todos los datos. Por lo que iré de nuevo, tomé mi servicio y diré volver directamente, es decir datos de puntos de estanques. También, si los conoces en mi API, como ves aquí, que tenemos que pasar el ID de película. Entonces si voy aquí al detalle de la película, obtengo detalles, tengo que pasar por el ID de película en la URL o en la API. Entonces de esta manera, no es suficiente tenerlo así. Tenemos que pasar también el DNI. Entonces de esa manera podemos tener aquí este método, y entonces puedo decir aquí slash. Y luego ponemos otro parámetro u otro parámetro definido, que será la idea que estoy pasando aquí. De acuerdo, exactamente como lo hicimos antes con la página de inicio, más todos obtenemos lista de películas, si recuerdas, hemos llamado a ese estado y luego dijimos el estado de usuario y luego usamos efecto. Y entonces estábamos consiguiendo su servicio y luego estableciendo el resultado de ese servicio dentro de mi constante o las constantes estatales. Entonces haremos lo mismo. En primer lugar, llamaré como una constante detallada. Aquí lo definiré. Por lo que podemos tener aquí constante que se llama detalle, y luego tendrá un conjunto detallado también. Y habrá utilizado un estado. Por lo que necesitamos también importar el estado del usuario. Entonces ahora después de eso, ya no necesitamos este detalle de película, pero vamos a necesitar el parámetro es porque voy a tener el ID de la película. Podemos decir como en eso LO ponerlo arriba en la parte superior y podemos decir ID de película. Y luego podemos pasar en el detalle de la película también punto ID. Porque si recuerdas, tenemos en nuestros parámetros, por lo que podemos ir a nuestra API, que fue, por ejemplo, se hace popular. Y se hicieron populares. Tenemos en esa respuesta ID, estamos obteniendo ID de cada película en la que estamos dando click en ese guardia, no sólo su nombre o su Dido, podemos tener la identificación también. Entonces después de eso, también podemos usar este ID de película para obtener los datos de esa película en detalle utilizando nuestro servicio. Entonces de esa manera necesitamos usar también un efecto. Entonces decimos efecto de uso y este enorme efecto también, vamos a importarlo de reaccionar. A veces se está incorporando automáticamente. No necesitas hacer eso. Por lo que solo necesitas arreglar la importación automáticamente para que puedas tener como importación más consistente. Entonces use efecto. Tiene una función de devolución de llamada y esta función de devolución de llamada contendrá para mí esa capacidad de establecer o establecer los valores constantes o las variables de estado con el resultado de ese sedimento. Entonces como hicimos en casa, si recuerdas, estábamos obteniendo esos datos entonces y luego estábamos configurando los datos. Entonces de esa manera, necesito importar mi servicio que he creado antes. Por lo que voy a decir conseguir película y luego voy a importar esto. Servicio, diré aquí, Importar, obtener película de. Y entonces se me dijo, el camino que he definido mis servicios. Entonces diré tal vez aquí, un paso arriba, servicios y luego servicios. Por lo que en get movie, tendré mi detalle de película. Entonces aquí diremos que se pone más v. Y luego pasaremos el DNI, que es ID de película, como dijimos aquí. Y entonces esta será una promesa como recuerdas. Y así lo diré aquí entonces, y en esto entonces obtendría datos de película. Entonces de esa manera, tendré una devolución de llamada. Y dentro de los datos de película, puedo decir establecer detalle con los datos que vienen en esa respuesta. Por lo que diré aquí dicho detalle, más readaptar. Y por supuesto, para garantizar que esto se ejecute sin límites de veces, si recuerdas por la fuga de memoria y el rendimiento, necesitamos poner esto una matriz vacía. Por lo que en ese caso, no vamos a tener ningún tema para no ser ejecutado ilimitado de tiempos. Pero como ven aquí, ES pelusa se está quejando diciendo que no se conoce el ID de película. Por lo que es como si incluyeras o eliminaras la dependencia. Entonces para resolver este problema y mantener que estamos llamando a este servicio sólo una vez en el efecto y no tenemos fuga de memoria, entonces solo necesitamos pasar el ID de película aquí. Por lo que en este caso, te desharás del error de pelusa ES. Entonces de esa manera, tendré el detalle, o podemos volver a llamar a esto como detalle de película. Por lo que de esa manera, tendré detalle de película más detallado y ambientado. Por lo que para tener un nomenclatura más consistente. Por lo que voy a renombrar esto para establecer detalle de película y luego más del detalle, puedo usarlo aquí. Por lo que en ese caso, vamos a guardar, haga clic en una de las películas. Como ven, estamos obteniendo un error. Estamos diciendo que indefinido es un objeto. Por ejemplo, esto sucedió porque el detalle de la película aún no está listo. Entonces si recuerdas, usamos cargado. Por lo que después de cargar los datos, entonces puedo renderizar mi aplicación o mi página. Entonces en ese caso, necesitamos definir otra constante. Nosotros lo llamamos cargado y set cargado. Entonces de esa manera, el caso predeterminado de este conjunto cargado o están cargados será falso. Entonces después de eso, puedo decir aquí que si cargamos o primero necesitamos poner cargado. Porque aquí tenemos entonces, y luego ponemos aquí set cargado. Y será cierto porque hemos dicho esos datos con éxito. Todo lo que obtuvimos los datos con éxito. Entonces podemos tener aquí también y objetar, si recuerdas, decimos cargado y luego ponemos esto dentro de esos corchetes. Y estamos garantizando que tenemos el estado cargado de nuestra aplicación de la manera correcta. Entonces ahorremos ahora y vayamos a una de nuestras películas. Por lo que iría aquí y voy a ver como por ejemplo, este. Y veremos que tenemos un error. Está diciendo Service Default no es una función. Estoy cometiendo este error a propósito solo para asegurarme de que lo eres, cuando estás importando un servicio o una función o una constante, necesitarás ponerlo dentro de los corchetes del objeto cuando vas a importar algo o un servicio o un método exactamente de la misma manera como lo definimos porque tenemos constante y luego obtenemos película, y luego definimos nuestro método. Entonces de esta manera, debes estar seguro de que estás usando esos corchetes. Después de eso, funcionará para ti. Entonces ahora tenemos aquí el nombre de la película viniendo exactamente cómo se esperaba, pero el nombre de la película no viene de la navegación, está viniendo de la API. Después de que se cargó, así sucesivamente, la película, The dare, empecemos primero para crear un ScrollView. Si recuerdas, también estábamos usando la puntuación de ScrollView en la página de inicio. Entonces lo voy a hacer rápido. Entonces llamaría a un ScrollView. Y esta vista de desplazamiento se importará de React Native. Entonces iré aquí dentro del fragmento, tendré un ScrollView. Y en esta vista de desplazamiento con vienen de React Native también. Y en esta vista de desplazamiento, tal vez podamos agregarle algo de estilo o podemos mantenerlo así por ahora. Y dentro de esta vista de desplazamiento. Por lo que puedo mover toda esta vista de desplazamiento o esta cargada a la vista de desplazamiento misma. Por lo que dentro estará el texto. Y aquí vamos a tener si cargado y vista de desplazamiento luego poner para mí el contenido. Entonces no podemos tener eso de la manera correcta. Entonces solo necesito cerrar este objeto y luego guardar. De acuerdo, hemos cargado. Y luego dentro del ScrollView, por ahora, no necesito un texto. Necesito la imagen, si te acuerdas. Por lo que voy a reemplazar esto con imagen y este componente de imagen. Podemos importarlo de React Native también. Por lo que podemos decir aquí imagen y luego esta imagen tendrá como algunas propiedades. Entonces si recuerdas, usamos el componente de imagen en nuestra guardia. En nuestra guardia definimos todas esas propiedades. Por lo que no necesito repetirlas de nuevo. Por lo que podemos usar todas esas propiedades. Puedo copiar toda esta imagen. Simplemente necesitamos reemplazar algunos parámetros. Por lo que voy a decir aquí imagen. Y luego tenemos que reemplazar como por ejemplo, modo de redimensionar está bien. Estilo, vale, necesitamos agregar estilos para eso. Entonces vamos a copiar los mismos estilos. Por lo que podemos copiar todos esos estilos excepto como algunas clases. Entonces pongo aquí la hoja de estilo constante, necesitamos importarla. Otra vez. Todo es exactamente como estábamos haciendo antes, así que no necesito explicarlos de nuevo. Entonces podemos tener aquí la clase de imagen y podemos deshacernos de todos esos anteojos. Entonces de esa manera, no necesitamos tener un artículo, pero no tendríamos el detalle de la película. Por lo que al detalle de la película, puntar camino del cartel y luego el hígado hay película detallada trayectoria del cartel. A continuación, mostrar, de lo contrario, mostrar la imagen del portador del lugar. No tenemos esa imagen de portador del lugar. Entonces en ese caso, necesito también copiarlo. Por lo que podemos definir una constante, llamarla imagen de portador de lugar, y luego podemos usarla también aquí. Por lo que tendré aquí colocar imagen titular, y en ese caso, nuestra aplicación funcionará bien. Entonces tenemos la imagen de positor, tenemos imagen, y después de eso debajo de ella, tal vez podamos poner la descripción de la película. Entonces, primero intentemos eso. Si tenemos funcionando bien, todos ustedes están trabajando bien. Entonces pondré aquí, vale, El estilo se ve feo porque estamos usando el estilo de su tarjeta. Por lo que para tener como un estilo más adecuado, podemos dar altura como algo así podemos mantenerlo 100 y quitar este ancho y cuanto más de este borde radio. Entonces en ese caso, tendremos la imagen así. O si quieres usar algún porcentaje específico de la pantalla o del tamaño móvil o de la pantalla móvil. Por lo que también puedes usar las dimensiones de las que hablamos antes. Por lo que antes que nada, necesito importar las dimensiones de React Native también. Entonces aquí en React Native import, podemos decir importar para mí la dimensión, y luego podemos definir constante. Nosotros lo llamamos altura. Y esta altura tendrá dimensiones dot get. Si recuerdas, exactamente de la misma manera podemos decir altura de punto de pantalla. Por lo que nos puede dar con alto detalle todo. Por lo que sólo necesitamos la altura. Entonces de esa manera, puedo decir que el tamaño de la imagen será la altura dividida por, por ejemplo, la mitad o dividida por dos, podemos decir. Entonces de esa manera tendrá la mitad de este verde aquí. Entonces eso es lindo. Supongo que es suficiente, o tal vez puedas ponerlo como más bajo. Puedes 2.5 para solo tener como algún dimensionamiento para tener más espacio para usar y mostrar la información de la película. También, antes de terminar esta conferencia, también podemos mostrar como si no está cargada, podemos mostrar como indicador de actividad, como un indicador de carga como vimos antes. Por lo que podemos decir, si no está cargado, entonces mostrar el indicador de actividad en una pantalla más grande. Por lo que necesitamos importar también el indicador de actividad, como expliqué previamente en la conferencia cuando estábamos cargando la pantalla de la página de inicio. Entonces de esa manera, iremos a nuestro simulador. Y cuando regrese y vaya a una de las películas, y luego me pondré como cargando porque tengo conexión rápida. Entonces no estoy recibiendo, no estoy viendo este indicador de carga. De esa manera. Verás un indicador de carga si tienes una conexión lenta. Entonces el beneficio que obtuvimos aquí en realidad que estamos pasando los datos de la navegación a la película de detalle. Entonces de esta manera, no necesitamos en esa guardia pasar todos los datos de la película porque sólo necesitamos pasar la identificación de la película. Entonces no puedo ver aquí en la tarjeta simplemente que quiero pasar solo identificación de película y luego no todos los datos de película que obtuvimos de la API. Porque como recuerdas que la película o el artículo aquí, está conteniendo alguna información sobre la película, pero no todo el detalle. Es decir, los que vemos en la popular película por ejemplo, tenemos en la API, como toda esta información. No, necesito pasar a la siguiente pantalla solo el ID, porque de nuevo, estoy creando una llamada API en los detalles limpios para obtener un detalle de película. Entonces de esa manera, diré ID de película y luego me pasé el ítem dot ID. Entonces nada especial. Simplemente estamos pasando la identificación de la película, No toda la película a la siguiente pantalla. Entonces cuando hago clic en una tarjeta, luego voy a la pantalla de detalles y luego recibo no más detallamos. Recibiré ID de película, exactamente el mismo nombre como especificé aquí. Por lo que tengo aquí ID de película, entonces en el detalle recibiré también de la película params ID. Entonces cuando vayamos a esto o mutador y lo intentemos otra vez, Ok, Todavía estamos bien y todo está funcionando. Entonces de esta manera, la navegación será rápida porque estamos pasando sólo el ID. No voy a pasar de nuevo todos los datos a la siguiente pantalla. Esto es muy importante para que lo hagas exactamente cuando estás desarrollando aplicación móvil para no pasar un big data o una gran cantidad de datos entre las pantallas. 44. Título y género de película: Entonces ahora hagamos el título de la película y los géneros. Entonces de esta manera, necesitamos crear un componente de texto como lo hicimos antes. Por lo que necesitamos tener aquí el componente x y necesitamos importarlo también. Por lo que iré aquí al texto y luego importaré este componente de texto. Y en este caso necesitamos también el para poner algunos datos dentro de ella. Por lo que voy a decir aquí esta obra para mí el detalle de la película, ese título. Entonces hagámoslo y luego probémoslo. Por lo que iremos a las películas populares en Click on it. De acuerdo, aquí tenemos el título, pero el título es pequeño, así que tenemos que hacerlo más grande. Por lo que necesitamos darle un poco de estilo. Por lo que voy a decir aquí al estilo. Y entonces definiré un objeto. Y este estilo tendrá un nombre. Podemos decir estilos dot. Podemos dar un nombre como título de película. Y de esta manera tenemos que volver a crear la clase que se llama título de película. Daría foro para ello como algún tamaño de fuente puede ser de 24. Entonces podemos decir aquí 24. Y entonces aquí tengo que poner el colon o el tamaño de fuente. Puede ser 24. Y además, podemos poner font-weight, podemos hacerlo como calvo. Para que podamos escuchar tener algo así como calvo. Y además, podemos agregar algunos márgenes y relleno. Por lo que voy a decir margen superior. Podemos poner aquí margen top, serán 10. Y margen inferior, como empujar el contenido debajo de él para ser como de nuevo 10. Entonces ahorramos, vale, Niza. Tenemos todo bien. Pero tenemos que centrarlo. Pero vamos a centrar todo como podemos centrar todo el contenido. Por lo que voy a dar una clase para la vista de desplazamiento. Entonces le doy un estilo. Y en este estilo definiré exactamente de la misma manera como lo estábamos haciendo con sus contenedores. Por lo que yo diría estilos dot container. Y ese contenedor, todo estaría centrado. Por lo que podemos copiar lo mismo que tenemos aquí, flex one justify-content center, align items center. Entonces iríamos aquí y luego pondremos el vaso, o podemos decir aquí contenedor. Y este contenedor para ser un objeto. Y pondré este dial dentro de él. Y no olvidaré la coma. Pero como ven aquí, estamos recibiendo un error. Dice que el diseño secundario ScrollView, como debemos aplicarnos a través del contenedor de contenido. Por lo que necesitamos poner todo como algo dentro de ti. Entonces podemos llamar aquí una vista y podemos envolver todo el texto dentro o todos los contenidos que vamos a hacer aquí dentro de esa vista. Y luego haciendo este dial de esta vista, vamos a dar el contenedor. Por lo que necesitamos quitar eso de aquí y pegarlo en similares, la vista misma. Por eso estoy usando una vista. Entonces, ya sabes el motivo porque no puedes ponerlo para ScrollView, como ves aquí que obtuvimos ese error. Entonces vamos a importar la vista y luego ahorramos. Y otra vez ir a alguna película. De acuerdo, ahora tenemos el título de la película en el medio y hay márgenes de relleno, margen superior debajo. Ahora trabajemos con periodistas. Entonces si recuerdas, tenemos para la película algo generoso. Por lo que todos ellos vienen con la película en sí. Por lo que necesitamos ver cómo podemos conseguirlos. Entonces como ven aquí tenemos en la API, voy a obtener detalles API. Y se puede ver que son estanques directamente aquí. No es necesario usar Postman por ejemplo, puedes usar aquí la respuesta en la documentación, esta API. Por lo que el generoso volverá a ser como alguna matriz. Y esta matriz tiene ID y nombre. Entonces lo que necesito es sólo el nombre. Entonces en ese caso, podemos ir a nuestro código y crear una matriz de generoso y luego bucle en algún texto y mostrar todo lo generoso. Entonces vamos a crear una vista en, nuevo dentro de esa vista. Entonces decimos aquí de u y b hay que asegurarnos de que tengamos generosos porque algunas películas no tienen. Para que yo pueda hacer eso. ¿ Es cuando digo como abrí un objeto, entonces puedo obtener detalle de película, exactamente como lo hicimos antes. Y el nombre de campo para generoso, el nombre de campo son periodistas, como ven aquí. Entonces primero, necesito comprobar si tengo realmente generosa porque algunas películas no tienen. Y entonces puedo mostrar la vista. Entonces de esta manera, pondré la vista dentro de esos corchetes. Entonces es exactamente como un si. Y dentro de la vista misma, vamos a recorrer el periodista y hacer un componente de texto. Entonces tendré aquí en componente de texto, Vamos a alinear esto aquí para estar en la misma línea. Y luego dentro de este texto, quiero recorrer y mostrar a todos los generalistas porque algunos más nosotros, tienen tres categorías, algunos más de vista, tienen cinco, algunas películas tienen que hacerlo. Entonces de esa manera, necesito bucear sobre ellos. Entonces, ¿cómo podemos bucear? Por lo que en la vista misma, puedo volver a abrir un corchete. Por lo que dentro de ella puedo escribir JavaScript. Entonces como ves, podemos escribir JavaScript dentro de la plantilla. Por lo que este es el objetivo de esta conferencia. Quiero mostrarte cómo escribir JavaScript en el interior, como la plantilla de estos componentes nativos React. Entonces podemos decir aquí, como bucle sobre periodistas. Por lo que puedo poner aquí generoso y luego mapa. Entonces con este mapa, es como, ya sabes, ese mapa está dando vueltas sobre todos los miembros. Entonces yo diría aquí, y este mapa, me va a volver como sencillo o artículo por artículo. Y entonces puedo usar eso para envolver el texto del componente en él. Entonces de esa manera, voy a regresar no sólo como su género y lo que voy a hacer dentro de él. Por lo que devolveré un componente, y este componente será el texto. Entonces pondré aquí regreso y luego diré ese texto en, de esta manera aquí, ese enero, puedo mostrar el nombre del mismo porque estoy buceando Uno por uno sobre él. Entonces como ven aquí, está celoso. Yo estoy buceando sobre ellos porque es array y obtengo el nombre de cada género aquí. Para que podamos ir a revisar nuestra aplicación si todo está funcionando bien. Agradable. Tengo aquí toda la información. Por lo que esta película te luca, tiene categorías de animación, comedia, familia, fantasía. Pero aquí tenemos un nodo lo diciendo, como cada niño en Alice debe tener un único, decir ¿qué es? Único llavero. Esto se debe a que tenemos aquí como un texto y estamos buceando múltiples veces. Por lo que necesito especificar una propiedad clave. El inmueble clave debe ser único. Entonces lo único que podemos usar en ese caso, que obtenemos el DNI del enero. Entonces podemos decir aquí que la clave puede ser no sólo como cualquier número, podemos decir género, como el mismo, que usamos dot ID. Entonces en ese caso, tendremos esta pistola de notificación y el texto, o cada texto tiene una clave única. Por lo que a través del mapa, pasé por encima de los géneros y luego los tengo como mostrados como texto. Pero aquí como ven, están listados uno debajo del otro. Queremos exhibir uno cerca del otro, mostrarlos cerca uno del otro. Entonces para eso podemos dar estilo para esta vista. Por lo que también podemos usar como estilo y darle como alguna vista específica. Entonces no podemos decir aquí en lugar de diario de estilo, podemos decir periodistas contenedor. Entonces en ese caso podemos dar una clase con ese nombre. Iré aquí y definiré esa clase. Y será como un objeto también. Y para hacerlos cerca el uno del otro porque estamos usando flex. Entonces no puedo decir dirección flex. Si lo sabes en CSS, puedo poner algo llamado rol. Y también para la alineación, puedo decir alinear contenido o alinear elementos. Podemos decir centro. De esta manera, verán eso o se verán como si estuvieran cerca uno del otro. Pero como ves al artista se agachó el uno al otro. Por lo que necesitamos hacer algunos espacios entre ellos. Entonces de nuevo, necesito dar un estilo para este elemento de texto dentro de la matriz. Por lo que podemos decir como solo estilo de género. Para que podamos dar una clase. Y esta clase se ubicará aquí. Y entonces sería un objeto. Y puedo dar algún margen, derecho, margen izquierdo. Entonces margen derecho, será, por ejemplo, podemos darle diez. Entonces intentemos eso, vale, como ven aquí, tenemos a todos empujados lejos el uno del otro. Por supuesto, puedes agregar más estilizados. Tenemos que lograr exactamente el mismo estilo que podemos dar también. Al igual que algunos font-weight se pueden amurallar también, por lo que puede ser más agradable. Por lo que le voy a dar un audaz de peso de letra. Y vamos a empujar un poco el contenedor desde la parte superior, como unos 20 pixel para tener como más espacio para el título. Por lo que voy a dar aquí mi top de margen, Vamos a dar como 20. Entonces en este caso, tendré su generoso y el título de la película exactamente como explicamos aquí. 45. Componente de clasificación de película: Otra información también que necesitamos para nuestro detalle de película es la calificación de estrellas. ¿ Al igual que cuánto se califica esta película? Si vamos a la API, veremos múltiples campos para obtener el detalle de la película. Y uno de esos campos es el promedio de votos, y también hay un recuento de votos. Por lo que el campo promedio de voto me está dando la calificación sobre revisión ordinaria sobre esta película. Entonces, por ejemplo, vamos a crear un componente de texto e imprimir este valor. Vamos a nuestro código y vamos a crear otros componentes de texto. Por lo que tenemos aquí la vista que estamos hechos con ella. Entonces bajo eso podemos crear otro componente de texto. Por supuesto que lo vamos a quitar. Es sólo para una prueba. Entonces diré aquí, solo imprime para mí detalle de película Dot lo que tenemos aquí, el promedio de votos. Entonces podemos tener de esa manera, la película son promedio de la película. Entonces como ven aquí, tenemos el 8.38.3 de diez porque están calificando o promedio de películas está calificado desde 10. Pero queremos usar un componente de calificación estelar. componente de calificación estelar tendrá un cinco estrellas. De esa manera, puedo dividir esto por dos, entonces puedo obtener el valor de cinco. Por lo que necesitamos un componente de calificación estelar. Entonces donde podamos encontrar eso. Desafortunadamente en React Native, no hay ningún componente de calificación estelar como construido con el nativo. Pero podemos encontrar uno si quieres encontrar componente de calificación estelar, solo Google, y luego lo encontrarás fácilmente. Para mí, estoy usando uno que se llama React Native star rating. Por lo que acabamos de poner este y voy a encontrar en el paquete npm algo llamado React Native star rating. Entonces vamos a ello y veremos esa documentación de esta calificación. Por supuesto, este componente, muchas propiedades exactamente como vimos con otros componentes los cuales usábamos previamente. Y aquí un ejemplo de usarla. Dice que solo importa calificación estelar de sequía y decir desactivada gusta no hacerlo como entrada por lo que no puedes hacer click en ella porque es solo valor presentacional y maxa estrellas, puedes definir tanto como quieras estrellas y calificación y luego el valor de la calificación que acordamos. Y también como estrellas seleccionadas, cuando estás haciendo clic en el inicio o en la calificación. Entonces vamos a instalar este componente. En primer lugar, tenemos que ir a ver cómo podemos instalarlo. La instalación es solo npm instalar React Native star rating. Entonces podemos ir aquí a nuestro código, abrir la terminal, y luego vamos a ir a la pestaña de la terminal, y luego vamos a pegar el comando aquí. Por lo que de esa manera, instalamos la biblioteca de calificación de estrellas React Native. Podremos importarlo y utilizarlo en nuestra aplicación. Entonces la forma de importar este componente, como ustedes saben, siempre, somos por ejemplo, vemos los ejemplos. Por lo que aquí importa calificación de estrellas porque es una clase de React Native star rating. Para que podamos ir aquí a nuestro componente. Cerremos la terminal porque ya terminamos con ella. Entonces aquí voy a decir, OK, importar para mí calificación de estrellas de React Native star rating. Y aquí puedo usar este componente. Entonces en lugar del texto, podemos poner calificación estelar, y aquí tendremos una estrella, ¿verdad? Por lo que una de las propiedades que necesitamos es max stars y el valor de calificación. Entonces tomémoslos. Podemos escuchar ir y decir como quitamos esta parte porque es componentes de un lado para que podamos tener algo como esto. No tenemos que cerrarlo de nuevo. Entonces de esta manera podemos tener las estrellas de Max. Es exactamente, tiene autocompletar para que podamos verlo. Serán cinco. Y además, necesitamos tener el valor de calificación. Por lo que la calificación será la misma calificación que hemos definido antes. Por lo que será detalle de película sin embargo, voto promedio. Entonces de esa manera, tendré su calificación en este valor. Pero como dijimos antes, el valor es 10, así que lo dividiré por dos. Entonces, vamos a guardar eso. Y entonces se cargará nuestra aplicación. Y quién obtendría algún error es algo llamado familia forma no reconocida. Font Awesome. Esto se debe a que esta biblioteca está usando Font Awesome o iconos de fuentes. Entonces de esa manera, no podremos usar esta biblioteca hasta que instalemos otras dependencias, como vemos en la documentación. Pero si quieres quitar esta flecha, puedes poner esta señorita. Y todo lo que puedes guardar de nuevo para eliminar este error, bien, Pero el error sigue en segundo plano y la terminal, pero te muestra la realidad del problema. Como ven aquí. Ok, Tenemos cuatro estrellas, pero el problema de que las estrellas no estén apareciendo porque no hay ícono. Y como ves si vas a la documentación, dicen que después de la instalación necesitas enlazar a una biblioteca que se llama icono React Native Victor. Por lo que de esta manera, necesitamos referirnos a este ícono o a la guía de la biblioteca de iconos de Richter. Por lo que a veces los componentes dependen de otros componentes. Por lo que de esa manera, siempre necesitas instalar esas bibliotecas y poder utilizarlas. La instalación de los iconos necesita un poco de trabajo. Entonces lo voy a hacer en una conferencia separada. 46. Uso de íconos en la narración de react Native: De acuerdo, Entonces en la última conferencia, nos detuvimos aquí donde tenemos un error porque no podemos cargar la fuente ni los iconos que queremos. Entonces como ven aquí, sólo vemos un signo de interrogación. Dijimos que esta biblioteca entre instalada sobre calificación estelar depende de otra biblioteca, que se llama iconos de React Native o iconos de React Native Victor. De Reaccionar Nativo 0.6. Sólo se puede ejecutar este comentario y ya está. No hace falta hacer nada más solo si es que te aparecen algunos problemas, que mencionaré en esta conferencia. Porque en esta biblioteca, como dijimos aquí, tenemos múltiples pasos para instalarla. Pero esto funciona con React Native con menos de 0.6. Entonces si tienes el React Native menos de 0.6, entonces sigue estas instrucciones. De lo contrario, basta con hacer npm install e install layer ready y luego reiniciar tu aplicación y todo funcionaría bien. Obtuve este enlace exactamente de la biblioteca de calificación estelar, como les dije antes. Entonces React Native, Victor iconos, este es el nombre de la biblioteca y aquí hay guía de instalación al respecto. Entonces vamos de nuevo aquí a nuestra terminal y peguemos este comentario. Queremos instalar esta biblioteca la cual se llama iconos vectoriales React Native. Por lo que de esta manera, la calificación estelar nos mostrará los iconos de la manera correcta. Por lo que aquí se hace la instalación. De acuerdo, cuando guarde, seguiré teniendo el error en mi aplicación. Todavía no vería ni seguiría recibiendo este error. Y no puedo ver los iconos esto porque necesitas reiniciar la aplicación. Entonces de esta manera, tenemos que reiniciar, ir al metro y luego tenemos que terminarlo porque esta terminal se abre automáticamente. Por lo que tenemos que terminarlo totalmente. Y luego nos quedamos, por supuesto el simulador, no hay problema. Veremos dejar escrituras conectadas desde Metro. Y luego volveremos a iniciar nuestra aplicación. De esta manera, volverá a cargar con la dependencia adecuada, con las bibliotecas adecuadas. Y veremos de nuevo los iconos aquí, exactamente en esta página. De acuerdo, entonces ahora empezó mi solicitud Guthrie. He abierto un nuevo metro. Entonces de esta manera, puedo ir a mis películas y dar click en una de esas películas. Por supuesto, tal vez volveremos a obtener el error porque quiero mostrarte si recibes el error otra vez qué hacer. Por lo que normalmente para algunos dispositivos, funcionará, pero aquí a veces el error seguirá apareciendo. Esto porque tienes que hacer algo más que se requiere de ti. Hay un comentario en la documentación que tendrás que hacer, que se llama React Native link React Native Victor icons. Si bien de esta manera, podrás vincular React Native con esta biblioteca. Entonces de esa manera, siempre puedes vincular su biblioteca iOS y también en el proyecto iOS y también en el proyecto Android a esa biblioteca. Entonces sólo cuando recibes este error, entonces puedes usar ese comando. Entonces iré aquí y lo pegaré. Y después de eso, verás que la biblioteca de leyes se vinculó, pero aún no vemos el ícono porque necesitamos de nuevo reiniciar la aplicación. Entonces esto, cuando te ha pasado, entonces tienes que ir con esta opción que se llama React Native link, y luego usar este comentario. Debe ejecutar este comando en la misma ruta de su aplicación. Entonces estoy aquí en la app de cine y estoy ejecutando ese comando que te mencioné, reaccionar enlace nativo, iconos de React Native Victor. Entonces de esa manera, necesitamos reiniciar nuevamente la aplicación. Por lo que iré y terminaré la terminal. Y entonces diré aquí, React Native, ejecutar iOS o Android es depender de lo que estés usando. Perfecto aquí ahora mi aplicación se está ejecutando. Yo quiero comprobar si ya hay estrellas. Yo iría a una de las películas. Agradable. Ya tenemos las estrellas aquí. Pero son como grandes y son como ese estilo, bueno, y hay como si fueran clicables. Entonces para eso, agreguemos algunas propiedades. Algunas de esas propiedades que se mencionan en la documentación de esa biblioteca, que utilizamos para la calificación de estrellas React Native. uno de ellos se le llama discapacitado. Por lo que también podemos desactivar todos esos iconos son todas estrellas. Por lo que puedo poner aquí propiedad con discapacidad. Y con esta propiedad discapacitada, puedo ponerla en verdadero. Por lo que podemos decir discapacitados. Y luego lo ponemos a la verdad. De esta manera, se desactivarán las estrellas. Entonces voy aquí y veremos que están discapacitadas. Esa es también otra propiedad que se llama full star color. Puedes elegir el color. Por lo que también puedo usar esta propiedad. Por lo que puedo poner aquí para este color oscuro y podemos poner un color especial como un color CSS. Por lo que elegiría el oro. Entonces de esta manera, veré que el color está cambiando para ser oro, como ven aquí. Además, las estrellas son bastante grandes, así que tal vez pueda hacerlas más pequeñas. Por lo que podemos tener alguna propiedad que se llama tamaño estrella. Este tamaño de estrella, podemos dar un tamaño en píxeles. Entonces pondré aquí tamaño estrella, y pondré, por ejemplo, 30. Comprobemos la aplicación. De acuerdo, Ahora tenemos el arranque así. Eso es muy bueno. Entonces ahora cada película tiene su propia calificación, como ven aquí. Entonces aquí no tenemos nada. En ocasiones no hay calificación. A veces tiene una calificación aquí. Entonces tenemos toda la calificación, pero hagamos algo de espacio para que podamos empujar el contenido de estas etiquetas por debajo. Por lo que podemos ir al donde tenemos los periodistas y podemos agregar o podemos contenedor poner botón relleno o margin-bottom. Entonces podemos poner aquí margen fondo, y le damos 20. Y entonces empujaremos ese contenido de esa manera, de esa manera. Por supuesto, esta biblioteca, que se llama Icon Library, o podemos decir iconos, iconos vectoriales. Tiene también un montón de propiedades. Podemos utilizar un componente que se llama Icon. Y al asignar el nombre del icono, como veremos más adelante, puede especificar, mostrar algún icono en su aplicación. Por lo que veremos más adelante cuando necesitemos un ícono, te mostraré cómo obtener un icono de componente y usarlo en la aplicación. 47. Descripción y fecha de lanzamiento: De acuerdo, agreguemos en esta conferencia algunos como fecha de estreno y también alguna descripción de la película. Si volvemos a revisar la API de la documentación donde tenemos la base de datos de películas, tenemos algunos campos que son como, por ejemplo, importantes para nosotros mostrar alguna información sobre la película. Por ejemplo, tendremos algo llamado Overview. Será como una cuerda donde tendrá visión general sobre la película. Y también hay alguna información como la podemos proporcionar al usuario sobre la fecha de lanzamiento de esta película o de este programa de televisión. Por lo que podemos agregarlos fácilmente pérdida o podemos hacer algo así como después de la calificación de estrellas, podemos agregar dos campos de texto. Uno será para la fecha de lanzamiento y el otro lo será también para la descripción. Por lo que de esta manera tendré dos textos. Entonces uno de esos textos contendrá para mí el detalle de la película. Y luego copio el campo que tengo o soy responsable de la descripción. Por lo que voy a poner aquí visión general. Por lo que éste mostrará para mí la visión general sobre la película. Y también tendremos otra que contendrá la fecha de lanzamiento. Por lo que puedo usar aquí también como string, podemos decir fecha de lanzamiento. Y entonces podemos poner como aquí algún espacio. Y después de la cita, podemos colocar una explosión como podemos agregar otro texto o que será un valioso. Por lo que usaría más del detalle y luego desperdiciaré o tendré aquí la fecha de lanzamiento. Entonces la fecha de lanzamiento que obtuve también de la API, como vimos aquí. Por lo que tenemos aquí fecha de estreno. Entonces en ese caso, vamos a guardar y veremos toda la información. Entonces hagamos ahora un poco de estilo sobre esos textos. Por lo que voy a tener aquí como así como estilo. Entonces el estilo será el mismo como lo hicimos aquí. Por lo que vamos a dar una clase y vamos a decir aquí como panorama general en así aquí daríamos como algo llamado fecha de lanzamiento. Podemos decir aquí, liberación, por lo que acaba de ser liberado como clase. Y luego podemos especificar esas clases en nuestra hoja de estilo. Por lo que bajaría y diré que tengo una clase nueva que se llama Overview. Y esta visión general, voy a dar como un margen y relleno de arriba y abajo sobre las críticas de estrellas y también a la fecha de estreno. Por lo que diré aquí margen inferior será como por ejemplo, 15. Y también margen top será de 15 también. Puedes poner los valores Cualquier piense que quieras. Solo estoy mostrando aquí como si tuviéramos un curso educativo. Entonces ahora como ven, estamos pegando el contenido en los bordes del teléfono. Por lo que necesitamos dar algo de espacio para que puedas dar un espaciado usando relleno. Entonces de esa manera, puedo quitar, o por ejemplo, puedo decir como dame relleno, izquierda, relleno derecho. Pero los puedo quitar también. Y puedo decir que me des solo bateo de cuatro patas además, como puedo decir aquí desde arriba, derecha, izquierda, y abajo. Por lo que puedo decir, dame un relleno que será de 15 pixel. Por lo que empujará el contenido de arriba, contenido de abajo, y también de los lados. Y lo último que podemos dar fecha de estreno, que será como un audaz le podemos dar un color audaz. Yo diría liberación, y entonces tendré una nueva clase, o podría llamarse liberación. Y este lanzamiento sería objeto y diré font-weight será con un valor llamado calvo. Entonces de esa manera, tendremos la fecha de estreno de esta manera o de esta bonita manera. De acuerdo, ahora, como ven aquí, tenemos la fecha formateada de alguna manera fea como no discutir, pero el formato estándar de base de datos, necesitamos formatear la fecha en base a algunos, por ejemplo, en su país. Por ejemplo, en mi país en Europa, ponen primero el día y luego las matemáticas, y luego después de eso ponen el año. Entonces no así. Por lo que quiero formatear el día de alguna manera, que es adecuado para mi país. Para eso, necesitamos instalar una biblioteca que sea formato de fecha de objetivo. Por lo que volveré a ir a mi terminal y diré npm instalado. Y el nombre de la biblioteca se llama formato de fecha. Y con este formato de fecha, puedo ponerlo guardar, y puedo instalar esta biblioteca y utilizarla también en mi código nativo React. Entonces después de la instalación la biblioteca, puedo decir importar para mí una función de esa biblioteca la cual se llama formato de fecha. Por lo que puedo decir importar formato de fecha desde formato de fecha. Después de eso, puedo usar esta biblioteca fácilmente como función al decirlo de esa manera. Entonces cerremos la terminal. Podemos bajar y luego decir aquí que voy a llamar a esta función que se llama formato de fecha. Y formatearían, como ves, me está diciendo que proporcione una fecha como cadena y luego enmascarar o el formato. Entonces de esa manera podemos saber qué es una máscara a partir de la documentación de esta biblioteca. Por lo que iría aquí al Google y i o pondría el formato de fecha React biblioteca nativa o formato de fecha MPM. Y de esta manera puedo encontrar una biblioteca que se llama formato de fecha. Y éste que estoy usando. Y veremos la documentación de este formato de fecha. Entonces, como ves, existen múltiples formas de formato para dar formato a tus fechas. Por lo que de esa manera puedes elegir el formato adecuado para ti. Entonces por ejemplo, quiero tener algo así como, como ven aquí, dice aquí si ponen cuatro M, entonces le dará el mes como su nombre completo. Si pones YoY, te dará el año. Por favor, se representen por cuatro dígitos. Entonces de esa manera, puedo elegir un formato que me guste. Para que puedas leer la documentación y comprobar el formato por mí. El formato que me gusta es uno. Entonces vamos aquí y vamos a su formato como segundo parámetro de esta función. Y voy a decir aquí coma. Y luego pondré citas como cadena, y luego usaría este formato. Esto me dará el nombre del mes completamente, y luego me daría como el día 17 de junio, por ejemplo, 2021. Por supuesto que tienes como por ejemplo, si pongo aquí D, D like, entonces obtendría el 17 de junio de 2021. Entonces exactamente cómo se puede implementar aquí. solo puedas copiar lo que quieras. Necesitarás horas, solo necesitas mes ordenadamente, por ejemplo, que ellos, puedas conseguir lo que quieras a través de esta biblioteca. Entonces para mí, este, este formato que más me gusta para mi aplicación, y es en su mayoría comprensible para los usuarios. Por lo que puedo usar ese formato. Entonces de esa manera, aprendimos aquí cómo formatear una fecha y cómo agregar más información sobre la película. Entonces de esta manera, vamos a implementar a continuación sobre una película de play button, donde podemos reproducir la película en algún diálogo o en algún modelo. Y podemos ver video de la película. 48. Botón de juego de película: De acuerdo, ahora en esta conferencia vamos a tener aquí un botón de juego. Por supuesto que no va a ser funcional porque necesitamos un modelo, necesitamos un video. Pero vamos a crear un componente donde juegue aquí un botón de reproducción. Por lo que se puede hacer clic para el usuario. Por lo que puede ser capaz de hacer click en él para ver el video de la película. Entonces me gusta siempre por supuesto podemos usar opacidad tocable o reprimible, como vimos antes, pero además, podemos crear nuestro propio componente, no tenemos tanto código aquí. Entonces por supuesto, siempre se puede sostener todo este contenido dentro de algunos componentes, pero además, no se los puede dar aquí. Por ahora. Voy a crear un componente, sobre todo sólo para el botón Play. Entonces en este caso, voy a tener aquí como un contenedor como vemos. Por lo que tendremos aquí otra vista. Y esta vista me sostendrá mi componente, ese componente que les dije que no podemos llamarlo botones de hoja por ejemplo. Y este botón Play, lo voy a crear. Entonces no lo es, algo existe en React Native es algo que vamos a crear. Entonces para crear un componente, como siempre, solo hacemos click en nuestros componentes de carpeta para que puedas ponerlo en cualquier lugar, pero prefiero tenerlo en componentes. Voy a crear un archivo, llámalo botón de reproducción. Y este botón Play, NodeJS, crearía un componente puro. Creando un componente puro, como lo hicimos siempre usando B, C, S como clase de componente puro. Entonces en ese caso, tendremos creado el componente butilo y además, necesitamos importar React Native. Entonces podemos decir IMR, entonces podemos decir importar React. Y luego después de eso tenemos que decir React.com porque es puro componente viene de reaccionar. Por lo que necesitamos extender nuestro componente de React dot puro componente. Entonces vamos a quitar ahora el estado. Y luego necesitamos aquí a cambio alguna plantilla. El template que vamos a utilizar es la opacidad tocable como usamos con la tarjeta, si recuerdas, o podemos usar algo más o más moderno, que se llama principio. Este principio está en U, como ves aquí en la última versión de componentes en React Native, podemos usarlo y tiene mucha funcionalidad como en press in, en press out y en press más larga y como en pecho a la izquierda, pecho a la derecho. Por lo que tiene mucha funcionalidad sobre esa opacidad tocable. Entonces en ese caso, podemos echarle un vistazo y usarlo para tener componente de variantes múltiples en este curso. Entonces cómo podemos usarlo, solo necesitamos importarlo desde React Native. Por lo que importaré el componente que se llama reprimible. Tienes que estar seguro de que estás usando React Native 0.6 y superiores. Por lo que en ese caso, podrás tenerlo. Entonces pondré aquí Importar y luego precedencial, o podemos tenerlo como objeto de. Y pondremos la biblioteca nativa React. Entonces de esa manera, tendremos precedencial importante. Es exactamente como la opacidad tocable. Tú, como ves aquí, usamos eso previamente, pero están diciendo como si buscas forma más extensa y a prueba de futuro de manejar el tacto basado en la entrada, comprueba su ABI Así que están recomendando utilizar este componente. Entonces de esa manera, puedo tomar todo este contenido. Entonces aquí tenemos algún ejemplo. Podemos copiar todo este contenido y luego podemos colocarlo en nuestro código, como en su devolución. Y después de eso, por supuesto, necesitamos importar el texto. Por lo que sólo necesitamos echarle un vistazo. Entonces tenemos aquí algo así como algún botón, pero aún no llamamos a nuestro componente. Por lo que necesitamos llamar al componente de botón Play de alguna manera en nuestra aplicación. Entonces en la página de detalles. Entonces voy a quitar esto en mama para no tener un error. Por lo que sólo podemos tener texto preferible y soy direccionable. Entonces vamos a la página de detalles. Voy a importar el botón Play exactamente como lo hicimos antes con cualquier componente. Por lo que aquí voy a decir Importar. Y luego pondré mi botón de reproducción desde, y luego pondré el archivo o los componentes de carpeta, y luego pondré mi componente de botón de reproducción. Entonces aquí tenemos un error. Trabajamos porque lo hicimos, cerramos los componentes. Por lo que tenemos aquí Botón Play, necesitamos cerrarlo así. Por lo que volvemos a ahorrar y veremos que todavía estamos recibiendo un error aquí. Por lo que el error viene por la importación. Por lo que siempre cuando estás dentro de un archivo o eres importante, una clase o una constante o cualquier cosa, tienes que asegurarte de que si tienes ese valor predeterminado, importar es como Botón Play. Entonces, así que en nuestro caso aquí, el componente de botón Play se exporta como predeterminado. Por lo que no es necesario ponerlo dentro de este soporte. Entonces cuando necesitas ponerlo dentro de este soporte, como cómo tenemos en el caso de los servicios, tenemos constante múltiple, somos importados y ninguno de ellos es por defecto. Entonces en ese caso, lo puse entre corchetes. Entonces de lo contrario, si no lo sabes, si solo tienes un componente aquí, entonces simplemente lo pones así sin corchetes. Entonces esto cuando recibas este error, así que asegúrate de tener siempre la forma correcta de implementar las cosas. Entonces aquí soy posible. Entonces como ven aquí, nuestro componente y se ejecutaron de la manera correcta. Entonces tenemos el botón aquí, pero además, necesitamos poner un botón de reproducción y tiene algún icono, que es una obra de teatro. Entonces para tener un ícono, si recuerdas, hablamos de Icon Library, que hemos instalado previamente en nuestra aplicación. Por lo que necesitamos importar también el componente de icono aquí podemos importar algo llamado icono desde la biblioteca que hemos instalado antes. Y el nombre de la biblioteca era React Native icons. Y este React Native iconos vectoriales puedes elegir tan bien como una biblioteca a la que pertenecen los iconos, porque esta biblioteca contiene múltiples bibliotecas como, Oh, fuente impresionante, como iónica, por ejemplo, iconos, Google materiales, etc. Así que cuando pongas slash aquí, obtendrás múltiples opciones, como iconos materiales. Entonces puedes elegir entre iconos materiales. Pero cuando eliges iconos iónicos, entonces tienes que ir a iconos iónicos y elegir el icono adecuado para ti. Entonces en mi caso, voy a elegir estos iconos iónicos. Entonces aquí, si vamos a estos iconos de iones, aquí, tenemos que ir a la documentación de estos iconos de iones. Entonces voy aquí a Google. Pondré iconos de iones y luego se reproducirían iconos de iones para mí. Entonces tenemos todos los iconos aquí, entonces puedo obtener el nombre del ícono. Por lo que en nuestro caso, necesitamos un icono de botón de reproducción. Entonces necesitamos éste. Por lo que podemos tener aquí esbozo arrastrado, para que puedas copiar el nombre desde aquí. Por lo que copio el nombre y luego voy a mi solicitud. Yo llamo al componente en lugar del texto. Entonces tenemos que abrirla y cerrarla de nuevo. Retiramos este compresible. Entonces aquí las únicas propiedades de este componente que puede tomar un nombre y dentro de este nombre puedes definir el nombre del icono que ya copiaste. Entonces podemos tener aquí porque estamos usando esta biblioteca. Por lo que voy a haber arrastrado esbozo. Por lo que es exactamente el nombre que se especifica en la biblioteca de iconos de iones. Y seguro puedes dar también algún tamaño. Por lo que podemos dar tamaño. Es exactamente como lo hicimos con las estrellas, si te acuerdas, lo dimos. Por lo que después de guardar, veremos que el ícono se exhibió de esta manera. Por lo que no tenemos ningún problema con los iconos. Probemos otro ícono sólo para asegurarnos de que realmente lo estamos haciendo bien. Entonces voy a copiar el nombre de este ícono. Entonces tenemos aquí algo llamado círculo en el medio. Entonces simplemente no tenemos adelante, pero vamos a poner círculo. Y entonces voy a ahorrar. Y como ves, obtuve el ícono de esa manera. Entonces esta es una forma de cómo podemos tener múltiples iconos en nuestra aplicación. Es muy gran biblioteca. Podrás utilizar todos los iconos de la biblioteca de iconos más famosa en, en internet. Aquí tenemos como quejarnos de ES pelusa. Tenemos que quitar este ícono de aquí y lo cerramos con una cláusula para que no tengamos un problema. Este componente de texto, ya no lo necesitamos, así que lo eliminamos. Y ahora necesitamos tener el principal o este botón todo totalmente para colocarse aquí de alguna manera. Pero antes de eso, vamos a darle estilo. Por lo que daría por este botón como algún estilo o este posible algún estilo. Y a partir de estilos que estoy creando a partir de las hojas de estilo, exactamente como lo hicimos antes. Entonces no lo voy a repetir cada vez que tengamos que crear una hoja de estilo. Por lo que la hoja de estilo, tenemos que importarla de nuevo desde React Native. Y luego creé un estilo para este botón. Por lo tanto, alinear contenido como el contenido estará en el centro del botón. Y también necesitamos un radio fronterizo. Pongo 50 porque si no pongo 50, será como un rectángulo. Por lo que le di mucho radio fronterizo para que pareciera circular. Y luego malas hierbas. Y tenemos algo de altura o puedes dar algo malo también. Por lo que puedes dar como un ancho 50. Por lo que tendrá 50 pixel en victorias y algún relleno para empujar el contenido 10 pixel toma un pixel de cada lado. Y luego di un fondo como algo así como el azul. Por supuesto que es de color feo, pero podemos tener como colores más bonitos. Entonces tengo algún color el cual está codificado duro definido, así que lo conseguí. Entonces tengo aquí hash y luego el número o el código del número o del color. Pero podemos dar por este ícono algo de coloración. Al igual que podemos darle como un color blanco. Por lo que puedes tener una propiedad aquí. No estamos usando un icono de carpeta de estilo porque en la documentación de esta biblioteca de iconos, se puede utilizar un color. Entonces si acudes a la documentación de este ícono o a la biblioteca de iconos que hemos utilizado aquí, verás todas las propiedades que necesitas. Entonces lo que necesito en realidad es propiedad llamada color. Entonces puedes definir el color que quieras. Entonces en mi caso, pondré aquí el color blanco para el ícono. Entonces tenemos aquí un color blanco. Por lo que de esta manera estamos hechos con nuestro componente de botón Play. Entonces lo hemos llamado. Ahora necesitamos posicionarlo de alguna manera como aquí. Entonces si recuerdas, hemos creado como un posicionamiento. Por lo que podemos darnos tiempo para este componente. todos podamos, podemos dar un estilo para la vista de estos componentes. Entonces tendré Aquí estilo y luego usaré estilos dot, y luego daré un botón Play. Por lo que podemos tener aquí Play button class. Por lo que la clase de botón Play tendrá algún requisito especial. Entonces tenemos al final, lo pondremos aquí para que podamos tener un botón de reproducción. Y este botón Play tendrá una posición que es absoluta. Por lo que podemos absolutar la posición de este botón. Entonces vamos a Ahorrar ahora para ver a dónde va. De acuerdo, como ves, tiene absoluta como alguna posición y estaba centrada en medio de la vista. ¿ Qué vista? Entonces el punto de vista que aquí hemos definido como padre. Entonces aquí tenemos un contenedor y luego dentro de este contenedor después de la imagen. Por lo que será esta vista porque la vista sobre ella o este otro componente sobre ella es una imagen. Entonces de esta manera, tendremos esta visión como padre de familia. Y entonces tenemos otra vista donde tenemos este botón. Entonces de esa manera podemos dar top de posicionamiento para este botón el cual puede ser, por ejemplo, menos 20. Entonces esto es después de que calculé. Entonces ya ves que ha estado aquí porque si di 0, entonces será desde el inicio de esta vista. Entonces el mal final, éste que te dije. Por lo que tiene un top 0 aquí. Entonces esto es prueba de mi OK Eso, que este punto de vista es una patente de este componente. Entonces lo voy a dar menos 20 y luego podemos dar desde ahí, ¿no? Al igual que lo pondremos aquí a la derecha. También un píxel de 20, no menos 20 porque saldrá de su contenido y será de 20 pixel. Por lo que el botón estará exactamente aquí. Entonces vamos a posicionarlo de manera más agradable. Creo que 20, 25, sí, así, estará centrado en su mayoría. Entonces de esa manera, nuestro botón está listo para que podamos tener alguna función principal a una obra de teatro o a una película, que veremos en las próximas conferencias. Por lo que podemos tener un modelo para reproducir un video cuando el usuario está haciendo clic en este botón. 49. Modo de reproductor de video: En esta conferencia, vamos a ver cómo podemos reproducir una película cuando estamos haciendo clic en este botón. Pero antes de eso, necesitamos ver un lugar donde podamos reproducir esta película. Normalmente tú, cuando quieras reproducir una película en pantalla completa, puedes usar un modelo. Y el modelo en React Native es un componente que ya está definido en los componentes de React Native. También puedes usarlo para mostrar algún contenido en la pantalla para mostrarlo y ocultarlo en función del comportamiento del usuario. Entonces por ejemplo, como ves en esta imagen, puedes tener como un poco un título o un texto y bien, o notificaciones. De esta manera se puede ver un modelo sobre la capa de aplicación. Entonces de esa manera, puedes colocar un video dentro de la modelo y reproducir ese video para el usuario. Entonces primero, podemos tener un modelo en nuestra aplicación para ser o para reproducir un video dentro de ella. Entonces vamos a crear este modelo. En primer lugar, cuando vayas a la documentación de la biblioteca de componentes de React Native, verás algo llamado modelo. Y en este modelo podemos usarlo para mostrar alguna información dentro de él. Por lo que en primer lugar, necesitamos importar un modelo desde el React Native. Entonces vamos a importar este modelo. Por lo que iré a mi código e iré a la pantalla de detalles. Si recuerdas, hemos colocado un ScrollView. Por lo que tenemos aquí la vista de desplazamiento, que es toda esta área de nuestra aplicación. Nosotros lo vamos a colocar fuera de esta zona. Entonces después del cierre de ScrollView, por lo que aquí colocaremos nuestro modelo. Entonces diré aquí modelo, y luego cerraré el modelo. Por lo que necesitamos importar también el modelo de React Native. Entonces guardamos eso. De acuerdo, La modelo tiene algunos envueltos en etiqueta de cierre. Entonces de esa manera, necesitamos envolver todo el contenido dentro una vista como la que tiene una vista de desplazamiento y el modelo en sí. Entonces primero, antes de la vista de desplazamiento, colocaremos una vista. Por lo que podemos tener un componente de vista aquí, y lo cerramos después de tener el modelo cerrado. Entonces de esta manera, no vamos a obtener ese error. Entonces cómo podemos usar ese modelo, este modelo requiere cierta información para agregarlo dentro de él. Entonces, antes que nada, ves que necesitas tener algún tipo de animación. Necesitas un transparente o algunas propiedades las cuales siempre se definen aquí. En primer lugar, vamos a tener el tipo de animación, que será diapositiva. Por lo que tenemos aquí como propiedad llamada tipo de animación será diapositiva. Y además, necesitamos tener algo de visibilidad y también onRequest close. Y si ven aquí, tenemos dentro un contenido que es dinámico y se puede poner lo que quieran. En nuestro caso, vamos a poner un video aquí. Entonces primero, tenemos que establecer una propiedad visible, y esta propiedad Visible que se llamará modelo visible. Y este modelo visible es una variable que viene como un estado. Entonces vamos a copiar también la variable de estado y vamos a nuestro detalle. Entonces en nuestras variables de estado, como ven aquí, podemos definir el estado visible del modelo. Por lo que por defecto, el modelo no es visible cuando estamos visitando esta página, sólo cuando hacemos click en este botón, como veremos más adelante. Por lo que de vuelta a la documentación, tenemos que poner modal visible en el, nuestras propiedades del modelo. Entonces tenemos aquí algo visible que es propiedad del modelo si es visible o no. Por lo que iré aquí a la modelo y pondré esta propiedad. Entonces de esta manera, no tendremos el modelo por defecto. Entonces por defecto es falso. Pero cuando lo pongo a la verdad, así que pongámoslo aquí a la verdad. Por lo que verás que tenemos algunos espacio en blanco. Este es en realidad el modelo, pero aquí no tenemos ningún contenido. Pongamos algún contenido dentro de él, como voy a poner aquí dentro del modelo, algún componente de texto. Por lo que llamaré aquí en texto. Y voy a poner dentro de este texto como algún nombre o hola, como tenemos que ponerlo largo hola o viejo, algo así. Verás que el modelo está aquí como ves, pero el texto está totalmente en la parte superior del teléfono. Por lo que el modelo es visible. Entonces de esa manera, todo está funcionando bien. Para que no tengas que preocuparte por esta pantalla blanca. Ahora, Vamos a hacer retroceder el estado por defecto de este visible del modelo para que sea falso. Entonces ahora ya no lo queremos ver. Está bien, bien. Por lo que nuestro requisito ahora necesitamos tener que configurar este modelo para que sea visible haciendo clic en el botón. Pero aquí, nuestro botón no es directamente el componente principal que hemos creado dentro del botón Play. Entonces de esa manera, necesito pasar también como este modelo visible a este botón para poder dar click en él. Y luego dentro del botón Play, puedo ir a aquí a lo reprimible y luego poner en presionar como una de propiedades de este componente. Entonces tenemos una función donde podemos decir, vale, altura para mí, el modelo, pero cómo podemos pasar una función al componente. Entonces necesito este componente que se llama botón Play y creé para manejar también clics porque aquí ahora no está manejando nada. Y si manejo los camarillas dentro de los botones de reproducción, no tengo acceso a la, por ejemplo, la variable que se llama modelo visible. Entonces de esta manera, no tengo posibilidad de enlazar entre esos dos componentes. Es exactamente de la misma manera como estábamos enviando propiedades hacer un componente desde un componente padre, también podemos enviar una funciones. Entonces por ejemplo, voy a decir aquí que voy a poner una propiedad que se llama maneja prensa. Y esta manija prensa, que será algo donde pueda llamar a una función o una función y hacer algo por mí como Set visible para ser verdad. Entonces cómo puedo pasar una propiedad de función a un componente en React. Entonces para hacer eso, podemos ir tan bien exactamente cómo estábamos definiendo un componente o una propiedad para este componente usando React. Entonces primero, necesitamos definir mango pecho o una constante como después del render. Y digo esta constante llamada maneja prensa Añadir. Será a partir de este puntal. Y luego sobre prensa de componentes procesables. Yo diré eso, vale, ejecuta para mí este pecho, pero llama a la prensa manejada. Entonces de esta manera, lo tendré de esa manera. Porque si vamos a la documentación de esta biblioteca, toda esta prensa U, como ven tenemos aquí en prensa. Y entonces está pasando algo así como una función. Y luego definió una función personalizada la cual quiere. Por ejemplo, set press, algo así. De esa manera puedo decir, vale, ejecutar para mí esa función que se pasa al componente de botón Play. Entonces de esa manera, cuando guarde y también un ISA, éste, voy a decir que bien, prensa manejada está funcionando para mí, pero aquí necesito definir una función. Y esta función me fijará el modelo para que sea visible o no. Entonces en lugar de eso, puedes definir tu propia función. Entonces diré por ejemplo, función a la que llamaré como video mostrado. Por lo que este video que se muestra será una función, pero no lo ejecutas, porque si ejecutas, entonces está mal. Por lo que se ejecutará directamente. No manejarás eso porque estamos manejando la ejecución dentro del componente Botón Play con esto. Entonces si ven que estamos manejando la prensa, que será en ese caso la función de video mostrado, que pasamos por este componente y aquí se ejecutará. Es un tranquilo, complicado, pero es fácil de entender. Por lo que paso una función a este componente y la estoy ejecutando. Entonces eso es todo. Es muy sencillo. Y lo estoy ejecutando cuando, cuando estoy presionando este botón, que se llama reprimible, y tiene este ícono. ¿ Cuál es éste? Entonces definamos la función de video que se muestra. Entonces diré aquí const, y este costo será un video mostrado, y será una función. Y esta función se implementará para establecer el video o el modelo visible para que sea un verdadero o falso. Entonces de esta manera, Vamos a ponerlo por ahora, ya que te mostraré cómo alterar esta función más adelante. Entonces ahora vamos a guardar todo. Y luego vamos a dar click en este botón. Como ven, tengo el modelo, pero no tengo posibilidad de cerrarlo. Entonces de esa manera, Vamos a crear una función o un botón donde podamos presionarlo y ocultar este modelo. Entonces entraré dentro de este modelo y crearé un componente reprimible. Tenemos aquí prensa civil. Y esta presión necesitaré importarla también de React Native. Entonces podemos ir aquí y decir importación para mí, prensa. De acuerdo, ya lo tengo. Entonces podemos bajar aquí y tendremos un reprimible y manejamos en prensa exactamente cómo lo hicimos dentro de ese botón. Entonces cuando está en mama, puedo llamar a la función, que se llama video mostrado. Pero tenemos que ejecutarlo de una manera como ésta. Por lo que tenemos aquí un video mostrado. Entonces y video Shawn va a manejar este proceso y tendrá aquí para poner el modelo a verdadero. Entonces de esa manera, también podemos no sólo establecer el modelo como verdadero, sino que podemos cambiarlo. Entonces, ¿cómo podemos alterar eso? Entonces no puedo decir, como cuando digo video mostrado, toma el estado actual de la modelo y luego sí lo opongo de ella. Entonces lo que es un estado actual del modelo se modela visible. Entonces después de eso, voy a decir, bien, establecer modelo visible para ser oponerse al estado actual del modelo. Entonces cuando sea verdad, entonces lo mostrará. Cuando sea falso, lo ocultará. Entonces de esa manera, podemos ir aquí y vamos a ejecutar el video que se muestra al presionar este botón. Pero vamos a envolver el contenido de la modelo para estar dentro de ti. Porque siempre, como se ve en la documentación, es mejor seguirlo. Entonces aquí, aquí arriba todo lo que hay dentro de ti. Y luego creó un botón reprimible. Entonces de esa manera, Hagamos lo mismo. Por lo que voy a ir aquí dentro del modelo y voy a definir una vista. Y esta vista, lo envolveré alrededor de todos estos supresores. Por lo que puse aquí también el cierre de esa vista. Entonces podemos tener aquí así. Entonces después de eso, también podemos poner un texto o un icono o exactamente cualquier cosa. Nosotros queremos, exactamente cómo lo hicimos con el botón. Voy a la solución fácil. Pondré un texto. Y en este texto diré, por ejemplo, ocultar modelo. De acuerdo, lo guardamos todo. El Modelo de Altura aquí en la parte superior y no puedo hacer click en él. Por lo que es mejor darle a esta vista algún estilo donde podamos, por ejemplo, centrar este botón aquí en el medio. Por lo que podemos tener aquí estilo. Y este estilo leerá de los estilos punto y podemos dar, por ejemplo, modelo de video. Entonces de esa manera, tenemos que definir el modelo de video de alguna manera para poder bajar. Y decimos aquí, modelo de video lo definió que ya. Por lo que tengo modelo de video, flex, justifique contenido, alinee elementos exactamente de la misma manera como nosotros, estamos centrando los elementos en el medio como vimos al inicio de este curso. Por lo que ahora ocultar modelo está en el medio. Entonces cuando hago clic en él, está bien, el modelo está oculto. Cuando lo abrí de nuevo, el modelo está apareciendo. Entonces de esa manera, estoy ejecutando video mostrado. Es leer el estado actual del modelo y sí oponerse a él. Por lo que cuando haga clic en él, se esconderá. Cuando haga clic aquí, se mostrará. Entonces después de eso, en lugar de tener aquí modelo de ocultar, vamos a tener un reproductor de video. Y esto lo veremos en la próxima conferencia. 50. Reproducir una película dentro del modal: De acuerdo, ahora en esta conferencia vamos a ver cómo podemos reproducir un video o reproducir una película. Por lo que cuando presione este botón Reproducir, mostraré el modelo. Y con este modelo, tendré aquí un video. Por lo que podemos hacer eso fácilmente usando una biblioteca que se llama controles de video React Native. Entonces si vas a Google y buscas controles de video React Native, entonces te pondrás en lo primero, algo del GitHub. Por lo que esta es una biblioteca de código abierto. Tú, podemos usarlo para reproducir un video en nuestra aplicación. Entonces como ven aquí, el video se reproducirá así. Por lo que los requisitos primero, necesitamos instalar esta biblioteca. Entonces vamos a ver cómo podemos instalarlo. Dijo que necesitamos instalar dos bibliotecas. Uno es npm install, save, React Native video, y también React Native video controles. Entonces vamos a instalar esas bibliotecas de herramientas. Por lo que iría a mi aplicación o a mi código y abriría la terminal. Y luego pegaré este comentario. Y luego se va a instalar a mi aplicación y podemos usarlo después. Entonces ahora, como ven aquí, instaló la biblioteca, hay algunas advertencias, vale, no les importan. Se trata sólo de vulnerabilidad. Hay algunas correcciones que se deben hacer en esas bibliotecas y vendrán en los próximos lanzamientos. Entonces ahora ocultemos nuestra terminal. Ya no lo necesitamos. Y luego vamos a trabajar con nuestro modelo. Entonces, en primer lugar, necesitamos eliminar esto permisible o podemos mantenerlo a un lado. Lo volveríamos a poner más tarde. Por lo que tendré aquí direccionable fuera. Por lo que ya no lo usaría. Y tendremos aquí para importar la biblioteca. Por lo que necesitamos importar el componente que tiene los videos. Entonces iré aquí y comprobaré cómo podemos usarlo. El uso dice que se necesita importar algo llamado reproductor de video. Y el reproductor de video tendrá estas propiedades. Por supuesto, hay muchas propiedades, como veremos más adelante, podemos usarlas también. Entonces primero, tomemos este componente e importarlo a nuestra aplicación. Entonces volveré a ir al código para el top board y luego tenemos ese componente listo y podemos usar su ejemplo. Por lo que puedo, otra vez de vuelta al ejemplo. Entonces puedo usar el que está diciendo aquí, y copio el componente que aquí se define. Entonces volviendo al código y lo pondré donde dentro del modelo. Tendré aquí un reproductor de video, algún ejemplo de URL, algún video y navegador será algo así como para la navegación, podemos guardarlo porque lo necesitaremos más adelante. Por lo que ahora voy a ahorrar. Y luego presionaremos este botón Reproducir. De acuerdo, Como ves, tenemos un problema. Por lo que dice así, dot props dot navigator. Por lo que necesitamos quitar esta propiedad también. Por lo que estoy mostrando paso a paso para no tener un error. Y entonces no tienes que hacer preguntas y esperar una respuesta. Entonces les estoy mostrando todos los posibles errores. Por lo que ahora sólo necesitamos una propiedad que se llama fuente. Y esta fuente, hay que especificar algo llamado URI. Y tendrás video MP4, video mp4, como puedes obtenerlo desde cualquier lugar. Puedes subir video, hacer tu servidor, y luego puedes reproducirlo de esta manera. Por lo que solo puedes obtener el enlace del video. Entonces ahora ahorramos, y ahora voy a reproducir el video o voy a mi video, y luego presiono Play, y llegamos aquí otro error. El error está mostrando aquí que la biblioteca aún no está definida o su video de la biblioteca aún no está definido. Entonces para eso, necesitamos encontrar una solución que pueda ser posible prescindir de la vinculación. Porque como sabes que hacer un enlace como React Native link solo se hace automáticamente en React Native six y superiores. Por lo que prefiero volver a esa documentación de la biblioteca. Y luego vemos paso a paso, ¿cuáles son las soluciones para eso? Entonces como sabes que esta biblioteca depende de algo que se llama React Native video. Entonces como ves aquí, si lees la documentación, tenemos que dar click en React Native video porque ya lo hemos instalado con este comando. Por lo que tenemos control React Native Video y React Native Video. Entonces de esa manera tenemos que ir a React Native Video library e ir a comprobarlo paso a paso cómo instalarlo, porque no es suficiente que solo se instale MPM a veces. Y entonces la aplicación se está ejecutando como una magia. Como ves aquí, hay algunos pasos para la instalación de iOS, Android, y también hay otros sistemas. En lo que estamos trabajando ahora es iOS. Si quieres seguir para el Android, puedes hacerlo de la misma manera también. Dice que si tu proyecto usando React Native menos de 0.6, entonces tienes que hacer eso enlazando. De lo contrario, no tienes que hacer que se enseñe vinculación porque reaccionar automáticamente Native haría que funcione en Android. Y por supuesto, si tienes más problemas, puedes hacer lo siguiente como se menciona aquí. Entonces, en primer lugar, voy a la instalación de iOS. Iré aquí al detalle de iOS y se queda para mí otra vez. De acuerdo, Estás usando React Native 0.6 y superiores. Entonces tienes que hacer ejecutar pod install. Entonces eso es todo. No necesitas hacer ningún enlace si estás haciendo menos como cero punto 59. Y luego. Tienes que hacer un enlace. Así que ten cuidado porque si haces vinculación e instalación de pod, obtendrás otro error. Y es muy difícil de resolver después de eso, y vas a ir al punto muerto en tu solicitud. Por lo que te estoy aconsejando que sigas exactamente la documentación. Por lo que voy a ir aquí y hacer la instalación de MPM. Por lo que al hacer instalación de pod, tiene o bien dos vías. A lo mejor puedes decir pod install, todo lo que puedes hacer como NP x pod install, así que así. Entonces cuando lo haces en el directorio de películas o en el directorio de proyectos, tienes instalada la exportación vacía. Entonces instalarás esas dependencias. Y te dirá como, está bien, todo está instalado y vinculado a la aplicación iOS. Por lo que en ese caso, necesitas de nuevo reiniciar tu aplicación usando el terminal. Por lo que voy a cerrar mi solicitud. Y luego de nuevo, voy a volver a ejecutar la aplicación usando React Native run iOS. Por lo que MDX React Native run iOS me ayudará a solucionar este problema, esperemos. De acuerdo, ahora la aplicación se está ejecutando de nuevo y podemos hacer click en una de las películas. Entonces por ejemplo, vamos a este y hacemos clic en el botón Play. Entonces cuando haces click en Play, Nice, Tienes como video reproductor funcionando bien y tienes control en la voz. Y también se puede controlar el lugar del, como, por ejemplo, el video. Y también puedes detenerlo y ponerlo en pausa. Y también se puede ver algún temporizador. Y también se puede volver atrás. Pero aquí en mi caso, no puedo volver a salir de este video ni de este modelo porque necesitamos funcionalidad en la espalda. Por lo que volver a la documentación de la biblioteca que es React Native video player o React Native Video control, que hemos instalado antes. Ahí hay un método o una propiedad donde podemos pasar al componente y luego tendrá como algo y efecto. Entonces porque no puedo presionar aquí atrás porque necesito especificar una función. Necesito definir la función que me ocultará este modelo. Para que pueda desempacar cuando haga clic en atrás, que es éste, entonces se ocultará el modelo. Entonces cómo podemos hacer eso fácilmente, vamos a nuestro código y luego vamos al reproductor de video y luego redefinimos en la espalda exactamente cómo lo tenemos en la documentación. Y esto en la espalda será una función. Por lo que podemos ejecutar una función en la devolución de llamada de esta función. Por lo que aquí voy a decir video mostrado. Entonces video mostrado ejecutado para mí si el modelo se está mostrando. Por lo que ahora guardamos y vamos de nuevo a nuestra aplicación y luego hacemos click en atrás. Todavía tenemos un error porque este navegador o esta función en la parte posterior requieren el Navigator. Si recuerdas, aquí hemos borrado esta parte. Entonces volvamos al ejemplo que nos proporcionó aquí. Hay alguna propiedad llamada Navigator. Y este navegador está pasando el control de navegación de la pantalla actual. Por lo que necesitamos eso necesario para este reproductor de video. Por lo que voy a poner aquí y navegador, y no voy a utilizar este dot prop dot navigator. Voy a usar la aplicación que hemos pasado aquí, si recuerdas. Por lo que usaré esta navegación para cerrar ese modelo. Entonces aquí diría, en lugar de este punto-producto de Navigator, diría usar navegación. Y luego vamos a guardar y luego ir de nuevo a la aplicación de video y presionar hacia atrás. De acuerdo, El modelo está oculto. Entonces de esa manera, se ejecuta el video mostrado y luego se oculta el tripa modelo porque ya se muestra. Por lo que ahora estamos reproduciendo el video en el camino correcto de cada película. Entonces para eso, necesitas proporcionar también. Si quieres videos donde puedes subir a tu servidor. Desafortunadamente, esta API no proporciona videos por derechos de autor. Por lo que podemos tener aquí como algunos especiales, si los tienes copyrights para mostrar algunas películas, entonces puedes reemplazar estos enlaces por ese video. Y entonces también puedes hacer algunas películas aplicación, reproduciendo algunas películas en la app. 51. Lógico modal: De acuerdo, en esta conferencia vamos a hacer algo de lógica y algo de refactorización para nuestro reproductor de video. Entonces, por ejemplo, puedo crear un componente que se llama video también. Y entonces puedo jugar o colocar el reproductor de vídeo dentro de él. Y luego puedo pasar algunas propiedades. Ese objetivo de esta conferencia que les voy a mostrar cómo crear un componente de una manera diferente también. Por lo que primero podemos ir a la, nuestros componentes y definir un nuevo archivo, y lo llamamos video. Por lo que podemos decir aquí video dot js. Entonces en lugar de usar las herramientas de fragmentos, podemos usar también nuestra mano. Por lo que podemos crear el componente a mano para entender cómo realmente estamos trabajando con los componentes en React Native. Por lo que la creación de un componente, un React Native requerido para importar React. Por lo que podemos hacer esto con importador o con Herramienta de recorte. Podemos tener importación Reaccionar de Reaccionar. Y luego necesitamos usar el nombre para su componente para que podamos dar bien, una constante y le damos el mismo nombre del archivo, que será video. Y entonces podemos definir como una función. Y entonces esta función tendrá como retorno, donde vamos a devolver la plantilla de este componente. Y dentro de la plantilla de este componente, voy a utilizar el reproductor de vídeo que hemos creado al detalle. Por lo que aquí voy a copiar esta parte. Entonces me llevaré todo esto y luego lo pondré en el video. Entonces en ese caso, necesitamos importar también el reproductor de video. Por lo que de esta manera, tengo reproductor de video importado desde el control de React Native Video. Entonces ahora no tenemos ese control sobre su navegación. Y además no tenemos el control sobre la función de video Shawn. Entonces de esa manera, podemos crear propiedad como vimos anteriormente con el botón Play. Pero aquí podemos crear las propiedades como una función de una manera diferente. Aquí puedes encontrar o pasar unas indicaciones a un componente. Entonces, cuando estás llamando a un componente o estás definiendo un componente, defines un parámetro como un objeto y le das un nombre. Por ejemplo, estoy diciendo sobre la ropa. Por lo que esta función se ejecutará cada vez que algo sucedió fuera de este componente. Entonces de esa manera, tengo que ir al detalle y luego quiero llamar a mi componente de video. Por lo que queremos llamar a este componente de video, necesitamos exportarlo. Entonces aquí, después de tener un costo definido, puedo decir export default, como por defecto como vimos anteriormente. Y luego defino este componente que voy a exportar. Por lo que tenemos este video se exporta, podemos usarlo en pantalla de detalle. Entonces aquí diré cuando suba importar para mí video desde, pero no desde los controles de video React Native. Vamos a importarlo de componentes y luego video. Y después de eso, vamos a llamar a este componente. Por lo que voy a decir aquí en el propio modelo video y luego el video va aquí. Pero antes de eso necesitamos pasar esa propiedad que aquí definimos. Por lo que puedo decir cláusula ON, para que podamos tener la propiedad aquí también. Por lo que aquí tenemos la UNCLOS. Este inmueble será una función. Entonces de esa manera, puedo decir que esta función estará ejecutando el video que se muestra. Por lo que se puede decir aquí, video función mostrada. Por lo que la cláusula ON irá como esta función como se ve aquí, y se ejecutaría dentro del componente de video. Y tú también puedes. No tienes que poner todo esto. Se puede poner sólo video mostrado. Por lo que podemos poner aquí un video mostrado, así como una función y se ejecutará dentro del componente de video cuando esté en la parte posterior, por ejemplo. Entonces puedo decir aquí, en lugar de video mostrado luego UNCLOS, por lo que al reverso del reproductor de video, estará ejecutando éste. También hay otras propiedades que encontré en la documentación, por lo que podemos utilizarlas también para manejar nuestra aplicación de la manera correcta. Entonces por ejemplo, en Enter full screen o una salida de pantalla completa y también mostrar control. O por ejemplo, podemos decir como de extremo cuando el video y vamos a cerrar el video. Entonces de esa manera, puedo terminar el video o cerrar el modelo cuando haya acabado del video. Entonces en lugar de eso, puedo decir aquí como en extremo y también como en espalda, también tenemos cerca esta navegación. Ya no lo necesitamos para poder quitarlo. Por lo que podemos probar ahora nuestra aplicación. Entonces lo voy a guardar todo. Por lo que tenemos aquí video cláusula ON, video mostrado y también este. No se debe cerrar así. Podemos cerrarlo de un lado para ignorar el error de pelusa ES. Entonces ahora tenemos modelo y dentro de la vista y puro y limpio, aquí no tenemos tanto código. Entonces cuando toco este video, como ven aquí, Vale, se juega bien. Pero cuando hago clic Atrás, entonces está terminando. Y también cuando el video va hasta el final, debería cerrarse también. Entonces esperemos ahora. Se va a cerrar o está terminando. Ahora, se salió automáticamente del modelo. Entonces de esa manera, tengo en función de espalda que hizo para mí el trabajo y también en función de extremo. También hay múltiples propiedades. Se pueden ver en la documentación, por ejemplo, alterna el modo de tamaño en pantalla completa por ejemplo, tenemos esta propiedad. Si lo ponemos en true, entonces no alterará el video para que sea así. Por lo que al hacer clic en este icono de pantalla completa, no será así. Por lo que es solo un caso en el que puedes manejar también como este modo de pantalla completa, control , animación, sincronización, como la cantidad de tiempo milisegundos para animar el control dentro y fuera. Al igual que no tienes que mostrar que controles después de algún periodo. Entonces, por ejemplo, cuando tengo mi ratón manejado así sin nada, entonces los controles están desapareciendo. Entonces, ¿qué hago cuando sigo adelante, toco el teléfono, luego tengo los controles de nuevo. Por lo que todas esas propiedades, puedes probarlas tú mismo y luego podrás ver cómo funciona esto y cómo está trabajando este reproductor de video contigo. Entonces esta es la funcionalidad que quería mostrarles. Es algo así como mostrar cómo podemos crear un componente por nosotros mismos y definir propiedades de una manera diferente para llamar a algunas funciones externas fuera de ese componente. Última cosa que quiero mencionar también de nuestro modelo que cuando necesitamos apoyar la orientación, así cuando regrese o gire el teléfono horizontalmente o retrato. Por lo que podemos tener de alguna manera algunos V más para ser como pantalla completa. Entonces de esa manera, también puedo establecer una función que se define o una propiedad que se define en el modelo, que se llama orientaciones de soporte, que obtuve también de la documentación del modelo. Por lo que puedo decir aquí, como se retratará la orientación apoyada y el paisaje. Entonces de esa manera, el modelo, apoyamos eso también. Entonces cuando mi teléfono gire, entonces hará algo así para que yo apoye el modelo de la manera correcta. Entonces ahora cuando voy al video, necesito agregar una propiedad de esa manera, que se llamaría orientación a pantalla completa. Todos. Entonces de esa manera, puedo tener control de orientación sobre todos los modelos. Entonces cuando la modelo esté regresando para ser retratada, entonces también se retratará el reproductor de video. Entonces intentemos eso. Entonces voy a guardar esto y voy a empezar el video. De acuerdo, Tenemos el video en el camino correcto. Voy a girar el teléfono para que sea como un paisaje para que podamos ponerlo así. Como ves, el reproductor de video también se adaptó a esto y también al modo de pantalla completa del teléfono. Por lo que tenemos ahora esta capacidad de girar el teléfono en base a las propiedades que tenemos y cómo tenemos definiendo nuestra aplicación. Por lo que de esa manera, también podremos ver a pantalla completa cuando estemos dando la vuelta al teléfono. 52. Añadir barra de navegación: Si recuerdas, en app.js, hemos creado múltiples pantallas. Uno es para el hogar y otro para el detalle. Y cuando navegue por el detalle también, voy a ver como alguna barra de navegación en la parte superior. Y de alguna manera podemos ajustar estas barras de navegación para que encajen en nuestra aplicación. Entonces por ejemplo, no necesito mostrar este detalle. No quiero mostrar esta función hogareña y también como tenemos aquí la flecha. Quiero alguna barra de navegación personalizada. Por ejemplo, en caso de que esté en pantalla de inicio, puedo tener un botón de búsqueda donde pueda venderlo para películas. Y también puedo también. Cuando voy a alguna película, sólo tengo ese botón de retroceso. Entonces si recuerdas, en React native navigation, hemos definido las pantallas y tienen algunas propiedades. uno de ellos se le llama componente. Y también hay otra propiedad en React native navigation, que se llama opciones. Y esas opciones puedes pasar las opciones que quieras dentro de tu navegación. Una de esas opciones se llama cabecera. Por lo que el encabezado puede ser de esta navegación ajustable para recibir algún componente específico, no este componente o no el componente predeterminado que se define en la navegación, también incluir otras propiedades como son título de cabecera de imagen trasera, y también encabezado de fondo de cabecera Left tenía su luz. Mucha información que puedes especificar en el encabezado de esta navegación o de esta pantalla. Entonces, por ejemplo, intentemos una propiedad que es propiedad que se llama cabecera transparente, y este balance de planta de cabecera. Si lo pones a cierto, entonces hará que el encabezado sea un transparente como ves aquí. Por lo que la navegación estará dentro de esta pantalla. Podemos tener la navegación directamente dentro de nuestra pantalla, no fuera de la pantalla, como así tendremos como algún espacio en la zona segura como recordamos. Entonces porque llamamos a esto como área espacial, porque fuera de ella, no es zona segura. Por lo que también vamos a establecer esta opción para la página de detalles. Por lo que iré aquí a las opciones, las copiaré, y las estableceré también para la página de detalles. Por lo que al detalle, también tendré un encabezado transparente. Pero como les dije, necesitamos deshacernos de esta casa y también del título que está aquí. Entonces para eso, podemos crear nuestro propio componente diciendo que quiero encabezado. El encabezado totalmente será diferente de alguna manera llamando a una función que es una función de devolución de llamada donde puedo especificar el componente de renderizado que se renderizará aquí. Entonces, por ejemplo, puedes decir que quiero un solo texto, solo quiero un componente específico. Quiero solo un botón donde tenga una búsqueda. Entonces de esta manera, puedes crear tu propio componente y especificarlo en el encabezado aquí. Entonces probemos la app y creemos nuestro componente. Por lo que iré a los componentes, crearé un nuevo componente. Entonces aquí tendremos un componente, podemos llamarlo navegación. Por lo que diría aquí navegación dot js. Y entonces crearíamos un componente puro como vimos antes. Por lo que usar el fin de semana de la herramienta de recorte tener una clase de componente puro y esta clase de componente de computadora se importará y extenderá desde React Native dot-dot componente puro. Por lo que tendré tu IMR y luego la navegación de clase se extiende React dot componente puro como vimos antes. O podemos renombrar nuestra navegación para no tener un conflicto en nombrar fin de semana, digamos como navbar. Por lo que podemos llamar a este componente como una barra de navegación. No tener conflicto con otros nombres de la navegación. Por lo que podemos renombrar este archivo para ser así y nav bar. Entonces volvamos por ahora solo un componente de texto. Entonces tendré aquí texto, y este texto se mantendrá como el nombre de la aplicación por ejemplo. Por lo que puedo decir aplicación Películas. Entonces de esta manera, tendremos la navegación en la parte superior para que no tengamos que olvidar también importar el componente de texto. Por lo que tendré aquí texto de React Native. Por lo que ahora nuestro componente está listo para la importación. Por lo que volveré a ir al app.js, y luego diré importar para mí la barra de navegación. Por lo que decimos aquí importar barra de navegación de componente nav bar. Entonces es exactamente de la misma manera como lo hacemos con los otros componentes. Y aquí en el encabezado, en la devolución de llamada, voy a llamar a la barra de navegación en sí. Entonces ahora cuando ahorramos o podemos hacer esta llamada como una llamada lateral. Por lo que podemos tener aquí este lado. Y luego cuando ahorremos y vayamos a una de las películas, por ejemplo, esta. Y fue él que vamos a tener el título en la parte superior y dentro del área segura. Por lo que necesitamos o fuera de la zona segura. Por lo que necesitamos ponerlo de alguna manera en el área segura. Eso puedes hacer eso fácilmente y llamar a un componente que se llama área segura de vista, guardar cualquiera de ustedes viene también de React Native. Por lo que puedes usar este componente después de renderizarlo. Por lo que volveremos a poner este retorno y rodearíamos el componente de texto con el componente que se llama área segura de vista. Por lo que tendremos aquí el texto dentro de esa zona segura. Y como ves, el título de la aplicación de película se traslada al área segura. Por lo que nuestra aplicación no es conflictiva ni el contenido de nuestra aplicación, por ejemplo, la navegación no está en conflicto con el área segura como la naranja y la hora, y también la batería y la señal. Por lo que dentro de la zona segura, voy a esta navegación. Voy a tener algún logo aquí. Y también podemos definir algo así como el botón Atrás como era antes. Y también podemos tener algún icono para la búsqueda. Pero en el detalle de esta película, sólo podemos tener un botón de retroceso. No teníamos que tener un repunte y el local. Por lo que sólo podemos tener un botón Atrás. Por lo que dentro de área segura podemos tener una vista. Y esta vista también se importará de React Native como vimos. Y entonces tendremos un botón, para que podamos usar un botón de opacidad táctil. Por lo que podemos tener aquí opacidad tocable como vemos aquí. Y tiene propiedad la cual estará en prensa y retrocederá. Por lo que ahora tenemos la opacidad de la tuple. Podemos especificar icono en su interior. Por lo que también podemos utilizar algunos iconos de nuestra biblioteca de iconos los cuales hemos instalado antes. Por lo que podemos dar este nombre para este ícono puede ser un icono de retroceso. Ya me dieron el nombre de la documentación. Y el tamaño. Podemos especificar el tamaño del icono, que puede ser de 40. Y también podemos dar algún color, que puede ser blanco. Por lo que podemos tener aquí color. Y luego ponemos este hashCode, tres Fs, y luego cerramos el icono de un lado. Entonces ahora lo que necesitamos importar es la vista. Y necesitamos importar también el componente de icono. Por lo que importando componente ícono de elemento de la biblioteca que especificamos antes y utilizamos. Entonces vamos a guardar eso e intentarlo. Agradable. Tenemos aquí al icono de opacidad tocable. Podemos hacer click en él, pero no está haciendo nada. Por lo que en prensa de esta opacidad tocable, podemos especificar y navegar para poder navegar de nuevo a la página anterior. Por lo que voy a decir aquí en prensa. Y con esta compresa, será una función de devolución de llamada. Y en esta función de devolución de llamada, necesito especificar la navegación. Si recuerdas, aquí no tenemos la navegación porque tenemos una barra de navegación. Por lo que necesitamos pasarlo de alguna manera desde fuera de este componente. Por lo que de alguna manera necesitamos crear un prop para esta barra de navegación. Por lo que puedo ir aquí de nuevo al componente Navbar y crear un nuevo prop, que también se puede llamar navegación. Por lo que antes de regresar, definiré una constante. Y esta constante será un objeto porque necesitaremos otras propiedades, como veremos más adelante. Yo lo llamaré navegación. Y esta navegación, tendremos este puntal de puntos porque estamos importando este puntal y lo estamos usando como utilería. Y luego aquí en prensa podemos decir como después de tener esta función de compresa, necesitamos ejecutar algo que se llamará punto de navegación, retroceder. Y este ya es método definido, que me ayudará a volver en mi aplicación a la página anterior. Pero antes de eso no hay que olvidar pasar la navegación al componente Navbar. Y eso podemos hacerlo a través de ab.js. Y como ven aquí, podemos especificar la navegación. Y dentro de esta navegación, podemos decir sacar la navegación de su pantalla actual, cómo podemos conseguirla. Podemos obtener la navegación desde la pantalla actual pasando aquí en la función de devolución de llamada, algo así como oro, navegación porque tiene un parámetro donde podemos utilizar la diferencia de la navegación de esta página de detalles, para ejemplo. Y entonces puedo pasarlo aquí. Entonces vamos a guardar todo y luego intentemos de nuevo hacer clic en el botón. De acuerdo, tenemos un error. Este es un error que hice a propósito porque quiero mostrarte cómo puedes pasar luego navegación desde la balanza como desde esta pantalla. Entonces cuando quieras pausar la navegación, No es suficiente pasarla así. Tienes que rodearlo con soportes, con corchetes curvos. Por lo que puede ser un objeto. Por lo que hay que tener mucho cuidado con esos, como un corchete y cómo se pueden especificar. Entonces de esa manera, será trabajo porque se definirá, se definirá la función de devolución de llamada. Entonces cuando hago clic en este botón, Ok, voy de nuevo a mi componente. Entonces de esa manera, tendremos un objetivo específico, como volver botón atrás solo para el componente del detalle porque especificé eso solo para la página de detalles. No tengo para la página de la pantalla de inicio. 53. Navegación de pantalla de inicio: De acuerdo, hola, hash de clave de condenar y navegación tiene un AAC sulfhidrilo. El de una mano soy navegante me pidió un subhead y el ciervo, los detalles de la vieja película, pero luego consiguió un 100 y eso ahora hará que corazón de navegación nos late de cómo la UCI le dio Morgan y tenía su propio yo ha sido y navegación y más sería un sub. ¿ Qué tal si ves tu modo de navegación sería un detalle que MOOC y nosotros tenemos 30 y componente igual dinámico partido que había sido no sólo como SI, líder había ido principal para no había principal, no estaban pasando por 0. Falso. B tiene un corazón suave y Mozart o para uno puede entrar a nuestro vivir. ¿ Cómo significa eso que dijimos apoyos por defecto o sede que haces. El no significaba que haya ido por ahí cae. Se había vuelto más viejo AC todavía, pero escondido en Auth0, el que tecleando, tipeando propiedades es hasta zed sepia eidetic, y seguir adelante y principalmente se fue lo compré en Boolean. Gobierno es ahora tipos de medio bloque comando lo suficientemente importante estudio del sueño en el ocio desde ahí su romperá Mirada y lo que no les gusta, mal hombre heck y cierto hombre Amaka y engañado, mano largamente buscada en Lean y drop divs con apoyos predeterminados suficientes pero no obtendrás una amina. Hey, vamos, hackeando, no va a conseguir una barra de navegación, dot roto divs fueron nav bar, los apoyos predeterminados se lijaron en hey, Althea para mi adherir tipo de Guan Y componente j tiene térmica conseguir esto para tener un cuerpo principal y por qué cualquier firma con él? No me adelanté que yo. Empieza en Azure, la barra de navegación árabe, MC que si una barra de navegación y módulo de cuerpo de agua caliente que tenía R4 y todo el acurrucado de navegación se ha ido. Principal Lemma en corpus de cómo la ACA o mi papá se enfría, principal y la mayoría se fue ser un corazón suave y encontró un gordo Derek y R3, esa propiedad de barra de navegación que soy un prop nodal por cómo cae la plática de destello. Resaltar suficiente fondo de detalle de bit igual. Tenía un equipo enseñado a través de p-hat y nav bar. El maíz alto llegó a 0 arriba Gombe, un sub AC. Pero mapas eidéticos y barra de navegación suficiente resolver implementación. Cuando la gente vieja consiguió un no, BS ha tenido un fácil en un infierno cuando un jinete en él, lo va, pero ¿crees que van a conseguir gamma y este tinte te te, los incógnitas no necesitan. Falso, no hay límite si hizo todo el componente agregado para despertarse por Italia, él detrás de ella un sulfhidrilo. Te ves altura en pantalla de inicio. Y luego el componente en el principal para cómo ese dominio pero doble clic en un botón y alimentar y si gordo, si y la cabeza eso significa que quería descartar Dudley, Alice había sido yo dicho logo y aplicación hospitalaria. ¿ Qué podría eso un li una búsqueda del día con un objeto caliente todo en el cuerpo principal en un tiro a este trabajo diff-amp, Danny, hey Ayesha a que este diff-amp habe Dann emitió si en línea, si los hay, celda B a la ancha para Euler o qué caliente el corazón realmente mal tiro es decir, el fundador tenía café highland principalmente a través del corazón otra vez y fuerza principal que una línea de atención por un tiempo, no lo veas mucho. Si tuviste en Maine no puedes forzar pero él entonces le dio mucho por Bob. Hola ido, entrevista suficiente. Por lo que Italia que eran lamelas llaman principalmente falso Yanni y luego hacen en un dominio un sulfhidrilo ACA navías de altura al método directo entonces. Pero luego ic y luego mi mamá y la mitad se acabaron. Ella le dejó hablar a su alrededor. Gwas se mostró a la casa del teatro y tuvo al Masón en la APA desde un Hub. Hola, honestamente en una luminaria fue rechazada por ese Bob. Y por qué están saliendo las medias vidas para ADA, le voltea el pelo media hoja para Madelyn, encuentra un amigo, no voy a conseguir un componente que oh, si lo contrario amigo, amigo que puede cualquiera de ustedes tenía muy, si no lo eres el cineasta principal había ido opuesto a cómo lo veo. Entiendo y nav bar lucha contra ella. Cuando se trata de un IE y IC alto en grasa que irías en un pequeño viaje sub AC. Si lo hiciera, entonces podrían haber sido ellos tenían componente principal. Voy a ver que va modulo que el corazón nos late que un premio de hamburguesa ella Morgan y componente de salud. Y como había sido yo, triste y caliente solar obtendrá islas del logotipo se había restablecido por cómo se había restablecido el logotipo y logotipo marido aplicación Debye. Entonces puede imagen componente. Y ese componente de imagen o lo compré sobre cómo verlo como mi fuente y fuente MAC medida para este aggrecan no se horneará cuando compré en mi amor. Ah, estás dentro y mi izquierda mi pie izquierdo es más requerido. Bueno, pero requirió RF y masaje, una decapitación de casa y MLF. Y yo soy el manifiesto pero continente con logo dorado, algunos agruparon con eso se puede y unidad. Cuando Magallanes activos por la diádica y medio atraso cuando 4D trama que como activos para bien o para mal aquí es tenerlos odio imagen e imagen. Él, yo mejor y más v's mirada PNG dentro de mis huracanes, diviértete. Y yo tenía mi lado. Tengo ley que agenda mudra para entonces un componente caliente off sobre activos para ácidos biliares y películas. Imagen en películas dot PNG. Para un duro no saldrá de ella. Imagen o logotipo. Y nav bar, si tuvieras un AAC por el peine puede dominar una imagen o un anuncio o caer o importar, React Native para un amigo, seré maíz y Andi. Judy, sé él. Ghani es tenerlos ser auténtica lasaña pierna y tiene una opción buceo para imagen ser mucho gamma1, pero aún no podía tales pesos marcando desde salud este dyne bien ahora soy un objeto aditivo estilos McDermott, eso no era a su manera, sino en hoja de estilo, por qué esa hoja de estudio que tengo que añadir una clase es más local. Pero entonces podría riff y una constante de cuerno ahí. Cualquier vidrio hidrogénico o qué componente digital y qué edad. Y son constantes. Cuando compré en estilos e hice un ADA maleza como dinamita en cómo componente soviético, amigo genético si componente dirigido, hoja de estilo viejo aquí y entendía un componente que es hoja de diario más va a crear ahora. Creamos el codo objeto en un vaso fuera entre mi sombra. El homicidio declinó. Para logo a maíz alto. Compré en ancho, alto y ancho. Mucho de lo alto ido a casa escena o mal dolor de cabeza o heno, maíz y alto que como decía Amy. Vamos. Yo estoy viendo más lejos había ido lo compré en Logan. Asintió de nuevo. Por qué en honorarios LU menos ECA y voy a importar esa hoja de estilo. Amigo arriba, no en el logo. More Drew's Michelle puede entrar con una revista sobre abejas Elliot, ELLA, para mal, hey hombre, no vas a conseguir una hoja sobre nosotros si Danny una mala imagen para el método y vamos a conseguir ayuda. Un cachondo aquí en el borde lo fname para degenerar el gancho en él. Mi estudio entonces puede tocable opacidad componente íleon y tenía que sabe. Sí. Entonces he tenido muchos de ellos O han tenido opacidad tocable que tienen trialistas Coursera había sido yo triste, empecé con un grupo totalmente alelo. El mandamiento ion iconos hacia fuera el mensaje, delinean cuál es el tamaño, 18, lo equivalente aún arriba. Pero Hickman puede funcionar heno y luego tuve que hacer uno hasta que Jack, Nevada y navegar por Alla's de D-Day y más tarde Hannah, soy Debbie, las reglas de Cloud, las principales ideas de cómo coordinar. Y Sacha como tal que cH ya sea componentes de búsqueda son OVNI. Bueno, dije que casi vimos una oleada. Una cama plana puede sostener a menos que la cuestión de marcación casi va a ser estilizada. No lo sé, sin clasificar pensó una olla en una localmente allí. Y como recuerdan, Janet fondo, datos termodinámicos tenían un anual o no, Los años de edad Hustler mueren efectivamente por qué decidieron D cuanto mayor sea el logotipo y luego el ADSR. Qué gracioso que pueda pasar el rato en estilo sea como es RF directo, styles command, lo que había conseguido mi hijo y yo conseguí en un dominio f Pero lumen tenía un nombre principal, nunca se enteró de un activo o hostil como lo hizo Mohak. Tendrá que Huntley tuvo eso contestado. Se enganchó Oh, altamente en también llamado fondo magenta por todo lo que hace le inflige ojiva tener la mayor revisión NACADA tenía un gesto al darte contenido o modelo o una mano en Adorno's it V been on space? Sí. El logo, un cachondo, un espacio de minutos de alta calidad entre cualquier por qué me cerré o no lo harán de todos modos, esa placa elisa. Mala HIG. Y eso es todo. Te veré ahí. Cualquier grasa externa y regenerar cuello de botella y saber levantarlo todo el año. Entonces gestos y alta calidad es pequeña, dirección flex de columna. Eso fue un total de mano Danny Meyer hi columna de esquina, ese modelo y todos los demás animales, muñeca, estudio más ya sea el medio o la firma ADSR saldrá el relleno y tuvo el Nevada y Schwann, qué tal una camisa tú cuantitas, incrustando Asherah, lo que yo llamo se va a apagar si la mafia que siguen y voy a ayudar a mi bobbin no va a conseguir un pescado es alinear artículos, manda esa foto. El acetil sea Shaquille, MALDI, Mozilla, y bop le pusieron un arnés, Ghani, por encima de borde honesto. Lo que asevero. 54. Refactoring de sección: De acuerdo, en esta conferencia vamos a ver cómo podemos hacer más simple como el app.js. Podemos mover algún código a un componente separado. Me gusta siempre el superego las cosas a algunos componentes para tener una base de código más baja en mis aplicaciones o en mis archivos. Entonces para eso, tal vez podamos mover todo este contenedor de navegación a otro componente porque necesitamos hacer algunas pantallas de carga y también error cuando hay algún error en la API, para que podamos mostrarlo en la app. Por lo que iría con la creación de un nuevo componente. A lo mejor puedo llamarlo navegación principal. Por lo que aquí puedo dar un nombre en el componente. Podemos decir principal de navegación dot js. Y luego podemos crear como un chico de audio de componente puro y crear el componente con un apátrida. Por lo que podemos crear aquí un componente puro. Por lo que llamaré a mis fragmentos, y diré componente puro, eliminaré este estado. Y también podemos cortar todo el contenido de like desde contenedor de navegación. Al igual que no vamos a tener el contenedor de navegación. Vamos a conseguir sólo la pila. Entonces de esa manera, obtendré sólo las dos pantallas o la pila Navigator. Entonces lo cortaría y luego lo pegaré en mi navegación principal. Y también vamos a traer de vuelta lo que nos falta, por ejemplo, nos falta constante, lo vamos a conseguir. Aquí. Te estoy enseñando a hacer una refactorización para las cosas porque de lo contrario, tendrás un código complicado y no podrás saber manejar o mantener este código. Por lo que necesitamos también algunas importaciones, como como como recuerdas, tenemos aquí para importar React. Por lo que voy a obtener un React y poner extender desde componente puro. Y así necesitamos aquí tener algunas importaciones como veremos más adelante. Entonces necesito, por ejemplo, el Create Stack Navigator para que podamos tomarlo. Y también necesitamos las pantallas que componentes, que vamos a utilizar como Verdes en ese componente. Entonces los cortaré e iré aquí y pondré importación, pero nuestro componente en diferente lugar. Entonces tenemos que ir un paso arriba y luego hacer las pantallas, y luego me dan la pantalla de componentes. Y luego también lo mismo para el detalle. Pero aquí la barra de navegación componente está en la misma carpeta. Entonces podemos simplemente ponerlo así. Después de eso ahorramos. De acuerdo, Es, nuestro código está formateado, no tenemos ningún error ni ningún problema. Entonces aquí en lugar de tener todas esas etiquetas, navigator y todo esto, podemos simplemente llamar a nuestro componente, que se llama navegación principal. Entonces vamos a importar la navegación principal. Diré hit Import. Y luego sin ningún corchetes como aprendimos. Por lo que tenemos aquí una navegación principal. Por lo que conseguiré aquí componentes y después me daré la navegación principal. Entonces de esa manera, puedo enrollar aquí en la navegación. Puedo decir que me traigan la navegación principal. Y se cerrará por un lado porque es un componente sin ningún contenido. Y ahora aquí tenemos que volver a poner esos. O cuando quieras guardar automáticamente más bonita, vamos a poner, poner todos esos corchetes. Ahora, nuestro componente está funcionando bien. Entonces cuando vayamos al detalle, está bien, Niza. Y como ven aquí, tenemos un tobogón, un bug que el encabezado o el navegante o el navegador principal sigue existiendo. Incluso dije cuando detalle EDS entonces no se lo muestres. Y para este tema, también necesitamos agregar algunas propiedades a nuestro navegador. Por lo que una de esas propiedades que debes agregar para no tener esta superposición de la navegación principal dentro de la navegación de detalle se llama modo de cabecera. Por lo que tienes que estar seguro de que lo estás agregando al navegador de puntos stack. Por lo que el modo de encabezado se puede configurar en pantalla. Por lo que se puede decir que el modo de cabecera de la aplicación debe ser pantalla. De esa manera. Como ven, ya no tenemos esta navegación de home navigation. Entonces, como ven, todos hemos definido. Entonces cuando la aplicación está llegando a la pantalla de inicio, es elegir la navegación, pero el principal es Drew. Por lo que de esa manera los navbar se renderizaron con base en el principal. Si es cierto, entonces va a mostrar el logotipo y también el botón Buscar. Si no lo es, entonces va a mostrar sólo el botón Atrás como viste aquí. Por lo que ahora estamos listos con nuestra aplicación como dentro de la navegación. En el siguiente apartado, veremos cómo podemos hacer click en esto para navegar OT en la búsqueda, para navegar a la página de búsqueda y buscar amorfo. 55. Busca en los servicios de cine Tvs: De acuerdo, en esta conferencia vamos a ver cómo podemos crear una oleada. Por lo que necesitamos buscar una película o un programa de televisión. Entonces de esta manera, necesito encontrar la API adecuada para usar eso. Entonces si vas a la documentación de la API, encontrarás algo que se llama oleada. Y en oleada, usted puede ser capaz de averiguarlo. Entonces algo así como buscar películas y también buscar programas de televisión. Por lo que las películas de búsqueda tendrán alguna API específica que se llama pelicula oleada. Y tiene algunos parámetros que hay que pasar. También va lo mismo para la televisión de sobretensión. Necesitamos también tener SRD y luego dv. Y luego puedes pasar los parámetros como la clave API y también lenguaje y la página y también la consulta que se requiere para esa consulta, será lo que el usuario ingresará aquí en la aplicación, y luego obtendrá los resultados en base a eso. Entonces vamos a crear el servicio para esto. Entonces para mí, voy a tener como los mismos servicios que he creado antes. Por lo que tendremos aquí los servicios. Yo copiaría uno de esos servicios, así que vamos a copiar este y vamos aquí. Y entonces lo vamos a llamar oleada película o TV. Entonces les diré por qué nosotros, cómo podemos fusionar esos servicios para conseguir. Por lo que de esa manera se puede llamar película de oleada o TV. Entonces busca película y el DV. Para que podamos buscar ambos juntos. Y aquí podemos decir búsqueda de película o TV por palabra clave. Entonces podemos tener como algo, alguna palabra clave o una consulta que pasará como parámetro aquí, y obtendremos el resultado en base a eso. Entonces construyamos nuestra URL. Entonces, en primer lugar, necesitamos una consulta, como vimos en la documentación. Entonces como ven aquí, tenemos algo así como oro una consulta. Por lo que la consulta se pasará también, haga la aplicación o a la API a través de la URL. Entonces para eso, necesito pasar un parámetro cuando llamo a este error es como desde la aplicación cuando el usuario hacemos clic en esto y tenemos algunos libros gruesos. Y luego presionará Buscar, luego está pasando la consulta. Entonces necesito tener aquí algo llamado parámetro de consulta. Y en este parámetro de consulta, puedo pasarlo a través de la API. Entonces cómo podemos pasarlo. Si recuerdas, tenemos parámetros como éste. Podemos pasar también una consulta en lugar de ella, porque esos parámetros exactamente, puedes pasarlos a través de una URL. Entonces ahora necesitamos una consulta, y esta consulta será la plaza que se pasa a este error es, así que podemos tener aquí entonces, vale, pásame para mí la valiosa consulta. Entonces de esa manera, tendré mi API teniendo esta consulta. Pero en lugar de esto, necesitamos tener búsqueda, como ven aquí. Si subimos, tenemos aquí surge TV y película de Serge. Entonces es exactamente de la misma manera, pero esto es diferente. Entonces pongamos esto como búsqueda. Y ahora estamos discutiendo el tipo. Entonces necesito buscar una película o un televisor. Por lo que no podemos tener también otro parámetro aquí. Podemos decir tipo. Entonces, y este tipo, podemos darle una televisión o una película cuando estamos llamando al servicio. Entonces pondré aquí también, en lugar de película, puedo poner parámetro que es tipo. Entonces de esa manera, mi URL API, la original, como ves tendrás la búsqueda de slash y luego el tipo que sería película o un televisor. Y entonces estoy pasando los parámetros, el podómetro, esa clave API, como vimos, que tiene ésta. Y también la consulta que el usuario ingresó para encontrar alguna película o TV. Y luego devolverá esos datos como resultados. Veamos que es estanques en la API cómo se verá. Entonces como ves, tenemos aquí alguna página y también resultados y el total de resultados. Entonces de esa manera, tienes aquí algunos resultados también. Entonces lo pondremos nuestros datos de punto de respuesta, porque esto viene de axiomas. Está regresando por otros datos. Y luego puedo acceder a esos resultados, agregar, luego se devolverá con la API así. Entonces tendremos esta misma cosa, película, refuerzo de dietilo, video, y toda otra información que estamos consiguiendo aquí. Por lo que ahora nuestro servicio está listo. En la siguiente conferencia, vamos a crear la pantalla de búsqueda, y vamos a utilizar este servicio para mostrar películas, que encontramos en la base de datos. 56. Busca la pantalla de película: De acuerdo, Después de tener nuestro servicio listo, podemos crear ahora la pantalla. Por lo que voy a las pantallas, crear una nueva pantalla. Yo lo llamaré búsqueda. Y en esta búsqueda colocaremos nuestro formulario donde el usuario pueda buscar componentes o películas. Entonces voy a usar aquí componentes sin estado devueltos como lo hicimos antes. Por lo que se llamará Buscar. Y con la búsqueda vamos a regresar también, como alguna navegación en parámetros. Por lo que tendrás aquí navegación. Y además, le devolveremos alguna plantilla, y esta plantilla estará dentro del área segura. Por lo que primero necesitamos importar React. Por lo que voy a decir aquí, IMR importación Reacciona por mí. Voy a crear aquí actuamos fragmento. Entonces tendré aquí algo como React dot fragmento, y luego estará dentro de él, nuestra vista de área segura. Por lo que podemos tener aquí guardar vista de área. Pero me gustaría mencionar que guardar a cualquiera de ustedes, es mejor obtenerlo de React Native que del contexto de área segura React Native. Por lo que puedes obtener este componente de React Native dos no tienen como algunos conflictos en los errores. Entonces aquí tenemos ahora como vista de área segura, podemos crear como alguna vista, al igual que por un ejemplo. Y dentro de esta vista podemos poner un componente de texto donde veremos como algunos cambios suceden, como estar seguros de que nuestro componente está funcionando bien. Entonces ahora vamos a importar la vista y así los componentes de texto. Por lo que iré aquí en importación todos ellos. Por lo que ahora necesitamos navegar a esta pantalla. Si recuerdas, cuando hacemos clic en este componente o este botón, pudimos navegar a algo llamado pantalla. Entonces lo que necesito hacer para ir a la navegación principal y crear una nueva pantalla de pila. Entonces de la misma manera como lo hicimos con el hogar o al detalle, podemos copiar uno de ellos. Y luego podemos añadir una nueva pantalla de pila. Y esta nueva pantalla tendrá nombre, será oleada. Y como les dije, hay que tener cuidado con los nombres. Entonces aquí tendremos así como componente de sobretensión, por lo que necesitamos importarlo también. Entonces como ves aquí, se importa automáticamente y tendrá las mismas propiedades como si tuviera barra de navegación, y además tendrá alguna entrada de navegación y navegación. Entonces ahora vamos a guardar eso e intentarlo. De acuerdo, hacemos click en el botón Buscar. De acuerdo, fuimos a la pantalla de búsqueda y ahora está vacía. Y tiene aquí una oleada. 57. Formulario de búsqueda: De acuerdo, entonces nuestra pantalla está funcionando bien ahora no tenemos ningún problema. Sólo necesitamos ahora hacer un formulario donde el usuario pueda introducir algún texto para buscar alguna película. Para eso, estoy usando un componente que se usa y React library nativa. Y esta biblioteca nativa React tiene componente llamado entrada de texto. Y esta entrada puedes tener como algún estilo especial en él, en Jane, el próximo evento, y también como algo de valor. Entonces al principio y también es importar estos componentes para que podamos copiar esta parte aquí e ir a nuestra aplicación y reemplazar el texto aquí por ese componente. Y además, tendremos aquí esa entrada de texto importada de React Native. Voy a usar u. necesitamos también algunos estiling. Por lo que necesitamos Stein también la entrada. Por lo que necesitamos tener esta hoja de marcado, como vimos antes muchas veces. Por lo que sólo necesitamos tener alguna constante y podemos definir esa constante como una hoja de estilo y usarla en nuestros componentes. Por lo que necesitamos importar esa hoja de estilo también de React Native. Pero como ven aquí, hay algunos eventos, por lo que está usando esta fecha para eso. Entonces vamos a usar esta fecha para esto. Por lo que diré que tengo un texto constante y texto de OnChange, y entonces se devolverán estas estacas en curso en el estado. Por lo que tendré aquí también como algunos también constante y luego diría estado de uso. Y esta fecha de usos se importará de React Native. Y también podemos dar un valor por defecto como lo hizo aquí. Entonces podemos dar como usar menos texto como algo así o podemos decir pelicula oleada. Entonces esto es como una información básica donde podemos proveer para nuestro insumo. Y como ven aquí, ya tenemos la importación para que podamos trabajar con ella. Por lo que sólo necesitamos empujar la vista un poco como tener también. Al igual que aquí tenemos la flecha. Está totalmente en la parte superior y se superpone con la entrada. Entonces podemos ponerlo un poco abajo para que podamos dar, para este abuso también algún estilo. Y yo lo llamaría exactamente de la misma manera como lo estábamos haciendo antes. Y le daremos un nombre que se llama contenedor. Y este contenedor, voy a poner aquí el estilo de la misma. Por lo que será exactamente lo mismo. Por lo que podemos darle como alguna parte superior de bandas desde arriba para no tener el conflicto que mencioné. Entonces tenemos, lo siento, hey, Apple puso la columna, así que voy a poner aquí relleno top y mal huevo dopa será como unos 100 pixel. Podemos decir, intentemos eso, vale, 100 es demasiado. Pongámoslo 60. Entonces 60, Ok, tenemos búsqueda de película. Entonces, y entonces el usuario puede poner un poco de texto dentro. Y así necesitamos poner alguna información como dirección flex, bengala, centro, justificar contenido. Ya veremos eso más adelante cuando tengamos el botón de enviar también. Pero vamos a dar un poco de estilo para que esta entrada encaje con nuestro diseño. Por lo que yo daría al principio como algo, podemos decir frontera-radio. Podemos tener algo así como 15. Y podemos dar también ancho de borde, algo rápido, darle como 0.5. Entonces podemos tener aquí a 0.5, no podemos dar tan bien algo de altura para eso. Y podemos poner algo de altura fija o puedes hacer algo de altura usando porcentaje y dimensiones desde la pantalla. Por lo que no podemos dar como por ahora, altura fija porque no está afectando de todos modos, cuando tienes diferentes tamaños móviles. Entonces lo vamos a dar como por ejemplo, 50. Y así tendremos como algún relleno para empujar el contenido dentro del like para no ser arreglado aquí o exactamente en los bordes de la entrada. Podemos darle algo así como ocho píxeles para relleno. Y también podemos dar algo de coloración para la frontera y también algún fondo como quieras o como quieras darle estilo. Entonces como ves, tenemos como esta entrada, podemos cambiar esto de relleno top para ser solo bateo. Por lo que 60 es demasiado, por lo que podemos mantenerlo como una parte superior acolchada. Pero podemos poner aquí el relleno primero. Y el relleno será de 10. Y luego ponemos la parte superior acolchada, y luego la parte superior acolchada se solapará sobre este relleno. Entonces tendremos padding top 60, y de otros lados serían 10, 10, y de abajo, será exactamente como lo hacemos con HTML y CSS. Se puede agregar, se agregarán algunas otras propiedades las cuales se pueden ver en la documentación. Hay un montón de propiedades para este insumo. uno de ellos le gusta algo llamado placeholder, algún valor predeterminado, editable o no importante para autofill muchas cosas. Por lo que también podemos agregar algo que se puede llamar Marcador de posición. Por lo que puedo poner aquí un inmueble llamado tenedor del lugar. Y en el lugar holder se puede definir un texto por defecto. Entonces puedo decir aquí, buscar una película o TV, como esta, pelicula de oleada o programa de televisión. Entonces de esta manera, tendremos placeholder y cuando elimines el estado predeterminado, como cuando tengamos como algún valor indefinido, entonces tendremos este placeholder así. Por lo que puede ser capaz de escribir directamente. Por lo que el tenedor del lugar mostrará cuando no haya nada en la entrada. Entonces para enviar el resultado, necesitamos también algún botón aquí, como para el usuario que pueda enviar el valor que ingresó y luego obtendrá los resultados de las películas. Entonces en ese caso, también podemos sostener todo esto, poner esta entrada dentro de ti. Por lo que volveré a dar otra vista y tal vez podamos darle un nombre como forma. Y esta forma me sostendrá esa entrada de texto. Volveré a cerrarlo así. Y luego aquí, esta vista, voy a poner otro componente el cual será opacidad tocable, exactamente como lo hicimos con el icono de búsqueda aquí en la barra de navegación. Entonces pondré también esa opacidad tocable, algo así. Y en prensa no, no vamos a tener un navegar, pero vamos a tener algo más para que podamos mantenerlo por ahora vacío y podemos tener tan bien como ícono. Por lo que necesitamos importar múltiples cosas. Una de ellas es la opacidad tocable, que tenemos de React Native. Y además necesitamos importar el ícono y el ícono, podemos importarlo exactamente el mismo ícono que usamos en la barra de navegación. Por lo que lo pondré aquí también. Entonces vamos a guardar todo y luego veremos eso, está bien, el ícono viene aquí. Por lo que necesitamos de alguna manera cambiar el icono para estar cerca de ese componente. Entonces, eliminemos ese color en este ícono para verlo más claro. Está bien, ahora es negro. Por lo que necesitamos poner como algún estilo para que este contenedor mantenga la vista del formulario y el botón cerca uno del otro. Por lo que antes que nada, iré al estilo del contenedor y le daré algunas propiedades. Una de esas propiedades será la dirección flex si recuerdas ponerlas cerca uno del otro. Por lo que voy a decir aquí, dirección flex será rho. Entonces de esa manera estarán cerca uno del otro, pero ahora son AGI. Por lo que también podemos alinear los ítems para estar en el mismo nivel juntos. Por lo que estarán alineados en el centro. Por lo que necesitamos de alguna manera poner esta entrada más aquí y el botón Buscar de este lado. Entonces la vista de esta forma, puedo darle como algunas propiedades especiales, por ejemplo, que pueden ser capaces y ayudarnos a hacer algún espaciado para esa entrada. Entonces antes que nada, iré aquí y daré un formulario, la clase de formulario que definí en la parte superior, si recuerdas. Y una de esas propiedades será una base flex ser auto. Y también necesitamos otra perpetuidad se llama flex a chica. Y este flex grow será uno. Y también necesitamos tener algo como lo ves aquí, relleno, ¿no? Entonces podemos empujar, el libro de texto está un poco alejado de la entrada. Por lo que podemos poner algo de relleno justo, donde puede ser como algo así como ocho píxeles. Por lo que de esa manera, están alineados uno cerca del otro. Y también tienen como, como el botón está aquí. Entonces como ves base flex, se llama Auto. Está dando como el flex para ser dinámico de esta forma y obtener el resto del espacio de con este Item is booking. Por ejemplo, esta opacidad tocable es sólo reservar, digamos cinco o 10 píxeles. Pero aquí este insumo se llevará el resto. Entonces diciendo flex basis auto y flex grow one. Por lo que significa que tome el resto del espacio y lo alinee de esa manera. Y damos derecho de bateo para no dejar que esta entrada se pegue a la opacidad tocable. Entonces lo último que necesitamos manejar como algo en presentar. Entonces para ese botón, tan tocable opacidad que tiene al presionar y necesitamos manejar el onsubmit para eso. Por lo que tendremos algún método el cual se puede llamar y presentar del valor de la entrada que se ingresa en la entrada. Y para eso onsubmit, como rápido y hazlo como letra mayúscula en Submit. Puedo definirlo en la parte superior. Por lo que podemos tener como resultados y los datos serán siempre una resuelta y llamando a nuestro servicio. Entonces de esa manera, definiré otra constante que se puede llamar onsubmit y que será como una función. Y esta función volverá para mí algo así como llamar al servicio que hemos creado antes. Entonces por ahora, voy a console.log el valor que quiero obtener de la búsqueda. Por lo que quiero que el usuario ponga un parámetro de consulta. Por lo que quiero que el usuario ponga alguna consulta y recibo esta consulta y la paso por el servicio como dijimos antes. Por lo que podemos llamar a esto como una consulta. Por lo que ahora voy a la consola log esta consulta también. Pero aquí no tenemos nada, no pasamos ninguna consulta. Entonces de esa manera, voy a usar este texto. Por lo que este texto está cambiando en función del texto de cambio o del usuario aquí. Por lo que podemos tomar este texto y pasarlo también a nuestro método onsubmit. Entonces, vamos a guardar eso. Y podemos abrir nuestra terminal para ver el registro de la consola. Entonces hagámoslo un poco más grande. Y voy a poner algo de valor, como podemos decir aquí, película. Y luego hago clic en el botón Enviar. Como ven, me dieron la película, película así. ¿ De acuerdo? Busca por ejemplo, como una nueva película, algo así. Y estoy obteniendo el resultado en Enviar. Por lo que ahora voy a utilizar sus servicios para agarrar los datos y mostrar que guarda aquí exactamente el mismo componente de tarjeta que usamos en la página de inicio y otras páginas. Entonces de esa manera, veremos que cómo vamos a llamar al servicio en la próxima conferencia. 58. Resultados de búsqueda: De acuerdo, ahora en esta conferencia vamos a hacer una plantilla para mostrar los resultados de la búsqueda. Pero antes que nada, necesitamos llamar al servicio que se encarga de traernos los resultados de búsqueda. Entonces sigue que si recuerdas, hemos creado un servicio que se llama Buscar película o un televisor. Y es pedir dos parámetros, que es una consulta y un tipo. Entonces voy a poner esto también llamado aquí. Entonces cuando haya onsubmit, voy a llamar a este servicio. Entonces tendremos algo así como busqueda película dV, que voy a importar de los servicios. Entonces pondré aquí Importación y luego pondré el nombre del servicio y luego antebrazo. Y luego pondremos como servicios. Y llamaríamos a los servicios de esa manera. Por lo que ahora tenemos la televisión de pelicula oleada. Por lo que esta televisión de pelicula de oleaje me pedirá tener dos parámetros. Primero será la consulta, y la segunda será de cine o TV. Entonces pongamos por ejemplo, película como ahora. Entonces lo que tenemos aquí, película o depende de la API, cómo la estábamos usando. Entonces estaba diciendo, sí, vale, película y TV, así que pasaremos película. Entonces ahora esto me devolverá una promesa como vimos antes. Entonces te veré entonces y después tendremos los resultados. Entonces llamaremos como esos como una oleada, o podemos llamarlo como un dato. Estos son los datos de búsqueda y estos datos vamos a hacer algo con él. Y si recuerdas para eso estábamos creando otra variable de estado. Y esta variable de estado, estábamos usando en la plantilla. Por lo que voy a decir aquí podemos dar como resultado de búsqueda y esta oleada o resultados, hagámoslo así y luego pongamos resultados de búsqueda para que podamos tener así aquí dichos resultados de oleada. Entonces de esa manera vamos a almacenar toda esta inflamación en ese resultado de búsqueda. Por lo que no podemos tener aquí establecer resultado de búsqueda para ser datos. Entonces de esa manera, tendremos los resultados o el array que fueron devueltos desde la API con las películas reiniciadas o establecidas en los resultados de búsqueda aquí. Entonces aquí voy a utilizar una plantilla que viene de los resultados de búsqueda. Porque hablamos de eso varias veces y te dije que tenemos como múltiples formas de organizar todas estas plantillas. Lo hablamos como cuando está cargada, cuando no está cargada y cuando hay error, voy a pegar la plantilla que ya preparé. No te expliques, y te daré el código. Por lo que he creado esta plantilla. Esta plantilla tendrá una vista. Estará dentro de la vista desplazable, desplazable. Entonces tenemos aquí una vista que se llama contenedor. Y este contenedor sostendrá la forma y también esa opacidad tocable. Y luego tendremos otra vista donde tendremos los resultados del ítem de búsqueda. Por lo que he creado aquí es u, si recuerdas algo llamado resultado de búsqueda. Entonces estoy revisando aquí. Si hay resultados de búsqueda y la longitud de punto de resultados de búsqueda es mayor que 0, entonces tengo que mostrar una lista plana con sus tarjetas. Si recuerdas, ya lo hemos hecho varias veces cuando estábamos haciendo eso. Guardias en la página de inicio aquí. Para que no tengas que preocuparte por este punto. Sólo una opción que tengo extra, Se llama columnas num, que es como estoy mostrando cuántas columnas en esa fila. Entonces por ejemplo, en el resultado de búsqueda, tendré tres columnas barril. Por lo que no los tendré así desplazable. Yo sólo habré arreglado tres en el móvil y son como si pudiera pasar por ellos. Por lo que también tendrás esa propiedad de datos y el elemento de render. Yo quiero rendirlos como guardia. No los voy a renderizar como cualquier otra cosa. Y el componente de guardia que hemos creado antes, si recuerdas usarlo también en la página principal, tenemos algo así como extractor de claves. Se va a hacer como un acelerador para nuestra búsqueda. Entonces se va y está relacionado con algo como goteo. Por lo que puedes usar extractor y puedes especificar cuál es la clave. Por lo que será el ID del ítem o el ID de la película el cual se devuelva de los resultados de búsqueda. Y también cuando hay ciertos resultados, pero la longitud es 0, entonces eso significa que no tenemos valores ni resultados que coincidan con nuestros criterios. Por lo que podemos probar diferentes palabras clave. Y también si no hay resultados de búsqueda en absoluto, que es el estado inicial de nuestra búsqueda, entonces yo diría teclear algo para empezar a buscar. Entonces después de eso, tenemos algún componente que se llama error. Y en caso de que haya error, entonces voy a mostrar el componente de error que hemos creado antes también. Entonces aquí tenemos como algún error por defecto es decir, algo salió mal, etc. Así que esta es una plantilla. Hablamos de todo esto antes. Simplemente hago algunos EFS diferentes, algunos comentarios para que no tengas, como cualquier error o cualquier error. Todos ellos están en zona segura de u. bien, vamos a la búsqueda y voy a guardar mis resultados. Bonito. Tenemos aquí teclear algo para empezar a buscar. Entonces voy a escribir como por ejemplo, Nuevo. Y presionaré el botón Buscar. Agradable, me puse directamente, eso es alts. Entonces tenemos aquí algo y tú calibres y tú groovy, etcétera. Entonces cuando hago clic en una de esas películas, como ven aquí, voy al detalle de la película. Entonces puedo conseguir también que haga el cebo detalle porque estoy usando la tarjeta que Dios tiene opacidad tocable que hemos creado. Y al hacer click en él, navegarás hasta los detalles. Eso es muy genial. Y este infierno, vemos que estamos usando la dinámica de React nativa de crear componentes. Está bien, Niza. Entonces voy a hacer viejo a alguien, que no se encuentra. De acuerdo, Nadie es viejo que coincida con tu área. Trata de encontrar nuestras diferentes palabras clave. Entonces cuando eliminamos todo y ponemos como buscar, ok, Esto no responderá porque no estamos enviando ningún resultado y no tenemos ningún resultado. Por lo que ahora tenemos nuestra, nuestra plantilla lista con las películas y los guardias. Simplemente hay cosa pequeña que aquí están los guardias están muy cerca el uno del otro. Por lo que podemos dar a su margen de guardia fondo. Para que podamos ir a ese componente de guardia. Y si recuerdas ese componente de guardia tiene algo llamado contenedor, que será la opacidad tocable. Y en el contenedor podemos darle un valor o un botón de margen. Entonces no podemos decir aquí margin-bottom, le damos como cinco. Entonces de esa manera, van a haber lejos el uno del otro. Podemos darle más, por ejemplo, ocho para ser más notorio. Por lo que ahora tenemos de nuevo nuestra API funcionando. Todo está bien. Entonces de esa manera tenemos la plantilla de búsqueda. Nada puedes ni crear nada, ¿verdad? ¿ Justo así? Tengo sólo una nueva clase aquí que se llama artículos de sobretensión. Dé relleno alrededor de cinco, donde sostendrá el contenedor de elementos de búsqueda solo para empujar el contenido un poco lejos del contenido aquí. Entonces no podemos tener algo nuevo. Y entonces me buscará para no estar pegando en los bordes de la forma. Entonces eso es todo. Estos son los ítems de búsqueda. Voy a adjuntar su código en la próxima conferencia para que pueda usarlo y averiguar si hay como si está coincidente con su código. Y puedes trabajar en ello fácilmente sin ningún problema y sin ningún problema. 59. Fusión de películas y resultados de búsqueda de televisión: De acuerdo, Como recuerdan, hemos creado la televisión de cine de búsqueda y utilizamos sólo para las películas. Entonces si queremos usar múltiples, como necesitamos mu's para cine y TV. ¿ Cómo podemos hacer eso? Si recuerdas, estábamos usando algo que se llama prometido todo. Por lo que es posible casarme para mí promesas múltiples. Entonces no podemos hacer eso aquí también. Entonces diré aquí, prometer punto, y luego Todo. Y entonces puedo tener aquí dos fusionados. Y entonces puedo tener aquí Servicios, matrimonio juntos. Entonces primero, será la televisión de la película de búsqueda, pero para la película y la otra con puede ser como para la televisión de cine de búsqueda pero para la TV. Entonces en ese caso, estoy llamando al servicio 2 veces para la TV y la película. Y entonces puedo fusionar los resultados de alguna manera, porque aquí los resultados vendrán para mí como array de dos ítems, si recuerdas, uno es películas y otro es los visuales. Entonces no puedo decir aquí como bien, voy a llegar aquí películas como primer gol porque busqué película y también voy a llegar aquí dv. Por lo que de esta manera, voy a conseguir dos artículos son dos miembros aquí. Entonces de esa manera tenemos una matriz para que podamos poner todos esos entre paréntesis para no tener ningún error. Y entonces podemos llegar a esos datos, que los tenemos aquí, y fusionarlos juntos. Para que podamos fusionar películas y TV juntos. Entonces, cómo podemos hacer eso fácilmente para fusionarnos es bastante simple. Podemos simplemente hacer datos. Podemos definir una constante la cual se llama datos. Y estos datos se mantendrán como array usando operadores, como operadores de spread. Entonces tendré películas juntas y también los televisores. Entonces de esa manera, estoy fusionando dos matrices juntas para estar en una sola matriz. Entonces en ese caso, cuando guarde, obtendré los resultados de esta promesa punto todo. Y luego los estoy fusionando en una matriz. Entonces vamos a darle un estilo al código un poco. Agradable. Ahora hemos ido a dar servicio dos veces y luego estamos fusionando esos datos para luego enviarlos a sus resultados de búsqueda. Entonces en ese caso, voy a buscar algo aquí. Te voy a poner. Y luego obtendré resultados mezclados entre la televisión y también las películas. Y normalmente la televisión estará al final porque dijimos aquí que queremos mostrar esa televisión después de las películas. 60. Tema de aplicación: el título de esta conferencia, mejor sabes a lo que me refiero? Es decir que podemos agregar algo de coloración para nuestra aplicación sin tener estos colores codificados, que creamos antes en navbar y otros componentes, los colocamos cuidadosamente con algunas variables donde podré cambiar el tema de mi aplicación. Entonces de esa manera, puedo tener una variable externa y puedo leer de ella? Y luego configuré mi tema basado en algo así como en esos colores. Entonces, en primer lugar, podemos ir a los archivos de la aplicación y crear algún archivo que se llama tema. Por lo que podemos crear carpeta en el nivel raíz. Por lo que voy a decir aquí como tema o temas, podemos decir. Y dentro de esta carpeta temática, puedo agregar también como algo llamado colores. Por lo que en estos colores dot JS, tendré mi aplicación leyendo colores de este archivo. Entonces de esa manera, puedo crear también una constante. Y esta constante, puedo darle un nombre como colores. Entonces podemos decir aquí const. Y en este curso no podemos decir que sean colores y estos colores serán un objeto. Y puedo decir dentro de este objeto que voy a definir los colores que necesito para mi aplicación. Entonces esos colores, ya los he creado. Al igual que por supuesto puedes crear tus colores como quieras. Entonces creo algo como podemos decir, tengo, por ejemplo, fondo, que será como este, negro, blanco, gris claro, color primario también, que será este azul el cual tenemos para el botón Play. Por lo que también puedes agregar temas para tu aplicación de una manera que pueda ser diferente de cliente a cliente. Entonces después de eso, es mejor dar mayúscula para las exportaciones. Y luego podemos exportar default, como podemos decir export default, y decimos colors. Por lo que de esa manera, podremos importarlo en algún lugar de nuestra aplicación. Entonces después de eso, voy a ir a mi ejemplo donde estábamos, estábamos bastante bar en bar. Tengo, por ejemplo, algún problema con el color que está codificado. Conseguí reemplazarlo por un color blanco. Por lo que iré aquí y tendré aquí Importar, y luego me pondré como por ejemplo, colores. Y estos colores vienen de Theme Colors como vimos antes. Por lo que ahora iré y usaré estos colores exactamente para poner mis colores dentro de esto. Por lo que voy a tener aquí en lugar de color FFF, voy a decir colores punto blanco por ejemplo. Entonces de esa manera, mi aplicación donde NDR en el camino correcto que voy a tener, la navegación será de color. Entonces como ven aquí. Por lo que ahora pondremos todos estos colores, por ejemplo, para esta navegación en algún lugar de aquí. Y por supuesto que no podemos venderlo para todos los colores codificados y colocarlos en nuestra aplicación. Por ejemplo, iría al botón Play y luego diré aquí que no quiero aquí, también color, así que necesito importar los colores también. Por lo que tendré aquí importar colores, tema de colores. Entonces podemos tener también de la misma Exactamente manera como lo hicimos antes. Entonces de esa manera, tengo aquí que los colores serán de color blanco y también el color del botón. Si recuerdas, aquí codificamos un poco de color. Por lo que también podemos colocarlo con algunos colores, como un color primario. Entonces podemos tener algo llamado primaria. Y de esa manera, mi aplicación tendrá un color primario de este color. Por lo que puedo usar el color primario en todas partes de mi aplicación. Entonces ahora voy a ir como aquí, dos colores voy a cambiar, por ejemplo, a esto podemos hacer un 000. Y en ese caso, todo el uso de colores de este color cambiará en la aplicación. Entonces de esa manera, puedes tema tu aplicación de una manera adecuada sin tener un triple, como si tuvieras que cambiar nuestro color en todas partes para ser el mismo. Por lo que no usaré este color codificado duro. Voy a utilizar sólo como los colores no primarios. Entonces de esa manera, solo necesitas cambiar esos colores si quieres entregar la aplicación a otro cliente? Pero quieres cambiar en algún lugar del diseño y los colores. Por lo que al final de esta sección, no verás como el código con colores codificados. Lo tendremos como con el tema, pero no te lleves tanto tiempo a la venta en la conferencia. Entonces lo voy a hacer rápido y adjuntar el código para ti en la aplicación o los recursos de estas conferencias. 61. Correcciones de estilo: De acuerdo, ahora estamos en alguna conferencia donde vamos a arreglar el estilo. Entonces el estilo, como ven aquí, tenemos algunos bichos. Entonces por ejemplo, aquí, el título está marcando demasiado al teléfono. Entonces arreglemos eso y hagamos como algún trabajo fácil para esta conferencia. Entonces ahora voy a tener que hacerlo, están en, en su mínimo tenemos este texto y este texto, tiene algo de estilo para que podamos darle también, algo de bateo alrededor. Para que podamos tener algo de espacio a su alrededor. Por lo que no podemos tener algo como batear en general o malo en así. Y damos algunos espacios. Entonces de esa manera tenemos que moverlo antes porque entonces agregando botón sería todo lo boride. Entonces voy a poner aquí como decir entonces, y vamos a intentarlo para ver si está funcionando bien. Está bien, está bien. Supongo. Ahora tenemos como mejor esto y podemos reducir un poco el botón de bateo para que podamos ponerlo 15. De acuerdo, creo que ahora es lindo. De acuerdo, ahora vamos a comprobar si tenemos otros bichos de estilo. Entonces podemos ir aquí y podemos ver ojos aquí. No tenemos nada. Tenemos en la navegación o cuando vamos a la búsqueda que tenemos aquí, la coloración de este ícono no es tan clara, por lo que es amplia. Podemos ponerlo como algún color medio, que puede ser gris claro por ejemplo. Para que todos podamos ir a la aplicación o a la barra de navegación. Y en la barra de navegación utilizamos este ícono. Entonces tenemos aquí chatter von back. Entonces aquí ponemos un gris claro como éste. Entonces podemos hacer esto como un color más oscuro, por ejemplo, puedes ponerlo tres Cs, vale, bonito. Ahora es mejor así. Y también si vamos a alguna página detallada, está bien, todavía la podemos ver. Está bien. Sí, está bien. Está bien. Otras correcciones de estilo, no tenemos otras correcciones de revestimiento. Todo está bien. Nuestra aplicación está funcionando sin problemas y fácilmente sin ningún problema. Y si encuentras algún insecto, sería genial denunciarlo a la Q y a y preguntas. Podemos arreglarlo directamente, y estaría muy feliz de arreglar todos esos errores.