Espero que estés fantásticamente bien y ready porque hoy tenemos curso de desarrollo de aplicaciones móviles con React Native.
Te voy a explicar paso a paso cómo hacer que tu página, bueno tu página, que tu aplicación tenga navegación con enrutado.
Vamos a ver rutas, vamos a ver cómo puedes navegar de una página a otra o de una pantalla a otra.
Diferentes formas de hacerlo y en el camino vamos a aprender cosas interesantísimas como enseñar iconos,
que parece una tontería pero todavía no hemos enseñado iconos.
Así que vamos a ver, vamos a ver muchas cosas.
Vamos también a utilizar Tailwind, que me lo habéis pedido mucho.
¿Que queréis utilizar Tailwind? No te preocupes.
Vamos a utilizar Tailwind en nuestro curso.
Vamos a ver cómo podéis utilizar Tailwind para vuestra aplicación nativa con React Native.
Vamos a ver rutas estáticas, rutas dinámicas.
Cómo podéis hacer navegaciones nativas, ¿sabes eso de que para ir para atrás le das con el dedo?
Pues eso lo vamos a ver también.
Y también cómo utilizar pestañas, tabs. Todo eso lo vamos a ver hoy.
Pero una de las cosas más interesantes que vamos a ver hoy es que, no sé si conoces las Apple Vision Pro,
este pedazo de cacharro que cuesta 4.000 millones de euros.
Este cacharro de aquí, ¿vale?
Las Apple Vision Pro es un producto que sacó Apple, que ahora ya está disponible en más mercados.
Aquí en Europa acaba de llegar, hace poco.
En algunos países, en España no, porque en España como somos los pobres de Europa, pues no lo han llegado aquí.
Bueno, pues ya sabéis que hay un montón de aplicaciones así como espaciales.
Y si os digo que la aplicación que vamos a hacer nosotros funciona, funciona con las Apple Vision Pro, sin ningún problema.
Pues lo vamos a ver, lo vais a ver y es bastante, bastante interesante.
¿Es el primer episodio del curso? Ya tenemos, ya hicimos la semana pasada, iniciamos el curso con lo básico para verlo primero.
Y lo tenéis disponible aquí, por si lo habéis perdido.
Curso de React Native para principiantes más aplicación desde cero, ¿vale?
Esto es lo que hicimos la semana pasada. Este es el que hicimos hace dos años y el de ahora lo tenemos más actualizado, ¿vale?
Así que tenemos aquí React Native desde cero. Este es el que hicimos la semana pasada y hoy vamos a seguir esa base.
Pero bueno, que si no lo viste, yo no creo que pase nada porque vamos a repasar alguna cosa.
Hay otras cosas que las vamos a tener que hacer desde cero para poder utilizar el enrutador.
Así que no hay ningún tipo de problema y ahora veremos un poquito esto.
¿Es con Expo? Sí.
Hay mucha gente que con esto de Expo, hostia, que sí.
Pero ¿qué es mejor? ¿React Native Clip o Expo?
Pero amigos, es que ya la gente de React Native os lo está diciendo clarísimo.
Si es que ya no hay discusión.
La gente de React Native os lo está diciendo aquí ya.
Mira, os lo dice claramente aquí.
Empieza rápidamente con un framework y te dice,
para construir una nueva aplicación de React Native, recomendamos un framework como Expo.
Y os digo más.
En el caso de que más adelante llegue el momento de que Expo nos interesa,
¿no? Que dices, ostras, no quiero seguir utilizando Expo.
Lo bueno es que con Expo, digamos que puedes salirte de Expo y entonces te lo prepara todo
para que solo tenga las dependencias y tal.
No es recomendable, pero bueno, puede ser que algo muy avanzado no lo podáis hacer con Expo.
Yo ya os digo yo que lo evitaría al infinito.
Pero en el caso que pase te puedes llegar a desacoplar de Expo si fuese necesario.
Sí, eyectar.
Exacto, eyectar.
Es que la palabra eyectar suena muy rara.
Lo que pasa es que Expo ya evolucionó como para hacer mucho,
pero aún hay casos complejos donde Expo sigue siendo un problema.
A ver, yo cada vez, cada vez lo veo menos, menos problemático.
Lo veo bastante, bastante preparado.
Antiguamente sí que era algo que a la mínima, a la mínima no,
pero cuando se complicaba mucho el proyecto.
Pero ahora yo lo veo bastante, bastante preparado.
Midu, ¿qué opinas de usar Laravel para el backend?
Que me parece fantástico.
Si a ti te gusta Laravel para el backend, tremendo.
Pero ya está.
O sea, es que tanto Laravel, Python, Node.js, cualquiera, está perfecto.
Si lo importante no es tanto...
Al final las tecnologías, casi todas te van a servir sin ningún problema.
Si tienes el conocimiento, ya está.
Bueno, yo empecé con Clip porque Expo era malísimo.
Ahora estoy usando Expo y me parece muy buena la experiencia.
Bueno, es que ha cambiado muchísimo.
Ha cambiado muchísimo, muchísimo.
Entonces, vamos aquí al proyectito.
Os digo cositas.
Primero, tenéis todo el proyecto de código abierto, que lo han pasado por el chat.
Y si no, pues en la descripción del vídeo, cuando lo subamos, lo tendréis, ¿vale?
Aquí, en este proyecto, tenéis la primera cosa que hicimos.
O sea, la base del proyecto lo tenemos por aquí.
Voy a hacer una cosa, como no lo suelo hacer, pero voy a hacer clase 2.
Lo voy a poner...
We Switch Clase 2, ¿vale?
Vamos a crear una rama para la clase 2.
Y así, pues tendremos una rama para la clase 2.
Y ya está.
Y en esta clase 2, ¿qué vamos a ver?
Vamos a ver cómo podéis hacer navegación entre pantallas.
Porque ahora nuestro proyecto, si lo levantamos, vamos a ver que solo es una página.
Mira, voy a abrir el simulador a ver si aparece...
A ver, a ver...
¡Ah, mira!
Se me inicia con las Apple Vision Pro.
¡Ojo!
¡Ojo!
Pues fijaos en una cosa, que esto os va a llamar mucha atención.
¡Hostia!
XRAN, no sé qué, ha encontrado un problema.
Mmm, pues no, pues igual...
Igual no funciona, espérate.
Ah, mira, sí que va a funcionar.
Sí que va a funcionar.
No sé por qué, ha habido un error.
Por lo más interesante, una de las cosas más interesantes que os quería comentar hoy,
¿vale?
Es que el proyecto que hicimos, que hoy le mejoraremos bastante los estilos, no os preocupéis.
Pero este proyecto que hicimos funciona perfectamente, sin ningún tipo de problema.
Funciona, y fijaos que lo podéis hacer más grande, más pequeño...
Bueno, esto es como funcionan las Apple Vision, ¿vale?
Lo podéis mover para un lado o para el otro.
Funciona sin ningún problema y además recupera todo el ancho en las Apple Vision Pro.
O sea que tanto con React Native podéis hacer aplicaciones también para las Apple Vision Pro
y que funcionan bien, ¿ves?
Puedes hacer el scroll, podrías interactuar, luego lo veremos, ¿vale?
Luego interactuaremos, lo veremos y todo esto.
Pero para que veáis cómo de potente es, que muchas veces, ah, no sé qué, bah...
Es bastante interesante.
Y lo podéis mover y fijaos que pues va perfecto, va perfecto.
Luego lo volvemos a ver, ¿eh?
Es que esto es una cosa buena que si tenéis un Mac podéis instalar como diferentes simuladores.
Podéis, por ejemplo, los iPhone...
Voy a poner el iPhone 15, porque con las Apple Vision Pro pues es un poco raro, ¿vale?
Que lo vayamos desarrollando.
Y con el iPhone 15 vamos a tener suficiente.
Pero bueno, para que veáis que es posible.
Que no es que esté mal, ni mucho menos.
Ah, mira, tenemos aquí expo.
Lo voy a cerrar, ¿vale?
Le voy a dar aquí a la i, porque la i, fijaos que aquí nos dicen, si le das a la i, abres el simulador de iOS.
Vale, pues ahí lo tenemos.
Y ya tenemos aquí nuestra aplicación.
Voy a moverme, ¿vale?
Voy a moverme para no molestar.
Me voy a poner por aquí, me voy a poner un poquito más chiquitito.
Para que podáis ver perfectamente la preview.
Y ahora sí vamos desarrollando nuestro proyecto.
Vamos a ver un poco por encima cómo funcionaba esto.
Tenemos un proyecto de expo, ¿vale?
Con todas sus dependencias.
Fijaos que tenemos React, React Dome, React Native, React Native Web.
¿Por qué tenemos React Dome?
Si eso es para la web.
Porque entre otros sitios también lo podéis abrir en la web.
¿Vale?
Si le dais a la V...
Hola, Midu.
Tengo una duda con la Akaton de Vercel.
¿Puedo usar Gemini de Google?
Puedes usar Gemini de Google sin ningún problema.
Puedes utilizar Gemini de Google.
¿Vale?
Bueno, ahora no sé por qué no...
Ah, vale.
Está ahí.
Creo que nos cargamos el scroll.
¿Veis que nos cargamos aquí el scroll de la página esta?
Pero bueno, que también tendríamos la versión web.
Habría que ajustar algunas cosas.
De hecho, se puede hacer que algunos componentes funcionen solo para web.
Otros que sean solo para Android.
Otros que sean solo para iOS.
Eso se puede hacer cambiándole como la extensión.
Podríamos hacer que este componente...
Podríamos hacer el GameCard.ios.jsx, ¿vale?
Y .android.jsx.
Y cargaría solo dependiendo del dispositivo un componente u otro.
Esto es muy útil para justamente hacer que tu aplicación funcione perfectamente en todos los dispositivos.
No vamos a estar haciendo esto constantemente, pero puede ser que más adelante sí que le echemos un vistazo
para ver cómo podemos cambiar, modificar algún comportamiento en concreto.
Este era nuestro proyecto, pero está muy soso.
Está muy soso el proyecto porque no tiene navegación, porque los estilos están un poco así, de aquella forma.
Bueno, pues a ver, no te preocupes porque vamos a instalarle para mejorar el tema de los estilos.
Lo primero que vamos a hacer es instalar Tailwind.
Y es que sí, para desarrollar aplicaciones móviles también podéis utilizar Tailwind.
Es totalmente opcional y de hecho yo lo voy a instalar solo para enseñaros que se puede instalar, ¿vale?
Pero no es obligatorio.
Si no te gusta Tailwind, no lo hagas, no lo instales.
Eso sí, ten en cuenta que a día de hoy la versión actual es la versión 2, pero pronto, aunque el pronto está aquí entre comillas,
va a salir la 4.0 y que puede ser que se instale un poco diferente.
Pero es que el pronto lleva mucho tiempo así, va a salir pronto, va a salir pronto.
Lleva tanto tiempo que yo no sé si al final va a salir o no va a salir.
Así que vamos a instalar NativeWin, que es lo que nos va a permitir utilizar Tailwind en nuestra aplicación de React Native.
¿Y por qué no podemos utilizar directamente React Native?
No podemos utilizar directamente React Native porque, claro, los estilos aquí no van con CSS.
Si os fijáis, los estilos aquí se tienen que poner como en una propiedad style que se tenía que poner aquí fuera.
Y esto, este NativeWin lo que hace es que tú utilizas Tailwind, pero hace como un paso de compilación
que va a transformar los classnames en unos estilos en línea que sí que funcionan con React Native.
Así que esa es la razón por la que no puedes instalar directamente Tailwind.
Necesitas como este paso intermedio.
Entonces, vamos a instalar NativeWin.
Vamos a instalar primero el NativeWin.
Yo voy a utilizar la versión 2, pero os digo que va a salir la 4 próximamente.
No sé cuándo, pero saldrá.
Le ponemos un MPM install.
Y como esto puede tardar un poquito, voy a leeros mientras, un momentito.
¿Afecta el rendimiento?
No afecta el rendimiento porque lo que ocurre es que hace la compilación.
Entonces, cuando se compila, se transforma.
No va a haber ningún tipo de problema en cuanto a rendimiento porque se transforma y ya está.
Vale, ya hemos instalado el primero.
Vamos con el segundo paquete.
Necesitamos otro paquete que, obviamente, este sí que es el de Tailwind.
Esto es importante.
Vamos a ponerle que instale la versión exacta.
¿Veis que pone Save Exact?
Ahora os explicaré por qué pasa esto.
Vamos a poner Tailwind CSS 3.3.2.
Tenemos que específicamente instalar esta versión.
Esto lo pone la documentación de NativeWin porque parece ser que a partir de esta versión hicieron un cambio interno en Tailwind que lo rompía todo.
Y ponemos que ponga la versión exacta porque si no, si nos vamos en el package.json, ¿veis este caret?
Este caret lo que hace es que va a instalar esta versión o una posterior siempre que no sea una major.
O sea, por ejemplo, va a poder instalar la 8.58 si está disponible.
En cambio, con lo de Tailwind evitamos que aparezca este caret para que no instale una superior porque queremos exactamente esa versión.
Muy importante para no tengas errores.
Si no, pues te puede fallar por un montón de sitios y te lo digo porque yo me volví loco como diciendo, pero ¿por qué esto no funciona?
Bueno, ahora, para inicializar la configuración de Tailwind, esto es como se haría con cualquier proyecto.
Con Tailwind, npx, Tailwind, CSS, init.
Y esto te va a crear el archivo de configuración mínimo que necesitas.
Lo tenemos ahora mismo, no lo veis, pero está aquí.
¿Veis aquí? Me lo ha creado.
Está vacío ahora mismo, no tiene la configuración que necesitamos, pero esto lo arreglamos ahora.
¿Por qué?
Le tenemos que indicar dónde está nuestro contenido.
Y nuestro contenido, si miramos un poquito aquí, que tenemos componentes, tenemos este app.
Bueno, pues le vamos a decir que cargue el app con todas estas extensiones, dentro de components.
Y voy a poner que más que screens, voy a poner dentro de la carpeta app.
Todavía no la tengo, esta carpeta app.
Si veáis aquí, no tenemos la carpeta app, pero sí que tenemos la de components, que la tenemos aquí.
Y esta carpeta app luego la vamos a crear para el enrutado.
Pero bueno, como más adelante la vamos a necesitar, pues yo ya la pongo para que no se nos olvide.
Aquí es donde le indicamos qué componentes tiene que ver para transformar los estilos de Tailwind en otra cosa.
Y ahora, nos falta un detalle más.
Como os digo, hay un paso de compilación donde entra este nativewind para transformar los estilos de Tailwind a algo que entienda React Native.
Así que aquí en la configuración de Babel, tenemos que poner que entre los plugins hay uno que es el de nativewind barra Babel.
Que así lo utilizará y transformará correctamente los estilos.
Y ahora que tenemos esto, vamos a probar a ver si nos funcionan ya nuestros estilos de Tailwind.
No sé, en el Game Card, por ejemplo.
Vamos al Game Card.
Y aquí teníamos en la View, ¿vale?
Teníamos aquí estos estilos.
Los voy a quitar un momento.
Guardamos.
Vale.
Casi no se ve, pero aquí podéis ver que ha perdido la separación.
Fijaos.
Separación.
Si los borro, desaparece esa separación.
Esa separación.
Vamos a poner aquí un ClassName.
Vamos a poner aquí un ClassName.
Y vamos a empezar, yo que sé, vamos a ponerle que tenga un poquito de diferente el fondo.
¿Vale?
Y ya veis que he puesto este ClassName con VG Grey.
Y veis ahí que está como un poquito un gris claro.
No sé si se ve mucho.
Os lo voy a poner con un gris más clarito para que lo veáis claro.
Bueno, ahora se ve demasiado claro.
Pero fijaos en dos cosas.
Uno, que funciona en los estilos de Tailwind que ya conocéis.
Que eso es tremendo.
Y que además tenéis el autocompletado si tenéis la extensión de Tailwind.
O sea, si hacéis VG, veis que tenéis ya el autocompletado.
Y fijaos que, yo que sé, selecciono este, lo guardo y ya aparece.
Y es inmediato.
O sea, la experiencia de desarrollo de tener Tailwind, que los cambios pasen casi en tiempo real, es una cosa loca.
Es una cosa loca.
O sea, es que me parece increíble.
No sé qué os parecerá a vosotros.
Pero a mí, el hecho de poder hacer una aplicación nativa así, como lo estamos haciendo, que vaya tan rápido.
Mira, puedes hacer aquí, podemos hacer así, pim, pam.
Bueno, a ver un poquito más.
Vale.
Bueno, aquí hay un problema porque veo que este GameCard, estos estilos, luego los arreglaremos.
Porque seguramente el estilo este, ves que aquí no está bien el radius y tal.
Bueno, por ahora no pasa nada.
Luego ya nos preocuparemos porque lo cambiaremos esto de forma.
Lo haremos de otra forma.
Pero por ahora lo dejamos así y ya está.
De hecho, de hecho estoy pensando, bueno, para que veáis que también podéis utilizar el flex, aunque esto lo romperíamos.
Mira, vamos a mejorar un poco los estilos, ¿vale?
Para que veamos esto, voy a poner aquí el view, lo voy a poner y así que aparezca al lado.
¿Vale?
Aquí aparecería aquí al lado.
Claro, todo esto del GameTitle que habíamos puesto por aquí, este GameTitle que tenía aquí los estilos.
Estos estilos ya los podemos quitar y podríamos, o podríamos, podemos utilizar los dos, ¿eh?
O sea, no os creáis.
Podéis utilizar los dos.
¿Veis que podéis poner aquí los estilos del class name y también los del style?
Los dos son compatibles.
O sea, que no penséis que tenéis que elegir entre uno y otro porque los dos funcionan correctamente.
¿Vale?
Luego aquí con el score.
El score este, vamos a crear un nuevo componente para el score porque lo vamos a necesitar.
Y ahí pues podremos ver más cosas de Tailwind.
Y aquí pues nada, también vamos a poner un estilo MT2, ¿vale?
El GameDescription ya veis que es muy bestia.
Vamos a hacerlo un poquito más corto poniendo aquí un slice que solo enseñe 100 letras, ¿vale?
Y luego ya aquí deberíamos poner el flesh ring, ¿vale?
El flesh ring 0.
Bueno, luego lo iremos arreglando, no os preocupéis.
Ahora sale un poco raro, pero porque tenemos que estilar un montón de cositas.
Luego le damos una vuelta a esto para que quede mejor, pero por ahora lo dejamos así.
Y nos centramos más en la navegación porque luego los estilos vamos a tener que cambiarlos bastante por la navegación.
Entonces no vale la pena que me ponga ahí y hacerlo perfecto.
Lo que sí que voy a hacer es el componente score, ¿vale?
Voy a hacer el componente score.
Un componente donde básicamente la puntuación, pues dependiendo de la puntuación que aparezca,
se va con un color u otro y todo esto.
¿Por qué?
Porque así también lo vamos a utilizar en más de un sitio y vamos a ver cómo podéis hacer también estilos que sean dinámicos,
dependiendo de los números que se le pasan, para que no siempre sean tan estáticos.
Entonces aquí vamos a tener un view y vamos a tener el texto dentro y le vamos a pasar dentro el score, ¿vale?
Y aquí vamos a hacer un max score, ¿vale?
Este componente score es el que vamos a utilizar.
Es que ahora la puntuación se ve como muy flojita.
Vamos a poner aquí score, le vamos a pasar ese score, esto sería game.score.
Y el max score es sobre 100, ¿vale?
Así que hacemos aquí...
Ay, tendría que ser aquí 100, ¿ok?
Vale, ahora hemos perdido los estilos, pero ahora los arreglamos en un momento.
Vamos a hacer que sea como la puntuación de Metacritic que aparece así como redondita y todo esto.
Vamos a hacer que salga full, justify center, item center, para centrarlo todo.
Y en el texto vamos a poner que sea bastante grande, font bold, text white, ¿vale?
Vale, ahí teníamos eso, pero nos faltaría que dependiendo de la puntuación salgan verde, en amarillo o en rojo, ¿no?
Si la puntuación es muy buena sale en verde, si es regular, en amarillo.
Y si es mala, en rojo.
Pues para eso podemos hacer aquí una función que sea get colors o get colors.
Bueno, get colors.
Bueno, colors porque dependiendo...
Sí, voy a hacer colors.
Y mira, aquí podéis hacer...
Bueno, hay mucha gente que aquí le gusta, por ejemplo, utilizar switch.
A mí no me gusta, no me gusta mucho utilizar switch.
Pero bueno, aquí cada uno que haga lo que quiera.
Lo primero vamos a ver cuál es el porcentaje.
Para hacer el porcentaje dividimos la puntuación con la puntuación máxima.
Por ejemplo, la puntuación, si es un 25 sobre 100, pues hacemos 25 entre 100 y así tendremos el porcentaje.
Y bueno, para que tenga el porcentaje necesitamos multiplicar esto por 100, ¿vale?
Y ahora que tenemos este porcentaje, pues hacemos esto.
Si el porcentaje es menor a 25, bueno, 25, 40.
Vamos a poner, entonces lo ponemos de color rojo.
Vamos a hacerlo así.
Si quieres hacer un switch, hazlo, ¿eh?
O sea, no estás obligado a utilizar el if.
Pero es que me parece mucho más directo el de utilizar el if y ponerlo así directamente.
Y ya está.
Luego, si el porcentaje es menor a 60, devolvemos...
Bueno, vamos a poner 65, ¿vale?
Y si no, por defecto ponemos este caso.
Y ya está.
Ahora que tenemos este color, vamos a pillar aquí el class name, get colors.
Y a este class name.
Fijaos qué fácil, qué fácil es hacer un estilo que sea dinámico.
Claro, en este caso lo malo es que todas las puntuaciones son verdes, ¿vale?
Porque son 96, 96, 96.
Pero bueno, pongamos que pongo aquí que si es más bajo que 98.
Solo para que lo veamos en funcionamiento, ¿vale?
Y más...
¿Veis?
Pues ya lo tendríamos aquí.
Este en amarillo, este...
No sé si se ve.
Sí, sí, sí, sí que ve.
Vale, pues ya veis.
Este será en amarillo, este en verde.
Y en un momento lo tenemos aquí de forma dinámica, ¿vale?
Hemos podido hacer una clase dinámica.
Y en Tailwind todo esto funciona correctamente.
O sea, tremendo, ¿eh?
Te rechazo la vera hasta que no me extraigas el text white.
No porque el tema es que por un tema de contraste...
Fíjate que este amarillo, este amarillo a lo mejor tendría que ser así, ¿vale?
A lo mejor tendría que ser...
Es que no me...
Lo he puesto ahí porque justamente no me sé todos los colores y realmente es de color negro, es blanco y tal.
Entonces puede ser que alguno se tuviera...
Mira, es que este text white...
¡Ah!
Es que fíjate, es que esto aquí no sirve.
Esto, todo esto no sirve.
Es verdad, si esto lo vimos en la clase anterior.
Es que el texto, el texto no hereda el color del padre.
Si queremos cambiarle el color del texto, lo tenemos que hacer directamente en el text.
Importante.
Pues mira, ya lo he quitado.
O sea que ya no tengo ningún problema.
Ponemos getColor y ya está.
Ya lo tenemos arreglado.
Y bueno, le voy a dejar así.
Más que nada para que veamos dos colores diferentes.
Y ya está, ¿eh?
Me ha pasado a veces el agregar clases condicionales de Tailwind me falla con los cambios de estado.
Lo que te puede pasar es que el problema de Tailwind, que esto a veces es un poco tricky,
es el hecho de que no puedes hacer cadenas de texto condicionales.
O sea, tú por ejemplo aquí no puedes hacer algo así.
Esto sí que es problemático.
Si tú aquí pones lo que sea, condicional, no funciona correctamente.
Ese es el problema que tiene Tailwind.
¿Vale?
Pero por lo demás sí que es verdad que a veces aquí en la aplicación nativa, en React Native,
se puede volver un poco loco.
Que tenéis que tener un poquito de cuidado.
Porque le tendrías que dar a la R, porque a veces no funciona bien.
Pero bueno, más allá de eso, en general funciona bien.
Se puede usar CLSX.
Se puede utilizar también, es una funcionalidad sin ningún problema, de JavaScript.
Y todo lo que es JavaScript y todas sus dependencias las podéis utilizar sin ningún problema.
¿Se pueden crear push notifications con React Native?
Por supuesto que sí.
¿Qué diferencia hay entre compilación y transpilación?
Pues en realidad no hay ninguna.
Porque todos los transpiladores son compiladores.
Así de claro.
Todo lo que es un transpilador es un compilador.
De hecho hay muchos que la gente dice que es un transpilador que asimismo se entiende que son compiladores.
Pero mucha gente entiende que un compilador es porque compila a binario
y el transpilador es que transforma de un lenguaje a otro.
Eso sería un poco lo que la gente considera sobre la transpilación.
Y la compilación.
¿Tienes algún curso para entender SCSS de Tailwind?
Pues no, pero vamos a hacer yo creo que un curso de Tailwind pronto.
Si quieres lo hacemos.
¿Ves?
Los compiladores generan binarios y los transpiladores código fuente.
A ver, es una discusión un poco tontería.
¿Vale?
Pero por ejemplo, Babel.
Babel no genera...
Babel es un JavaScript.
¿Qué pone aquí?
Compiler.
¿Vale?
Y esto no genera binario.
Pero es que al final los transpiladores no dejan de ser compiladores.
Así que es indiferente este tipo de cosas.
Lo que pasa es que no sé.
La gente se puso como muy cabezona con ese tema y tal.
Pero bueno, si lo entendéis así, perfecto.
Y si no, pues ya está.
Muy bien.
Pues ya tenemos el score.
Ya tenemos el score.
Vamos a crear el enrutado.
¿Vale?
Porque ahora lo que me gustaría es darle click, que se pudiera ir a diferentes páginas y todo esto.
Vamos a tener que instalar un montón de cosas.
Con expo, utilizamos npx, expo, install.
Tenemos que instalar primero expo router.
Luego react, native, save, area, context.
Esto en realidad ya lo tenemos nosotros instalado.
¿Por qué te digo que lo instales?
¿Ves?
Nosotros ya lo tenemos en el package.json.
En realidad esto no lo necesitamos instalar.
Pero como a lo mejor no lo instalaste, pues bueno, te lo recuerdo.
¿Por qué lo necesitamos?
Porque cuando en enrutado pongamos pestañas abajo o el header arriba,
internamente utiliza esto para que quede perfectamente.
Luego también tendríamos react native screens.
¿Vale?
Para hacer los splash screens y diferentes cosas de configurar nuestra aplicación, su portada y todo eso.
Luego tendríamos expo linking.
Esta dependencia es muy interesante porque lo que te permite es hacer un enlace profundo.
¿Esto qué quiere decir?
Pues quiere decir que podrías enlazar desde tu aplicación,
otra aplicación como por ejemplo Airbnb, ¿vale?
Y que desde tu aplicación pudieras abrir un detalle de Airbnb o una conversación de WhatsApp
o que también a ti te pudieran abrir desde fuera.
Y lo hace pues brutal.
Es muy interesante.
Puedes crear como tu propio protocolo.
Está bastante bien.
¿Qué más necesitamos?
Pues necesitamos también Expo Constance, que también nosotros ya la tenemos instalada.
Y Expo Status Bar, que también ya la tenemos instalada, pero la pongo para que no se nos escape.
¿Vale?
Entonces aquí instalamos todas estas dependencias, al menos las que necesite.
Y mientras se instala, os voy explicando algunos cambios que necesitáis en vuestra aplicación.
Si vosotros creáis desde cero una aplicación con Expo,
es bastante posible que todas estas dependencias ya vengan instaladas
y que no tengáis que hacer ningún paso de lo que os estoy enseñando.
porque por defecto te viene con todo instalado y todo configurado,
pero como os decía, es demasiado.
Y yo lo que prefiero es enseñaros como paso a paso
y como también más o menos lo indica en la aplicación de la documentación,
de cómo hacerlo, ¿no?
De cómo configurar cada una de las cosas para que sepáis de dónde viene la magia.
Porque si vosotros le dais a un botón y de repente está todo hecho,
os vais a quedar como, ¿qué ha pasado aquí?
¿Sabes?
O sea, ¿y de dónde viene cada cosa?
Y si hay un error, entonces mejor que lo expliquemos.
Mira, por ejemplo, aquí en el Package.json,
el punto de entrada de nuestra aplicación,
ahora que vamos a utilizar enrutado,
vamos a cambiarlo y en lugar de expo barra apentry.js,
que esto sería dentro de NoModules,
estaría yendo a este archivo,
vamos a decirle que vaya a expo-router-entry, ¿vale?
O sea, que va a cambiar totalmente el punto de entrada.
Ya no es el mismo.
Luego, en la configuración de nuestra aplicación,
y esto es opcional para el enlazado profundo que te decía,
que está muy chulo,
tendríamos que cambiar o tendríamos que añadir el esquema.
No sé si aparece esquema, no aparece esquema.
Vale, pues tendríamos que poner aquí el esquema.
¿Qué es esto del esquema?
Vamos a poner Metacritic, por ejemplo.
Esto del esquema es que cuando tú creas un enlace profundo,
no sé, seguro que has visto este tipo de enlaces alguna vez.
WhatsApp, algo así.
Seguro que lo has visto alguna vez.
Este tipo de enlace es un enlace profundo
que lo que hace es que va a abrirte la aplicación de WhatsApp
y va a enviar este texto, no sé qué,
y le puedes pasar incluso más cosas.
A quién se lo quieres enviar, no sé qué, no sé cuánto.
Pues esto que ves aquí, esto es el esquema.
Imagínate que alguien, digo,
oye, quiero que entres a mi aplicación de Metacritic
y que vayas directamente al juego de Legend of Zelda,
no sé qué, no sé cuánto, ¿vale?
Pues podríamos hacer algo así.
Metacritic, dos puntos, barra, barra, la ruta
y aquí tendríamos la ID del juego.
Y esto lo hacemos.
Este esquema es el que tendría que aparecer aquí.
Y cuando ya instalemos la aplicación,
se registra ese esquema y ya funciona correctamente.
Y lo mismo, pues tendríamos con Airbnb.
Airbnb también tendría su esquema, ¿vale?
Tendría su propio esquema.
Facebook, todos tienen su propio esquema.
Es como el protocolo.
Y ahí es como se haría el enlace profundo
que muchas veces se llama, pues, Deep Link.
Y es muy interesante porque hace que tu aplicación
realmente se pueda utilizar de muchas formas,
no solo dentro de la aplicación,
sino incluso desde una página web que le des
y te abre directamente la aplicación.
Es tremendo.
Es como magia.
Es brutal.
Vale, pues esto sería como lo mínimo
que hay que configurar.
Y luego, pues más adelante podríamos ver más cosas.
Pero lo que sí que necesitamos por ahora,
ya ves que parecía que funcionaba la aplicación.
Vamos a ver si la registramos otra vez.
Vale, aquí se me está quejando
porque me dice que no tiene,
tiene que ser un string, que no sé qué,
que no sé cuánto, Expo Router.
Vale, se está quejando porque le faltan cositas.
Y lo que le falta es que cuando utilizas
un enrotador en Expo,
tienes que crear aquí una carpeta llamada App
y primero tienes que tener el layout.
Así que vamos a poner el layout, ¿vale?
Vamos a poner nuestro primer layout.
Algo sencillo, tampoco hace falta que sea nada raro.
Vamos a poner aquí layout, ¿vale?
Y vamos a devolver view con el class name.
Vamos a utilizar Tailwind, ya que lo tenemos.
Vale, y vamos a poner, bueno,
el status bar no hace falta.
Y vamos a poner aquí text y hola, ¿vale?
Vamos a importar lo que nos falta.
Import view react native, ¿vale?
Y vamos a ver si con esto ya tiene suficiente.
Vale, con esto no tiene suficiente,
aunque también puede ser, vamos a ver,
subvia string de netting de directorio.
Espérate que si también puede ser que no le guste
porque tengamos que...
No sé si no es suficiente con esto
y tenemos que poner un index.js
o también es que tenemos que reiniciar esto
porque yo recuerdo...
Vale, ahora sí.
Veis que ahora no peta, pero está en blanco.
O sea, no tiene mucho sentido porque está en blanco
y queremos que salga nuestra aplicación.
Para que salga nuestra aplicación
tenemos que hacer dos cosas.
Lo primero, tendríamos que tener aquí
la página principal, index.js
y con esto, hostia,
gracias Dominicode por esa write, amigo.
Muchas gracias.
Y ya te tienes que estar dando cuenta de una cosa,
que el punto de entrada de nuestra aplicación
va a ser este, index.js.
Y esto es una cosa que está muy chula
y es que las rutas de nuestra aplicación
se van a hacer con archivos.
A partir de archivos físicos,
aquí vamos a crear las rutas.
¿Vale?
Creamos el index.js.
Aquí nosotros teníamos este main y tal.
Vale, pues este main lo que vamos a hacer es
no tenerlo aquí.
O lo podemos dejar y lo podemos importar aquí.
O sea, lo que podemos hacer es decir,
bueno, voy a importar el main
desde barra, barra, components, barra main,
que es como el componente
que tenga toda nuestra página principal,
export default, index,
que va a ser nuestro índice
y devolvemos el main.
Return main.
Esto sería lo primero que tenemos que hacer.
Pero todavía no se ve.
¿Por qué?
No se ve porque aquí no estamos renderizando la ruta.
No estamos renderizando nada.
Estamos renderizando el hola,
que de hecho si le ponemos aquí el text white,
deberíamos ver eventualmente.
Bueno, no se ve porque está arriba a la izquierda justamente,
pero mira, si hago esto y esto, ¿vale?
Ves que aparece aquí este hola, ¿no?
Y esto sería como el layout.
El layout, este archivo layout,
sería lo que envuelve a toda nuestra aplicación.
Que podemos hacer layouts tantos como queramos
y los que necesitemos.
Pero este sería el más general.
¿Por qué?
Pues porque hay veces que quieres tener dentro del layout,
pues algo en el footer que siempre se vea.
Puede ser el menú contextual, lo que tú quieras.
Y en este layout, aquí queremos siempre, siempre,
siempre renderizar el contenido.
Y el contenido, para mostrarlo según la ruta en la que estemos,
tenemos que importar el componente slot.
Que slot lo que quiere decir es como el hueco, ¿vale?
El hueco.
Ahí es donde estamos diciéndole,
aquí en este contenido, en lugar de este texto,
quiero que renderices el hueco que le corresponde, ¿no?
Y ahora, vale, nos dice unmatched root.
Que no sé por qué unmatched root.
Hostia, vale.
No sé, había entrado en una ruta rara.
Pero ahora fíjate que ahora estoy en la ruta principal, ¿vale?
Estoy en la home.
Y ahora sí está renderizando este index.
Cuando renderiza este index va a este componente main,
que es donde tenemos toda la información.
O sea, ya tenemos rutas,
pero la ruta que estamos mostrando ahora es la página principal.
No tiene mucha historia,
pero al menos aquí ya tenemos el slot.
Fíjate lo que te decía.
Si por lo que sea tú lo que quieras aquí es mostrar algo que esté ahí siempre,
fíjate que podrías hacer esto.
No se ve, se ve aquí, ¿vale?
Y esto es parte del layout y esto sería el contenido.
Y el contenido, dependiendo de la página web, cambiará.
Para que lo vean más claro,
vamos a crear ya nuestra primera screen, ¿vale?
Otra screen para que mientras vayamos navegando,
pues podamos ir viendo diferentes cositas, ¿vale?
Entonces, ya tenemos una.
Vamos a crear otra página que sea about.js.
Si sabes Next.js, si has utilizado Remix,
si has utilizado Astro, si has utilizado Naxx,
casi que cualquier framework web que conozcas,
ya verás que este tipo de enrutado te suena mucho, ¿vale?
Y es esto de crear rutas a través de ficheros físicos.
Entonces, el index va a ser la ruta principal
y el about va a ser barra about.
Y ahora veremos cómo podemos incluso navegar
en estas rutas muy fácilmente de forma interna.
Así que vamos a crear este export function about.
Es importante que las rutas exporten por defecto, ¿vale?
Y vamos a hacer un return.
Voy a devolver aquí, vamos a poner aquí un scroll view.
Scroll view para que tenga scroll, ¿vale?
Scroll view.
Y dentro simplemente vamos a poner ahí como un texto
font-bolt, font-bolt, mb8, text-2xl, about.
Y aquí que explica un poco la historia del proyecto
solo para que aparezca ahí bastante información, ¿vale?
Y vamos a poner aquí lorem.
¡Ay! Pensaba que lorem ipsum este...
Bueno, ya me sirve que al menos sí que ha funcionado perfectamente
con la inteligencia artificial.
La inteligencia artificial ya me ha hecho lorem ipsum.
Porque si no, pensaba que...
Vamos a poner aquí sobre el proyecto.
Y vamos a repetir esto unas cuantas veces, ¿vale?
Vamos a poner el text-wide al 90%,
que esto tenga un poquito de separación.
Y vamos a repetir esto unas cuantas veces, ¿vale?
Para que se llene mucho.
Vale.
Ahora mismo, ¿cómo podemos acceder a esta página?
¿Cómo desde tu aplicación puedes moverte de la home a esta página?
Pues necesitamos un enlace.
Y lo mismo que con una web pensamos en enlaces,
pues sería lo mismo con una aplicación móvil, con React Native.
En este caso, Expo Router, lo que tenemos por aquí,
si nos vamos al main, ¿vale?
Vamos a añadir un enlace.
Vamos a importar el link de Expo Router, ¿vale?
Lo tenemos por aquí.
Y vamos a añadirlo, para que lo tengamos bastante visible,
lo voy a poner aquí.
Le tendríamos que decir cuál es la ruta a la que queremos ir,
que sería la de About.
Y a ver, esto es un poco raro, porque es HRF,
que serían las referencias que se utilizan en los ancos de las páginas web.
Pero en este caso es que tiene sentido,
porque al final internamente está utilizando el mismo sistema de enrutado
que utilizan las páginas web.
Pero bueno, ahí volver atrás, no.
Esto sería ir al About.
Ahora verás diferentes cosas, ¿eh?
Que esto ahora lo puedes ver así, dices,
pero ¿cómo voy a hacer los enlaces así?
Y luego veremos cómo podemos ponerle iconos, botones,
y cómo lo puedes personalizar todo lo que tú quieras.
Fíjate aquí, ahora tenemos este TextXL, ¿vale?
¿Ves este botoncito?
Le damos y navega.
Ahora, cosas malas que tenemos aquí.
Pues fíjate, esto no tiene la separación correcta,
la parte de arriba, porque no tiene el header.
Ahora no puedo volver para atrás.
Tampoco ha funcionado de forma nativa exactamente la navegación.
Todo eso lo vamos a arreglar.
O sea, no te preocupes que todo eso lo vamos a arreglar.
Por ahora voy a hacer una forma para volver para atrás.
Y para eso, desde la página About,
vamos a ponerle aquí que vaya a la barra, ¿vale?
Esto, no sé por qué a veces pasa eso,
pero eso es súper raro porque no parece un error que sea mío,
sino que parece...
Vale, aquí además se le está yendo un poco que no puedo darle
porque está en el status bar de arriba.
Vamos a ponerlo más para arriba, más para acá, algo así.
¿Vale? Y ya lo tendríamos.
Y ahora sí, puedes ir al About, ir al About,
y esto sería ir al inicio.
Luego esto lo mejoraremos, lo haremos de forma más nativa,
pero solo para que empecemos a ver esto.
Otro problema que seguro que te estás dando cuenta.
Cuando voy al About, me aparece este texto.
Si voy al inicio, vuelve a recargar toda la página,
a recuperar todos los juegos y tal.
Esto es un rollo.
Esto no lo vamos a querer seguro.
Y eso lo vamos a arreglar para que no nos pase, ¿vale?
Para evitar que pase esto de cuando vuelves al inicio,
que lo vuelva a recargar, esto lo vamos a arreglar
para que no tenga que hacer esto.
Por ahora voy a crear una cosa, un componente,
para que nos ayude un poco luego a simplificar bastante.
Voy a crear un componente que se llama ScreenLayout
para que todos tengan como bien las dimensiones
entre diferentes screens.
Y ahora haremos la navegación nativa y correcta que debe tener.
¿Cómo estáis?
No es oficial Tailwind.
Sí que es oficial.
Utiliza Tailwind oficial,
solo que tiene un compilador por encima.
¿Por qué no usa React Navigation?
Incorrecto.
Expo Router, que es el enrutador de Expo,
como que el oficial del framework,
en realidad Expo Router no deja de ser React Navigation.
De hecho, lo tienes aquí en la documentación.
Introducción a Expo Router.
Y fíjate que dice,
nativo, está construido encima de React Navigation.
Lo que pasa es que Expo Router ya te viene preparado
para que esté dentro del propio framework de Expo
y que además entienda todo esto de tener archivos físicos y tal.
Pero luego internamente utiliza React Navigation.
O sea que es exactamente lo mismo.
¿Se puede utilizar React Native sin Expo?
Se puede utilizar,
pero es que ni siquiera la gente de React Navigation lo recomienda.
De React Native lo recomienda.
Y yo tampoco te lo recomiendo, la verdad.
Sobre todo para empezar, te recomiendo que no lo hagas.
Que empieces con Expo y más adelante, si ves,
pues que hagas el cambio que tú quieras.
Hola Midu, gracias a tus cursos he mejorado aprendiendo programación.
Estudio con el SENA y empezaremos a aprender SQL
para el proyecto que estamos desarrollando.
Muy bueno, ¿eh?
¿Tiene mejor rendimiento que React Navigation?
Pero a ver, sí.
A ver, a ver, Arlene López.
Si es que utiliza React Navigation.
Si es que está utilizado con React Navigation.
No tiene sentido de...
¿Que tendrá alguna optimización?
Puede ser, pero es que es React Navigation.
En realidad es algo que está por encima de React Navigation.
¿Tendrá alguna optimización específica?
Puede ser, pero no va a ser 10.000 veces más rápido.
Entonces se debe link y no React Navigation.
Es lo mismo, es lo mismo prácticamente.
¿Vale?
Para que lo tengáis claro, es lo mismo.
Es básicamente funalo.
No, hombre, ¿por qué lo voy a funar?
Tampoco es eso, hombre.
No hay que funar.
Simplemente que si es lo mismo,
tampoco os podéis esperar.
Que sí que tiene algunas cosas,
porque así encaja mejor con el framework de Expo,
pero tanto la API, documentación y tal,
es exactamente la misma.
Y la vais a poder utilizar sin problemas.
Y por lo tanto el rendimiento será muy similar, muy similar.
Bueno, iba a crear un componente screen layout y tal,
pero bueno, da igual porque total,
como vamos a cambiar todo esto del layout,
pues lo vamos a hacer de otra forma.
Ya está.
Así no perdemos tiempo creando un componente.
Vale, ya hemos creado la primera página about, ¿vale?
Ya hemos visto cómo podéis crear enlaces para volver atrás,
para ir a otro, pero el problema es, claro,
y si quiero, por ejemplo, si vamos aquí,
este ir al inicio, este botón que tenemos aquí,
claro, y si quieres hacer algo más bonito,
como por ejemplo esto, poner un pressable,
que sería como para poner, por ejemplo,
pues algo más visual, que se pueda personalizar,
yo que sé, o que pueda tener más de una cosa,
no solo un texto, sino por ejemplo un icono, ¿vale?
En este caso quiero poner un texto,
pero, ¿ves? Aquí ir about.
Claro, ¿qué pasa?
Pues que esto, si lo ponemos así,
y ponemos aquí el text white y todo esto,
¿vale? Aparece aquí en el volver, pero no funciona.
¿Veis que no funciona?
Si le estoy dando click,
bueno, ahora porque me he pasado con los click,
pero le das y no funciona.
No está funcionando correctamente,
porque no lo detecta bien.
Para poder utilizar con este enlace
cualquier componente que tú quieras,
tienes que pasarle una prop aquí que dice
as child, ¿vale?
as child, y ahora que tenemos al as child,
si no le pasas el as child,
lo único que le puedes pasar dentro
sería un texto, ¿vale?
Como lo habíamos hecho antes, ¿vale?
Un volver, solo le puedes pasar un texto
y este class name sería para el texto.
Pero si lo que quieres es pasarle
a algún componente,
tendríamos que decirle, ¿vale?
Como hijo, este class name ahora aquí
no sirve para nada
y esto ya lo tendríamos que pasar aquí, ¿vale?
Y esto, bueno, ahí le he puesto el class name mal aquí.
Y ahora sí que tendríamos exactamente,
podríamos hacer que esto funcionase.
Aquí tenemos que poner volver al inicio y tal.
Bueno, ahora se ve exactamente lo mismo,
pero al menos ya tenemos un componente,
que esto ahora luego nos permitirá, por ejemplo,
poner un icono y todo esto.
De hecho, vamos a hacerlo para que lo veas.
Para crear iconos, para añadir iconos,
a ver, lo podéis hacer de diferentes formas.
La anterior clase vimos una forma de cargar SVGs,
pero para que no perdáis tiempo,
especialmente si tenéis una aplicación
y queréis rápidamente ser productivos
y queréis enseñar cosas y tal,
yo os recomiendo mucho, mucho, mucho esta dependencia,
la de Expo Vector Icons.
Porque aquí tenéis 100.000 millones de iconos
que podéis buscar, que podéis poner aquí Home, ¿vale?
Y aquí ves, Home, Home, Home,
que tienes desde Andesign, En Tipo, Feather,
Phone Awesome, los que tú quieras.
Si solo te gustan los de Phone Awesome,
puedes filtrar aquí y dices,
solo quiero que me enseñes los de Material Icons, ¿vale?
Y solo te aparecen los de Material Icons, ¿vale?
Este es un recurso buenísimo,
porque tiene buscador,
porque te facilita mucho la vida,
porque no pierdes el tiempo.
Entonces, vamos a instalar esta dependencia,
¿vale?
Que os he dicho que era Expo...
Aquí la tengo por aquí, ¿vale?
Hacemos MPM Install,
Expo Vector Icons,
y con esta dependencia vais a tener la posibilidad...
Vale, igual ya está instalada,
porque es que creo que internamente ya viene instalada,
puede ser, por Expo, ¿eh?
O sea, que igual no va a tener ni que instalar.
En el catálogo de componentes vamos a buscar,
por ejemplo, la Home, yo que sé.
Pues...
Eh, eh, eh, eh, pues este.
Mira, que como además...
Mira, le das un clic y te dice las dos cosas
que tienes que hacer, que tienes que importar.
Primero tendrías que importar el icono, ¿vale?
Así que lo importamos aquí.
Y luego tendríamos que utilizar el icono,
así que lo hacemos aquí.
Como no quiero que sea texto,
que quiero que sea el icono,
lo pondríamos aquí.
Y aquí tendríamos que decirle el color
que queremos que se renderice.
Y con esto ya deberíamos aparecer...
Bueno, ahora me lo he cargado otra vez,
porque...
A ver, voy a hacer...
Es que si ponemos el Scroll View, creo...
Que no funciona...
Que esto lo veremos después.
Ah, sí, sí que funciona.
Pues nada, vale, ya lo tendríamos.
Vale, pues ya tendríamos ahí el iconito
y al darle, volvería.
Esto os lo enseño más que nada
para que sepáis cómo utilizar iconos
y cómo podéis estilar los enlaces
con cualquier cosa, como queráis,
para que lo podáis hacer vosotros tranquilamente, ¿vale?
De hecho, aquí, igual que hemos hecho este,
lo podríamos hacer aquí en el Main, ¿vale?
Y este, el ir al About y todo esto,
vamos a hacer algo.
Vamos a importar el Pressable, ¿vale?
Y este Phone Awesome,
vamos a buscar aquí en los iconos,
un Info
y a ver, el Phone Awesome,
yo qué sé, este mismo, ¿vale?
Vamos a importar esto,
vamos a traerlo por aquí
y ahora os contaré una cosa
que yo os recomiendo que hagáis
para evitar esto que estoy haciendo ahora, ¿vale?
Pero solo para que al menos ahora lo veáis
y ahora os digo
lo que yo haría para mejorar un poco
esto que estamos haciendo.
Vale, esto lo tenemos por aquí
y ahora si vamos aquí a la Home,
¿ves? Aquí tenemos el iconito
que al darle,
ahora no me funciona,
¿por qué?
¿por qué no me funciona?
No sé si es porque se me ha quedado
ahí encima de algo,
creo que se me ha quedado,
puede ser encima de algo,
ah, no, porque esto tendría que ir al About,
¿vale?
Ya está, vale.
Y ahora sí que funcionan los iconos,
¿vale?
Vale.
Con el tema de los iconos,
cuando vuestra aplicación crezca
y todo esto,
os recomiendo una cosa,
no hagáis esto
de utilizar el icono directamente
y poner aquí
Phone Awesome 6,
no sé qué,
porque os vais a liar
y es un rollazo.
Os recomiendo mucho,
una de dos,
que creéis un archivo icons
y aquí lo que hacéis
es importar los iconos que queráis
o las bibliotecas que queráis,
os recomiendo que intentéis
solo utilizar un tipo de icono,
o sea, que no carguéis
como estoy haciendo yo aquí.
Yo estoy cargando dos diferentes,
¿vale?
Estoy haciendo esto.
Cuanto menos carguéis,
menos ocupará vuestra aplicación
y más rápida irá
y además más consistentes
serán los iconos,
¿vale?
Porque si empezáis a crear un montón,
decís,
ah, voy a crear un icono
de esta colección,
otra de otra.
Va a ser luego
que van a quedar como muy raros.
Pero os recomiendo
que lo hagáis en uno,
en un sitio en concreto
y aquí exportéis
todos los iconos que necesitéis.
Por ejemplo,
este que tenéis aquí,
no sé qué,
no sé cuánto.
Bueno, pues decís
export con circle info icon,
¿vale?
Que le podáis pasar además
las props que queráis,
lo ponéis por aquí,
de hecho,
no hace falta,
lo podéis hacer aquí
y aquí directamente,
pues,
le pongáis,
si queréis,
el que serían,
los que sean por defecto
y que luego lo podáis machacar
por las props que se le pasen,
algo así,
¿vale?
Y que os olvidéis
y que centralicéis
en un solo componente
todo lo que tengáis que hacer,
¿vale?
Y aquí,
pues tendríamos este
y ahora este circle info,
lo vamos a importar aquí,
¿vale?
Circle info icon,
¿vale?
Y si todo ha ido bien,
pues lo tendríamos por aquí
y lo mismo aquí con el about,
¿vale?
Y os olvidéis de esa dependencia,
de estar viendo constantemente
la dependencia y tal,
sino que tengáis el archivo de iconos,
¿vale?
Y ahí en los iconos
lo veis perfectamente
y ya está,
¿ok?
¿Vale?
¿Qué props le podemos pasar?
Bueno,
eso ya,
a ver,
podemos estar aquí todo el día,
pero no tiene muchas más,
o sea,
aquí el phonosome
tienes la key,
el nombre,
que es lo que identifica el icono,
el size y el color.
No se puede estilar,
los iconos no se pueden estilar
de ninguna forma,
¿vale?
No podéis estilarle el icono
ni nada,
solo le podéis hacer esto,
lo digo porque no podéis hacer,
no podéis hacerle muchas maravillas.
Lo que sí que podéis hacer
es utilizar un view,
una vista,
y entonces en la vista
lo bueno que podéis hacer ahí
pues es tener,
por ejemplo,
un fondo
y que el icono esté encima del fondo
y todo esto.
Luego,
aquí lo bueno es que
en lugar de hacer que todos vengan
del vector icon,
seguramente vais a necesitar
tener otros iconos
que ya tenéis vosotros
directamente de SVG,
por ejemplo,
logo,
icon,
¿no?
Y esto vais a tener del SVG,
con el path,
con no sé qué,
con no sé cuánto
y también lo podríais poner por aquí
que podría estar bastante bien,
¿vale?
Pero lo más interesante
es que evitéis,
o sea,
que estén lo más limpios posible
para que luego los podáis estilar
como queráis
y luego le podáis utilizar
dentro de un pressable,
de un view,
de lo que queráis,
¿vale?
Muy bien,
pues esto sería con el tema
de los iconos,
por supuesto los iconos
los podéis estilar,
esto es bastante importante,
cuando se están presionando,
esto lo vimos la semana pasada,
pero por ejemplo,
aquí veis que tenemos
el pressable con el home icon
y no sé qué,
esto sería en el about,
¿vale?
Mirad,
una cosa que podéis hacer
cuando tenéis el pressable,
podéis decir,
cuando esto está presionado,
¿vale?
A ver si lo hago bien,
esto es press,
press,
a ver si,
es que esto,
esto son muchos,
así,
¿vale?
Aquí podríais cambiarle
la opacidad al icono
o lo que sea,
podríais cambiarle,
claro,
el style,
yo creo que al icono
se le pueden pasar styles también,
o sea que aquí podríais poner style
y podréis opacity,
es que tengo dudas
si me puede pasar el style
al icono,
tengo dudas,
a ver,
voy a verlo un momento,
vamos a probar,
es que como no aparecía,
pero si le paso aquí un style
a este style
y le ponemos una opacidad,
vamos a ver si opacity 0.5,
¿vale?
Y,
ah,
sí,
sí,
sí,
el style se le puede pasar también,
es que es raro,
porque es verdad que no aparecía aquí,
pero bueno,
me imagino que lo pasará,
me imagino que muchos
que no se ven en el autocomplete
también se le pueden pasar,
debe ser un error de typescript,
eso no,
en realidad,
porque en el autocomplete
deberían aparecer,
así que aquí,
con esto que habíamos dicho
en el about,
que queríamos hacerlo,
del press y todo esto,
aquí le podríamos decir
con un style
que si está pulsado,
a ver,
podríamos hacer esto,
¿veis?
que cuando está pulsado
que se le quita un poco la opacidad
y ahí,
mira,
voy a hacerlo un poquito más grande
para que lo veáis mejor,
pero ¿veis?
que cuando lo pulso
se le cambia la opacidad,
cuando lo suelto,
pues,
pues ya no está así
y eso lo podríais hacer
directamente desde fuera
así,
con el pressable,
recibe esta prop y tal,
pero seguramente diréis,
ostras,
pero yo lo que quiero
es hacerlo con Tailwind,
lo quiero hacer con Tailwind,
claro,
aquí hay un problema,
si aquí le pasamos el class name
y todo esto,
no va a funcionar
y si lo queréis hacer
con la opacidad,
hay una cosa con nativewind
que está muy bien
para estilar los pressable estos
y lo puedes hacer con Tailwind
con la pseudo clase active,
que es bastante interesante,
así que os voy a enseñar
cómo hacerlo
por si lo queréis hacer,
pero ya os digo,
no es obligatorio
porque hay otra forma de hacerlo,
pero podéis crear
como un componente
StylePressable,
le ponéis StylePressable
y esto lo que te va a permitir
es que,
de forma más fácil yo creo,
sin necesidad de hacer todo esto,
¿vale?
Quitamos esto,
vais a poder utilizar,
esto lo podemos quitar,
pa, pa, pa, pa, pa,
¿vale?
Lo simplificamos,
pero en el class name este,
en este class name,
vais a poder utilizar
lo típico de Tailwind,
de decir,
cuando es activo
le pongo la opacidad
al 20%,
por ejemplo,
¿vale?
Y esto,
fíjate cómo funciona correctamente.
Ahora,
este Pressable
le puedes utilizar
los pseudo selectores,
estos estados
que tienes como el hover,
el hover no tiene mucho sentido
en móvil
porque no puedes hacer hover,
¿vale?
Pero el active sí,
porque el active
es cuando está activo
y cuando está activo,
justamente cuando lo estás presionando.
Entonces,
y para que veas
que esto es de verdad,
si yo le subo la opacidad,
vais a ver que cuando lo presiono,
¿ves?
Casi no cambia la opacidad
o incluso puedes hacer,
le podrías cambiar,
bueno,
no tengo,
tengo dudas,
si le puedes cambiar el color,
creo que sí,
no,
el color no se puede cambiar así,
ya sería brutal,
es raro,
sería buenísimo,
pero bueno,
no le puedes cambiar
todos los estilos,
pero sí le puedes cambiar
la opacidad.
El tema del color
ya lo tenemos que hacer
de otra forma
y pasárselo como prop,
porque por eso
tengo una prop especial
del color,
pero bueno,
la opacidad sí que lo puedes hacer
y lo puedes hacer así
que queda mucho mejor
y tienes este Style Pressable
y lo reutilizas
y ya está.
Ahora,
rutas dinámicas.
El Touchable tiene menos propiedades
que el Pressable.
A ver,
no estamos utilizando el Touchable Opacity
justamente por eso,
porque el Touchable Opacity
no es que esté deprecado,
pero no está recomendado
y el Pressable al final
tiene muchas más posibilidades
que el Touchable Opacity
o el Touchable Highlight
y todo esto.
Yo recomiendo
que es...
Ah,
utilicé Color y es Text.
Tienes razón.
Gracias.
Así que os recomiendo
que siempre que podáis
utilizáis más bien
el Pressable
y ya está.
Sí,
pero igualmente me parece a mí
que casi no funciona.
Puede ser
que si se lo quitamos aquí...
A ver,
voy a probar una cosa.
A ver si funciona
haciendo esto.
Un momento.
Si le quitamos aquí
el color,
que es este,
no sé si...
Es que no.
¿Ves?
Hay que pasárselo aquí.
Hay que pasárselo aquí
porque no le gusta
que le pases el color directamente.
Sería ya tremendo,
¿eh?
Sería ya tremendo,
pero no.
Esto no cuela así.
Casi, casi.
Es que lo que os decía,
que como los hijos
no heredan el color,
lo que os comentaba antes,
pues no funciona.
Pero sería tremendo
que lo hiciese,
por arte de magia.
Sería increíble.
Ya son cosas
que hay que tener
un poquito en cuenta
cuando se trabaja con esto.
Entonces,
esto está muy bien.
Vamos a hacer
el tema de la ruta
dinámica
para entrar
en cada uno
de los detalles.
Así que vamos a necesitar
un nuevo archivo aquí.
Tenemos la ruta del index,
el del about.
Vamos a crear
la de el detalle.
Para el detalle,
si has utilizado
Next.js
y cualquier framework,
esto te suena.
Necesitamos una ruta dinámica.
Esto significa
que nosotros
no sabemos
antes de...
Uy,
hostia.
Data items.
Hostia,
no me extrañaría
que me hayan baneado.
Espero que no me hayan baneado
de Metacritic.
Ah, vale.
Es que a lo mejor
de tantas peticiones
que hago,
Metacritic,
estoy utilizando
una piqui pirata.
Entonces,
a ver si me van a banear.
Bueno,
vamos a crear
la página del detalle
para que cuando le hagamos
un clic
a cada uno
de los resultados,
entre a otra página.
¿Vale?
Entonces,
vamos a tener aquí,
por ahora,
vamos a poner
el text y el view
desde React Native.
Vamos a exportar
por defecto
el detalle.
¿Vale?
Y vamos a tener
aquí la vista.
Vamos a poner
que esto tiene que
ocuparlo todo.
Creo que no hace falta...
Vamos a centrar
por ahora todo esto.
Item Center.
¿Vale?
Toda la vista.
Vamos a meter
dentro de la vista
también
el nombre
de text white.
Detalle del juego
y un link
para poder ir
para atrás.
Por ahora no hace falta
que sea nada raro,
así que lo hacemos así.
¿Vale?
Este link hay que importarlo
de export router
y le vamos a poner
que esto sea
un text blue
500.
¿Vale?
Y con esto,
ahora,
haremos
que cuando hagamos
un clic
vayamos a esta página.
Ahora mismo
no estamos enseñando
ninguna información
y tal.
Tenemos que hacer
que podamos navegar.
¿Cómo lo hacemos?
Pues como hemos aprendido,
la game card,
que es la card
de cada una de estas,
¿no?
Esta sería la card,
la card,
la card.
Vamos a hacer
que todo lo que lo envuelve
sea un enlace.
¿Y dónde tiene que ir?
Pues tiene que ir
a barra
game.slag.
Slag es como
el ID único
que tiene cada uno
de los juegos.
y hemos dicho
que si queríamos
que tuviese
un componente
como hijo
y no un texto
teníamos que poner
el aschile.
¿Vale?
Así que hacemos esto,
envolvemos todo esto.
Este link
lo importamos
de export router
y además
como que queremos
que sea
clicable
vamos a utilizar
el
pressable.
¿Vale?
Vamos a envolver
todo esto
y como queremos
también
estilarlo
vamos a importar
el pressable
de aquí.
Vamos a importar
también
el style
del native win
y exactamente
lo mismo
que hemos hecho
antes.
Lo hacemos
por ahora
lo hacemos así.
Está el pressable
y hacemos
el class name
vamos a poner
active
opacity
opacity
70
vamos a ponerle
un borde
que sea oscuro
pero que cuando
esté activo
vamos a poner
que sea un poquito
más claro.
Por desgracia
sería increíble
que funcionase
las transitions
no funcionan
ya os lo digo yo
por desgracia
vamos a mejorarle
un poco
los estilos
que los hemos dejado
un poco de aquella forma
vamos a quitar
por ejemplo
esto de flex row
lo vamos a dejar
el gap también
pero todo esto
que habíamos hecho
por aquí
esto lo vamos a quitar
por ahora
se lo vamos a pasar
aquí arriba
¿Vale?
Vamos a poner
que tenga aquí esto
el rounded
y todo esto
¿Vale?
Luego arreglaremos
esto que está ahí
como que
como que no
no cabe
¿No?
Parece que no cabe
la información
eso es porque
el flex
todo el tema
del flex
el ring
y todo
es un rollazo
vamos a ver
donde lo tenemos
que arreglar
flex row
tenemos aquí la imagen
tenemos aquí la imagen
yo creo que sería
en este
que tenemos que hacer
un flex shrink
y ya está
¿Vale?
Ya lo tendríamos
ahora ya estaría arreglado
luego arreglamos
también este botoncito
pero al menos
tenemos esto
y si le damos
fijaos
que cuando le damos
ahora cambia
¿Vale?
Entonces estamos haciendo
los estilos
correctamente
y ahora sí
que va al detalle
del juego
todavía tenemos
el error
de la navegación
de que vuelva
a recargarlo
pero cuando le damos
un clic
detalle del juego
le podemos volver atrás
y vuelve a la home
o sea que ya tenemos
clicable
ya tenemos esa navegación
tenemos los estilos
y fíjate que los estilos
simplemente envolviendo
toda la car
encima utilizando
el active
con todo lo que hemos aprendido
lo hemos estilado
en un momento
con algo muy parecido
a Tailwind
lo cual
pues
brutal
la app se puede visualizar
en offline
a ver
se podría llegar a conseguir
hacerlo en offline
ahora mismo no
pero se podría llegar a hacer
vas a optimizar
las peticiones con
TansTag
quizás más adelante
pero es que ahora mismo
si yo me pongo
a hacer TansTag
desde el principio
la gente le vuelva
le vuela la cabeza
porque o sea
tendría que estar explicando
TansTag
son demasiadas cosas
¿Por qué usamos
el Ash Child?
como hemos explicado antes
tendríamos
si tú quieres
que el link
sea un texto
no le pasaríamos
el Ash Child
¿Vale?
pero si yo quito el Ash Child
fíjate que no funciona
¿Por qué?
porque considera que esto
es un texto
entonces tenemos que poner aquí
Ash Child
cuando queramos utilizar
como
cosa clicable
un componente
que es justamente lo que queremos
como que queremos
que sea clicable
este View
y bueno
este View no
este Style Pressable
tenemos que poner al Ash Child
si quieres que sea un texto
le pondrías directamente
le tendrías que poner directamente
se lo quitarías
y ya está
pero eso es Ash Child
es de TypeScript
pero si no estamos utilizando
TypeScript
que va
Ash Child es una prop
del componente link
no tiene absolutamente
absolutamente
nada que ver con TypeScript
ni siquiera estamos utilizando
TypeScript
aquí estamos utilizando
JavaScript puro y duro
y ya está
no tiene ninguna historia
entonces
hasta ahora hemos visto
la ruta dinámica
pero todavía no estamos
recuperando la información
que es interesante
¿Vale?
aquí tendríamos
app, id,
about,
index
esta idea
es dinámica
y esto es lo que nos permite
que estemos entrando
a cualquier ruta
cualquier idea
que sea de nuestro juego
y estaremos entrando
en unas que sean
las de Zelda
otras que sea
Soul Calibur
otra tal
y en todas
fíjate
que puedes entrar
sin problemas
para asegurarnos
que realmente tenemos
esa información correcta
vamos a recuperar
la idea de la página
para mostrarla
y así verás
de dónde viene esta magia
de esa idea
de dinámica
¿Vale?
para eso vamos a importar
un custom hook
bueno un hook
más que un custom hook
un hook
que tiene
Expo Router
que se llama
Use Local Search Params
y esto lo podéis utilizar
aquí dentro
¿Vale?
lo podéis utilizar aquí dentro
no hace falta
que sea dentro de hooks
aquí
¿Vale?
y vamos a tener
la id
ok
y aquí detalle del juego
vamos a poner
del juego id
para que veas
¿De dónde sale esta id?
esta id
es porque aquí
pone id
este nombre
es el que vamos
a poder recibir aquí
y lo que recibimos aquí
es lo que le estamos pasando
directamente
aquí
¿Vale?
si yo aquí
le paso
Pepito
¿Vale?
vas a ver que va a aparecer ahí
Pepito
si yo aquí le paso
la id del juego
vas a ver que cuando haga clic
aparece la id del juego
y aquí
el hecho de que se llama id
no es porque siempre se llama id
es porque hemos puesto aquí
que se llama id
si yo aquí pongo
game
game name
por ejemplo
¿Vale?
o lo puedes hacer
o vamos a poner name
para que quede más claro
es que name no me gusta mucho
vamos a poner game slag
¿Vale?
game slag
aquí
nos va a recibir
el game slag
porque somos nosotros
los que estamos indicando
cuál es el nombre
de ese
de esta parte
lo digo para que lo tengas en cuenta
ahora por ejemplo
no me está
ahora
¿Ves?
estoy recuperando la misma información
pero la estoy recuperando ahora
de un sitio distinto
porque soy yo el que dictamino
el nombre que va a tener ese parámetro
lo digo porque muchas veces
en los ejemplos
se utiliza id
se utilizan cosas muy genéricas
y la gente se vuelve loca
y se cree que siempre es id
y no
esos vosotros
sois los que estáis decidiendo
el nombre
que vais a recibir aquí
¿Vale?
para que lo tengáis muy claro
y no tengáis este problema
más adelante
¿Vale?
si son dos parámetros
eso lo podéis hacer
sin ningún problema
haciéndolo con puntos suspensivos
pero en este caso
no lo vamos a ver
¿Vale?
porque es un poco más complicado
no es mucho más complicado
porque lo que recibes es un array
y ya está
no hay ningún problema
pero bueno
solo para que lo tengáis claro
que ese poder
también se puede hacer
no hay ningún problema
bueno
ahora que ya tenemos todo esto
vamos a arreglar
lo más interesante
y es que
cuando navegamos
bueno
voy a arreglar otra cosa
porque fíjate que el header este
me está poniendo un poco nervioso
este botón
que tenemos por aquí
que queda un poco
queda un poco raro
entonces
lo que voy a hacer
es que
a ver si puedo arreglar
este
esto
que tengamos por aquí
tengo este logo
vale
voy a hacer algo
porque
queda un poco raro
que tengamos esto así
con el
no sé si
este main
con el estilo
¿sabéis que?
que queda un poco raro
este view
vale
voy a quitar esto
vamos a ir viendo
cómo va quedando esto
esta vista
voy a poner todo esto
en una vista
por ahora
hola Midu
muchas gracias
por lo que haces
por la comunidad
una duda
acabo de obtener
una posición
como tech lead
en python
alguna sugerencia
para el nuevo reto
skills
habilidades blandas
liderazgo
que sea buena persona
con eso ya
tienes suficiente
si eres buena persona
todas las cosas
saldrán
saldrán perfectas
no
no te preocupes
lo vas a hacer
lo vas a hacer bien
lo vas a hacer bien
si ya solo el hecho
de que te preocupes
ya es indicativo
de que van bien las cosas
porque hay gente
que no se preocupa
de esas cosas
bueno
fijaos lo fácil
que es estilar
una vez que podemos
estilar con tailwind
y tal
lo fácil que es estilar
por ejemplo esto
que lo hemos estilado
en una sola línea
vale
y que queda
pues para poner esto
en el mismo sitio
y ya está
bueno
pues esto está muy bien
pero obviamente
lo que es la navegación
está regulinchis
porque volvemos para atrás
no está
tiene que recargar todo
queda muy raro
vale
entonces
que es lo que vamos a hacer
lo que vamos a hacer
es utilizar
es utilizar
aquí en el layout
otra cosa
que en lugar de
cargar
el slot
vale
como para dejar el hueco
vamos a utilizar
otra cosa
de expo router
que se llama
stack
stack
sería como
una pila
y lo que estamos haciendo aquí
es como mostrar
la pila
de navegación
vale
ahora mismo
no os asustéis
porque seguramente
pues no funcionarán
las cosas ni nada
bueno de hecho
no funciona
veo que no funciona
nada
me lo he cargado del todo
¿por qué me lo he cargado del todo?
me lo he cargado del todo
porque
porque me lo he cargado del todo
a ver
esto no puede ser
no puede ser
debería aparecer algo
puede ser
que estuviese
no no
estaba pensando
que a lo mejor estaba en otra página
pero
con stack
debería funcionar
que me he cargado
pues os he dicho
no os asustéis
y ahora me asusto yo
no no no
porque la he liado
la he liado
lo rompí
sí sí sí
justo buen momento
para el push
no no
a ver
con el slot
bien
vale
y porque el stack
porque el stack no funciona
con el layout
debería funcionar
el bg
a ver
aquí
slack no
stack
a ver
una vez que utilizamos el stack
que tendría que ser así
debería aparecer
el contenido
es verdad que todo esto
vale
vale vale
ya está ya está
o sea el contenido está
el contenido está
lo que pasa
es que esto
ya no es necesario
veis
claro
que pasa
el contenido está
pero no lo vemos
porque está empujando
este contenido
es que todo esto
no lo necesitamos
y seguramente este flex
uno
sí esto sí que lo vamos a necesitar
eso sí
vale esto sí
este bg black
sí que no es necesario
y entonces
no os asustéis
con la falta de colores
y tal
os explico qué está pasando
qué está pasando
lo que está pasando
es que este view
que tenemos aquí
claro
ahora
no
los colores
que le pongamos aquí
como el bg black
ya no afectan
a lo que tenemos
dentro del stack
porque digamos que el stack
está como en otro plano
distinto
pero lo bueno
aunque ahora lo arreglaremos
no os preocupéis
que ahora visualmente
se ve raro
pero arreglaremos
porque le faltan colores
pero fijaos en una cosa
yo solo dándole click
fijaos que ahora
hace como una animación
veis que ahora hace una animación
y además
hago esto
y tiro para atrás
tan fácil
como un cambio
con un cambio
ya tenemos esto
con un solo cambio
ya tenemos la navegación
nativa
del dispositivo
esto por qué
os comento
os lo comento
porque
si es una aplicación
muy especial
como por ejemplo
un videojuego
o sabes
no tiene por qué ser
un videojuego
rollo
rollo
yo que sé
un videojuego
de arcade
puede ser rollo
un puzzle
y tal
a lo mejor te interesa
utilizar el slot
porque te permite más
el hecho de tenerlo
más controlado
que las animaciones
sean como tú quieras
y que no tenga
esa animación nativa
que queda como rara
con un juego
o con diferentes tipos
de aplicaciones
pero eso es una aplicación
muy típica
lo más interesante
es que sea lo más parecido
a lo nativo
entonces para eso
utilizaríamos el slack
y además
ya os da
diferentes cosas
como el hecho
de poneros la parte
de arriba
ya os está haciendo
dejando toda la separación
correcta
que ahora lo mejoraremos
porque todo esto
que veis
es personalizable
vale
o sea que no os preocupéis
que todo esto
es personalizable
por ejemplo
una cosa que os puede asustar
ostras
es que el color
es horrible
tienes toda la razón
el color es horrible
pero el color
lo arreglamos fácil
porque aquí por ejemplo
que ya tenemos esto
podemos poner
el bg black
lo ponemos aquí
y esto ya lo tenemos así
vale
o sea ya tenemos el color
lo tendríamos perfectamente
ahora
otro problema
es que claro
el header
es blanco
bueno y también
el detalle
también el detail
pues tendríamos que asegurarnos
el game slag
este
debería ser también
que sea de color negro
esto normalmente
con el componente
screen layout
ya lo tendríamos
pero bueno
no pasa nada
también en el about
para asegurar
que todo queda bien
vamos a poner
bg black
también
y a ver como queda por aquí
vale
perfecto
entonces ya no necesitamos
esto de volver para atrás
con este iconito
esto no lo necesitamos
porque ya resulta
que lo podemos hacer
desde este botón
bueno
por ahora voy a dejar
por si luego
cambiamos alguna cosa
luego la parte de arriba
la parte de arriba
ahora está blanca
queda muy raro
con nuestra aplicación
todas estas cosas
y esto es lo más interesante
todo es personalizable
aquí en stack
tenemos el screen options
vale
y fíjate que también tienes
el screen listeners
y esto te puede servir
por ejemplo
para enviar
analíticas
para hacer tracking
y cosas así
para saber cuando está cambiando
de página al usuario
y todo esto
pero en el screen options
podemos estilar
por ejemplo
el estilo del header
le podemos decir
que el color
de lo de arriba
que sea de color negro
y luego también
le podemos decir
que el color
para destacar las cosas
que sea de color blanco
y entonces aquí vemos
que el título
ya al menos
pues se ve correctamente
le podéis poner el color
que queráis
o sea
se lo podéis poner
de color amarillo
si queréis
esto tiene sentido
que lo hagáis
con el color
que encaja
bien
con vuestra aplicación
luego
otra cosa
que ahora queda muy rara
es el hecho
de que este header
que tenemos aquí
queda ahí raro
porque claro
me gustaría que estuviese arriba
yo lo que quiero
es que este header
no quede ahí pegado
sino que esté arriba
en lugar de este index
yo no quiero que aparezca ese index
que queda horrible
entonces vamos a hacer algo
en el main
teníamos aquí este header
¿no?
o sea
la cabecera
la vamos a quitar
vale
ahora queda así
esto
todo esto del padding
top padding button
esto ya no lo necesitamos
porque automáticamente
si os fijáis
ya me está dejando
la separación correcta
toda esa magia
que hacíamos
de dejar la separación
para que no quedase
por encima de la barra de estado
ya la podemos quitar
y lo que he pegado
que es todo este header
me lo voy a traer para aquí
¿vale?
me lo voy a traer por aquí
y lo que vamos a hacer aquí
en este caso
es indicarle
qué es lo que tiene
que renderizar arriba
primero que le podemos hacer
es que el header title
lo podríamos dejar vacío
¿vale?
podríamos dejarlo vacío
y al menos no aparecería
pero yo lo que quiero
realmente es renderizar
lo que yo quiera
y hay un montón de formas
de hacerlo
fíjate
hay una prop
que es header left
y aquí le puedes decir
qué es lo que quiere renderizar
pues yo lo que quiero renderizar
a la izquierda
es el logo
y a la derecha
lo que quiero renderizar
lo tengo aquí
¿vale?
es todo esto
que habíamos hecho aquí
es lo que quiero renderizar
así ya puedo quitar
todo esto
lo ponemos esto aquí
tengo que importar
los componentes
que nos faltan
el logo también
el pressable
y el iconito
¿vale?
y fíjate que ahora
ya lo tenemos ahí
integrado en el header
lo más interesante de esto
es que claro
ahora
conforme vamos navegando
fíjate que
el header es el mismo
en toda la aplicación
pero esto también
lo puedes cambiar
a nivel de cada una
de las páginas
o sea puedes hacer
que
aquí
ese header
se quede siempre así
pero en otro sitio
cambie
eso lo vamos a hacer ahora
¿vale?
también fíjate que está
como muy juntito
esto
esto lo podríamos
ajustar
podríamos hacerlo
de diferentes formas
podríamos hacer
este header style
por ejemplo
no sé si podríamos
hacer algo así
no podemos
esto no cuela
ya sería increíble
pero bueno
esto
para esto os digo
que es interesante
tener un screen layout
para que
por ejemplo
mira lo vamos a hacer
un momento
vamos a hacer un momento
para que lo tengamos aquí
vamos a poner
screen
jsx
export function
screen
¿vale?
vamos a hacer algo así
y en lugar de hacer esto
vamos a hacer
que esto tenga un margin
vamos a quitar esto
pa pa pa pa
vamos a poner algo así
esto
este screen
que sea el componente
que utilicen todas nuestras páginas
para no estar
todo el rato
ahí con el
esto
¿vale?
de tener que ponerlo
que está en modo oscuro
en todos
vamos a hacer
que lo importe
que deje ya la separación correcta
en lugar de
esto debería ser un padding
¿vale?
y ya está
¿vale?
y entonces ahí
pues ya
no nos tengo que preocupar
de hecho
igual
px2
¿vale?
para dejar un poquito más de espacio
¿vale?
y ya lo tendríamos
entonces
este screen
pues lo deberíamos utilizar
en todas las páginas
tanto en el about
¿vale?
que tenemos este scroll view
claro
el scroll view
para que
no la lía
el scroll view
debería quedar aquí
¿vale?
o sea
tendríamos que tener
el screen
y dentro
el scroll view
a ver si la he liado
no la he liado
vale
perfecto
y esto tampoco hace falta
y este pt
tampoco hace falta ya
entonces esto quedaría
así
perfecto
¿vale?
y lo mismo
este screen
deberíamos hacerlo
aquí
que bueno
esto ahora
nos iba bien
porque no teníamos todavía
mucha información
pero bueno
por ahora lo vamos a poner
así
para que todos tengan
el mismo componente
y así
todos los cambios
que hagamos
en la pantalla
por lo que sea
pues vale
y ahí queda
perfectamente
vale
entonces
ya ahora lo que nos gustaría
es cuando vamos al detalle
que cambie el título
para que no siempre sea el mismo
porque lo que nos gustaría
es que cambie
¿no?
que diga
ostras
quiero el volver para atrás
por ejemplo
pues a nivel de página
vosotros podéis cambiar
todo lo que queráis
o sea
imaginaos que
mira
por ejemplo
vámonos al game slag
que es donde está interesante
¿no?
nos gustaría cambiar
porque ves
otra vez metacritic
y todo esto
no tiene mucho sentido
lo que nos gustaría aquí
en realidad
sería recuperar
la información aquí
y decir
bueno pues
quiero que arriba
aparezca
lo que yo quiera
bueno
pues aquí
puedes utilizar
un componente
que se llama
stack.screen
vale
lo vamos a importar
vamos a importar el stack
vale
y el stack.screen
ahí lo tenemos
podemos pasarle
las opciones
que queremos
que tenga
específicamente
esta ruta
y le podemos cambiar
por ejemplo
a ver
en este caso
se lo vamos a cambiar
vamos a cambiarle
el color del header
solo para que lo veas
porque esto es una cosa
que seguro que has visto
en alguna aplicación
que dices
ostras
como han hecho este cambio
bueno a ver
que tampoco es nada
del otro mundo
pero mira
vamos a poner
que sea de color negro
toda la información
le vamos a quitar
lo que habíamos puesto
en la izquierda
vale
y fíjate
que ahora aparece ahí
ese volver para atrás
le podemos poner
el título que queramos
por ejemplo
esto debería ser
The Legend of Zelda
Breath of the Wild
y a la derecha
también le podríamos quitar
lo que habíamos puesto
y fijaos ahora
como queda esto
que además
puede cambiar de color
esto lo hago
para que lo veáis
pero fijaos
como queda ahora
que tienes
lo de volver atrás
con el título
del juego
le puedes
puedes volver atrás
desde aquí
fíjate que encima
hace la animación
de una cosa a la otra
hace la animación
y queda tal que así
vale
o sea que queda brutal
ya tienes aquí
la navegación
y una cosa
importantísima
en el stack
se le llama stack
porque digamos
que se pone
como que stack
es apilar
es apilar
una encima
de la otra
en estas navegaciones
lo que ocurre
es cuando tú vas
a la página siguiente
si te fijas
es como que se pone
encima
y cuando vuelves
para atrás
es como que
se quita de encima
por lo tanto
la home
ahora no está
recargando
la información
constantemente
sino que fíjate
que tú vas haciendo así
y esa información
ya estaba detrás
sin ningún problema
y esto que estáis viendo
la transición
en android
funcionará también
de forma nativa
y hará la transición
de android
vale
o sea
esto que estamos haciendo
funciona en ios
y en android
lo que pasa
es que el cómo funciona
el header
cómo funciona todo
va a verse
con el estilo
más de android
y de ios
que puede ser
que necesitéis ajustar
alguna cosita
pero que ya os digo
que no vais a tener
ningún problema
ahora bien
está bastante chulo
está muy muy muy chulo
esto está muy muy bonito
ahora bien
vais a ver una cosa
todavía más interesante
con esto
porque vamos a trabajar
un poco en el detalle
y para el detalle
vamos a hacer
vamos a recuperar información
vamos a tener el game info
vamos a hacer una llamada
a la API pirata
de
la API pirata
de metacritic
que estamos robándole
los datos
vale
entonces
vamos a hacer un use effect
aquí
vamos a tener que
cada vez que cambie
el game slag
y si el game es
y si tenemos game slag
vamos a hacer
un get game info
get game details
vale
tenemos una librería aquí
que se llama metacritic
donde estamos tirando
de la API interna
privada
que no deberíamos
pero somos piratones
no es ilegal esto
no es ilegal
y menos para temas
educativos
y tengo aquí este
get game details
que lo que hace
es hacer una llamada
para recuperar la información
del juego
y para recuperar
las reseñas
que le han hecho al juego
las vamos a mostrar
así que vamos a traer este
get game details
que le tenemos que pasar
el game slag
y cuando esta promesa
termina
vamos a guardar
en el game info
vale
guardamos la información
con esto
podemos hacer
algo más
podemos tener aquí
en esta vista
que ahora mismo tenemos esto
vamos a decir
que si el game info
es null
vamos a mostrar
un cargador
activity indicator
tampoco
nada muy fancy
pero al menos que veamos
que se está
ay
me equivoqué
es este
activity indicator
este fuera
vale
como una carga
para que se vea
que está cargando
y si no
lo que vamos a cargar
por ahora
vamos a cargar
todo esto
vamos a quitar
vamos a poner aquí
un scroll view
porque aquí tendremos
bastante información
seguro que necesitamos
espacio
este link
lo voy a quitar
porque no lo vamos a necesitar
y ahí mostraremos
aquí dentro
mostraremos la información
me falta el scroll view
por importar
aquí
vale
detalle el juego
entramos
vale
la carga
vale
no se ha fallado algo
ahora veremos el que
porque seguramente
algo tenemos ahí
en metacritica
mejor que no hemos hecho bien
vale
dice
alguna cosa
undefined
no se que
no se cuanto
vale
para estos casos
te puede venir bien
hay diferentes cosas
que puedes hacer
porque claro
ahora esta información
donde tengo esta información
que problema hay
que no se que
no se cuanto
bueno
una cosa que puedes hacer
es abrir el navegador
el navegador ahora
puede ser que tengamos problemas
con los estilos
también os digo
puede ser que tengamos problemas
con los estilos
porque habría que
veis
hay estilos que no tenemos
y tal
esto lo podríamos arreglar
porque el tema de los estilos
del tailwind
hay que hacer pasos extra
para desarrollar en web
como nosotros estamos enfocados
sobre todo en la aplicación móvil
no nos interesa
pero lo bueno es que como funciona
la aplicación
porque funcionar funciona
vale
ah bueno
aquí tenemos un problema de cores
que vamos a arreglar
ves
que tengo aquí el problema de cores
vamos a arreglarlo con magia
de forma pirata
con el response headers este
vamos a ponerle aquí un header
vamos a poner
access
control
allow
origin
vale
y ahora sí
vale
aquí es
este es el problema
que tenemos en la aplicación
y que no podemos ver
dice
no puedes desestructurar
la propiedad score
de critical score summary
porque es undefined
bueno
pues lo mejor
y esto es lo bueno
de que puedas ejecutarlo
en la web
sin ningún problema
es que podéis poner aquí
algunos console logs
en un momento
¿sabes?
como por ejemplo
a ver
me dice que
el score este
este no existe
seguramente
seguramente
estoy sacando mal
la información
vamos a ver
en un momento
aquí tiene el component 0
¿veis?
está mal
esto debería ser
data item
¿vale?
y dentro de data item
o data item
es donde tenemos
el title
el critic score
o sea
aquí
me faltaría
sacar
el
data.item
¿vale?
eso es lo que me faltaba
no sé si faltaba
alguna cosa más
¿vale?
ahora parece que sí funciona
vamos a ver por aquí
vale
ahora sí que funciona
o sea que le doy aquí
vale
parece que no muestra
ninguna información
pero ya la he recuperado
que es lo importante
¿vale?
pues tenía
a lo mejor han cambiado la API
vete a saber
es que también
para asegurarnos que
realmente tenemos
lo que tenemos
vamos a poner el
game slag.title
si no me equivoco
vamos a ver en metacritic
tenemos
esto
image
title
slag
description
score
vale
pues vamos a poner aquí
el title
al menos
para ver si
a ver
vamos a ver si
le damos
text white
title
¿esto funcionar?
¿funciona?
a ver
voy a asegurar
sí que funciona
o sea que el title
todavía
todavía hay algo
todavía hay algo
ahí que no
que no termina
ah es que es game info
perdón
perdón
es game info
es que me estoy inventando yo
vale ahí lo tenemos
o sea que sí que tenemos los datos
ya eh
ya tenemos los datos
ya tenemos los datos
vale
es game info punto title
game info punto title
vale pues ahora que ya tenemos esto
pues podemos mostrar pues todo
vamos a mostrar
vamos a poner un view
vamos a mostrar aquí rápidamente
con el justify center
item center
el text center
yo creo que no hace nada
lo voy
lo voy a probar un momento
porque yo creo que no
lo voy a centrar por ahora todo
para que aparezca por aquí
a ver
vale
bueno
no está
porque
flex 1
seguramente tiene que pillar todo
bueno
voy a añadir más información
porque ahora mismo
con solo el título
tampoco es muy
muy visible
eh
que vamos a
primero la imagen
vale
pues la imagen
vamos a ponerle un poquito
de separación
hacia abajo
lo vamos a redondear
el source
game info punto
img
vale
el estilo
esto tenía que ser
el doble
que teníamos
antes
porque creo que teníamos
la imagen por aquí
aquí tenemos la imagen
ah pero aquí no
poníamos
ah si los teníamos aquí
no
en el
107 por 147
107
vale
así va a quedar
va a quedar
vale
esta imagen la ponemos por aquí
vamos a ver
si importamos esta imagen
image
vale
vale
ya tenemos la imagen
ahora
tenemos ahí el título
creo que aquí sí que debería funcionar
el text center
vale
aquí sí
lo que pasa es que
es verdad que
una cosa que no me gusta mucho
es que
no tiene
no tiene text wrap
eso sería increíble
que en css
lo tenemos
y que queda brutal
pero aquí no
no lo tenemos
a ver si eventualmente
lo añaden
y así pues
lo arreglan
vamos a poner el score
vale
el score es el componente
que hemos hecho antes
este sería el score
pa pa pa
vale
vamos a ver por aquí
el score
podemos poner también
la descripción
para eso me voy a copiar este
vamos a poner la descripción
del juego
soy el de la posición
justo cuando se escuchó
la pregunta
perdí la conexión
y no escuché nada
justo regresé
jajaja
jajaja
eras el de
que habías
como lead
de python
te había dicho
que sea buena persona
que si eres buena persona
y que ya solo el hecho
de que te preocupes
por estas cosas
ya tiene bastante buena pinta
eso es lo que
eso es lo que he dicho
que nada
que lo vas a hacer genial
que no te preocupes
y que
que mucha suerte
que mucha suerte
vale
a lo mejor
un poquito más grande
vale
un poquito más
cm
vale
pues nada
veis
vale
pues así
el mt
este es como demasiado
yo quitaría esto
vale
y que más
bueno
ahora tendríamos como
las reviews del usuario
vale
que la podríamos poner debajo
y tal
pero bueno
eso tampoco es tan importante
lo importante es que ya tendríamos
ya tendríamos esto
ya tendríamos la navegación
aquí
hay el problema
que hay aquí
ves que
es como que a veces no lo encuentra
pero esto puede ser que
me esté fallando
porque hago muchas peticiones
vale
porque
seguramente
o sea
funcionar funciona todo correctamente
pero me da la sensación
que la API
si hago muchas peticiones rápidamente
como que me falla
pero eso es una cosa de la API
que no es una API que controlemos nosotros
y que por lo menos
puede tener problemas por esto
vale
entonces
esto ya sería toda la página
podríamos seguir con la página del detalle
podríamos mostrar más información
podríamos hacer
el score
que fuese más grande
con diferentes tamaños
y todo esto
podría mostrar la review del usuario
bla bla
podríamos hacer un montón de cosas
pero
lo que te quiero enseñar ahora
los tabs
vale
porque
muchas veces
el tema
es que
es que claro
las navegaciones
están muy bien
pero
hay muchas aplicaciones
que lo que queréis
realmente
es que tengan las pestañas abajo
y eso también se puede hacer
vale
y vas a ver que es muy fácil de hacer
que no tiene mucha complejidad
pero bueno
hay que también
igual que hemos hecho
como hemos hecho
que hay que
arreglar algunas cositas
también tenemos que arreglar
algunas cositas
con los tabs
entonces
voy a cerrarlo todo
y te voy a enseñar
como tendríamos que
hacer esto
lo primero de todo
es que si queréis utilizar tabs
tendrías que agrupar
dentro de una carpeta
con paréntesis
todos los tabs
que vais a utilizar
ahora bien
estos paréntesis
que quiere decir
en cuanto a enrutador
lo que quiere decir
es que lo va a ignorar
vale
estos tabs
lo va a ignorar
no
no es una ruta
que va a tener en cuenta
ni nada
aquí de hecho
puedes crear tantas rutas
como queráis
por ejemplo
puedes tener
screens
y esta ruta
la ignora
lo que no ignora
es la ruta
que tengas dentro
si dentro tienes
por ejemplo
para que tengamos una idea
el about
lo puedo poner aquí
aquí directamente
y va a funcionar
perfectamente
porque esta ruta
de screens
cuando la pones
entre paréntesis
es como
la ignoro
sino que simplemente
lo utilizas
para agrupar
tú físicamente
los archivos
pero no tiene
una traducción
en las rutas
de la aplicación
vale
entonces
como lo queremos
agrupar
para los tabs
lo queremos agrupar aquí
lo vamos a utilizar
y puede ser útil
porque justamente
hay veces
que querrás algunos
que estén dentro de tabs
otros que no
y tal
y vamos a agrupar
tanto el about
y el index
que son los dos
que pueden tener sentido
tener en una pestaña
no tiene sentido
que tengamos
en una pestaña
el detalle
porque el detalle
solo se puede acceder
si entras
haciéndole click
no lo podemos tener
en una pestaña
porque siempre va a ser
algo totalmente aleatorio
nunca sabes
cuál va a ser exactamente
lo que sí que vamos a necesitar
aquí dentro de los tabs
va a ser
un layout
así que vamos a utilizar
aquí el layout
y vamos a volver aquí
a la home
y en el layout
tenemos que importar
unas cuantas cosas
tenemos que importar
primero los tabs
de export router
vale
export router
ay
que he puesto aquí
un guión bajo
vale
vamos a importar
por ahora
una vista
y
vamos a necesitar
iconitos
vale
vamos a necesitar iconitos
porque
obviamente
bueno de hecho
ya teníamos
el del home icon
podríamos utilizar
otro más
claro
necesitamos uno de info
pero que no sea este
vamos a poner
info icon
porque no va a quedar bien
entonces voy a
voy a traerme uno
que me imagino que este
será uno que tenga buena pinta
voy a importar
tanto el home icon
como el info icon
vale
vale
y vamos a exportar
por defecto
el tabs layout
devolvemos
y aquí utilizamos ya
los tabs
y aquí tenemos
dos
mira
fijaos que ya solo con este cambio
solo con este cambio
vale
ya con este cambio
fijaos que ya aparecen cosas nuevas
tenemos aquí otra vez un index
tenemos aquí como dos pestañas
que fíjate que ya le doy
o sea
es que no he configurado nada
no he configurado nada
y ya me ha detectado
como
las dos tabs que tengo
la del index
y la del about
claro
que es lo que pasa
que me está tomando
el nombre por defecto
¿no?
el nombre por defecto es index y about
y estos nombres de donde vienen
estos nombres son los nombres del fichero
vale
fíjate
el de index y el about
claro
son dos nombres
que no nos sirven
no son muy interesantes
además los colores están mal
pero
fijaos lo fácil
lo fácil que es
que además esto de nuevo
esto es nativo
esa es la
no
eso no es CSS
no
eso es totalmente nativo
utilizando la plataforma
que en Android
se vería totalmente también nativo
pero en la parte de Android
se va a ver
diferente para cada dispositivo
pero que
simplemente añadiendo esto
ya lo ha hecho
pero bueno
vamos a mejorarlo un poco
para poder configurarlo mejor
podemos hacer un tabs.screen
y aquí es donde vamos a darle
la información que necesitamos
le decimos
oye
para el tab
que tiene el nombre de índice
que este nombre
es el que viene
porque es el nombre del archivo
le vamos a decir
oye
de las opciones
voy a decirte
que el nombre que mostremos
sea home
y que además
el icono
que quiero que muestres
porque ya has visto
que no estaba mostrando
ningún icono
vamos a poner
el home icon
¿vale?
home icon
por ahora
ahora te diré
esto del color
que también es bastante interesante
pero por ahora
vamos a hacer esto
con el icon así
y ya está
¿vale?
pasamos el home icon
y esto pues lo cerramos
y lo igual
igual que hemos hecho esto
pero fíjate ¿no?
que ahora pues aparece esto así
y este aquí
esto mismo
lo vamos a hacer
con el de about
y le podemos poner aquí
el nombre que queramos
y le podemos poner
el icono que queramos
vamos a poner el info icon
¿vale?
info icon
about
a ver
¿qué me dice?
ah vale
no sé
se ha vuelto loco
vale
entonces
veo que el icono
no aparece
vamos a ver
por qué no aparece el icono
puede ser
¿por qué no aparece el icono?
el icono no aparece
porque el color
seguramente
vale
ahora sí
veis que ahora
si le pongo negro
pues aparece
claro
si el fondo es blanco
y el icono es blanco
no se ve
pero entonces
aquí le ponemos el color
pero así no es como se haría
porque queremos
que el color
cambie
dependiendo
de si estamos en esa página o no
por lo tanto
el color
aquí
que esto es una función
nos llega un color por aquí
que es el que vamos a utilizar
y así
podremos cambiar el color
dependiendo
de si está activo o no
¿veis?
este color
es el que le vamos a inyectar
por props
a nuestro icono
y así
cuando estemos en la home
este estará activo
y cuando estemos en about
este será el que está activo
entonces fíjate aquí la diferencia
entre uno y otro
ahora
la navegación por pestañas
es compatible
con la navegación
que hacemos así
de hecho fíjate
podríamos hacer
que las pestañas
fuesen aquí
todavía funcionasen
¿vale?
o puedes hacer que no
esto seguro que lo has visto
un montón de aplicaciones
de que solo algunas
pestañas
o sea algunas screens
funcionan por pestaña
pero hay otras cosas
que cuando navegas
desaparecen las pestañas
esto lo podéis hacer
sin ningún problema
incluso todavía
con navegación
fíjate que la navegación
esta funciona
pero por pestañas
funciona diferente
son dos navegaciones
diferentes
una donde estamos
apilando la navegación
y otro por pestañas
que aunque no recarga
fíjate que cuando vuelves
no recarga
no se está apilando
¿vale?
no está en una pila
sino que simplemente
digamos que
no lo estás viendo
es como vale
esta pestaña
o esta pestaña
¿vale?
pero no lo vas a recargar
ahora
todavía quedan cosas
porque fijaos
que como se muestra
la información
es un poco
de aquella manera
pues en este tabs
también tenéis
un screen options
que aquí
vamos
os podéis aburrir
de mejorar
un montón de cosas
por ejemplo
el header
no tiene mucho sentido
a lo mejor
puede tener sentido
o no
pues le podéis decir
no me enseñes
el header
fuera
¿vale?
y ya está
ya teníamos el header
fuera
obviamente esto
de color blanco
queda un poco raro
porque yo quiero
justamente que sea
de color negro
para que quede bien
con nuestra aplicación
o que sea de color amarillo
mira como lo ha hecho así
de color amarillo
lo podéis hacer
el color que queráis
por ejemplo
por negro
¿vale?
y ahí lo tenéis
y el color este
de que se está activando
también lo podéis cambiar
este es el color
de tint color
lo podéis hacer amarillo
por ejemplo
para que quede
bueno este amarillo
es un poco exagerado
pero lo podéis hacer
de este mismo amarillo
para que quede
como es de la aplicación
lo que queráis
¿vale?
esto también lo podéis hacer
lo podéis customizar
le podéis cambiar
un montón de
aquí tenéis un montón
de cosas
que os vais a volver locos
si os ponéis ahí
constantemente a mirar
el color del background
cuando está
cuando está activo
temas de hacer
incluso podéis hacerle
transparencia
para que se pueda ver
un poquito por detrás
es transparent
ahí lo tenéis
podéis ponerle true
y debería
en este caso
no sé si es que este
header transparent
enoja
un less jokes
claro
aquí le hemos puesto
ah no
no lo he puesto background
o si que le hemos puesto background
porque claro
igual no
estaba pensando que igual
el header transparent
pero dice
the header will also float
over the screen
pues no parece
que esto me lo estoy haciendo
the force or force
vale
the header will not have a background
unless you explicitly
the header background
pero no hemos puesto
header background
o sea que
es
claro
dice
esto es útil
si quieres renderizar
una cabecera
semi transparente
o con un background
que esté como difuminado
y de hecho
eso es lo que os quería enseñar
pero veo que
el header transparent
este a true
no funciona
pero bueno
tampoco es que sea
muy importante
ha quitado el
ah es que es el header
perdón
perdón
es que es verdad
tenéis razón
tenéis razón
es verdad
es verdad
no es que pensaba
tenéis razón
tenéis razón
es que pensaba
que era para las pestañas
pensaba que era para las pestañas
perdón
perdón
tenéis toda la razón
pero si
veis ahora que esto queda así
queda ahí como
medio
queda transparente
y eso está bastante interesante
porque podéis hacer que sea con blur
y todo esto
si es que pensaba
no sé por qué
que
que era el tema de las pestañas
perdón
perdón
pero bueno
ahí lo tenéis
ahí tenéis una forma
súper fácil
de tener
navegación
ya sea
desde
pues apilando
con esta forma nativa
de poder ir para atrás así
súper fácil
o por pestañas
en un proyecto
en un momentito
eso iría en el stack
entonces
es que depende
depende si quieres que vaya en stack
o no
lo que vosotros queráis
Midu si quiero dedicarme a mobile
¿es necesario aprender
aprender junto con real native lenguajes
como con Lino Swift?
hombre te va a ayudar un montón
te va a ayudar muchísimo
o sea te lo puedo recomendar
porque
a ver
React Native
si ya sabes React
te va a ayudar
pero yo creo que Swift o Kotlin
sobre todo Kotlin
que creo que puede tener bastante mercado
porque además
saber Kotlin te ayudará
temas de backend y tal
puede ser muy muy muy interesante
¿y cómo haces el slide nativo
y que se vean las tabs?
el slide nativo
y que se vean las tabs
pues tendríamos que meter
la página del detalle
tendríamos que meterla
también que sea una parte
de que esté dentro de los tabs
y ya está
dentro de la carpeta tabs
ahí lo tendrías
y ya está
si sabes Java
te sabes Kotlin
digamos que para en info
para leerlo
necesito loggearme
¿haría falta una ruta condicional
o cómo?
eso lo que podríamos hacer
simplemente
tendrías que tener una ruta condicional
pero lo que harías
es un efecto
que podrías tener aquí
allow
set allow
use state
false
use effect
podrías hacer algo así
¿vale?
set allow
aquí lo que podrías tener
es ver si realmente
check permissions
¿no?
permissions
y entonces
then set allow
esto obviamente
aquí no lo vas a tener
en todos los componentes
pero lo que harías
a nivel de screen
sería tener un
use user
o use lo que sea
donde revisarías
revisarías esto
y ya devolves
el allow
directamente
y te lo evitas
y esto incluso lo podrías hacer
una vez
podrías chequearlo
una vez
y guardarlo en el contexto
o sea
podrías hacerlo así
pero también lo podrías hacer
de otra forma
¿no?
me encanta tu contenido
es un máquina
muchas gracias
muchas gracias
pero es que depende
de tantas cosas
de cómo lo quieras hacer
lo podrías hacer
a nivel de screen
lo podrías hacer
una vez
cambiar
un flag
en el contexto
y entonces hacerlo
me lo pensaré
a ver cómo lo podemos mostrar
que me parece interesante
¿vale?
¿vale?