React Native en español - Native Base + React Navigation

Esta sección esta ambientada en base a vídeos youtube.

Editor en linea de JS: https://playcode.io/online-javascript-editor

Funciones para string: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/String

Funciones para números: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number

Los objetos son algo fundamental en JS y para desarrollar con react native

Fechas: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date

Desafió: Crear un array con los 7 de lenguajes de programación, framework, librerías, etc que mas te han gustado y que quisieras aprender y muestralos mediante un forEach().

Switch: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/switch

do while: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/do...while

while: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/while

try / catch: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/try...catch

Desafio: Crear una arrow functions que diga si una persona es o no mayor de edad y déjalo en los comentarios.

Más información sobre arrow function y operador ternario en:

Arrow function: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Funciones/Arrow_functions

Operador ternario: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/Conditional_Operator

Desafío:

Ejercicio 1:

COMO RETO VAS A CREAR TU PROPIO ARRAY DE OBJETOS CON TUS PELICULAS O SERIES FAVORITAS Y SI NO TE GUSTA

PELICULAS NI SERIES, BN LIBROS. Y AQUÍ VIENE LA PARTE INTERESANTE! Vas a filtrar aquellas cuyo título

tenga 10 o más caracteres en su nombre y su estreno o fecha de publicación sea igual o mayor al 2005.

Ejercicio 2:

Este será un poco más divertido. A cada objeto le agregaras el dia, mes y año en que fue publicado,

si no sabes alguno de estos datos, invéntaselo. El objetivo es que hagas uso de la función substring y

de la función new Date() que aprendimos en el video de objetos y filtres aquellos cuyo mes de publicación

sea igual al mes actual. Déjanos tu solución en los comentarios ^^! Sé que puedes, confío en ti.

RETO: Ahora tu desafío será el siguiente, a tu array de películas, series o libros favoritos vas a sumar 1 a todos aquellos cuyo estreno sea menor a 2015, 3 a aquellos cuyo estreno sean mayor o igual a 2015 y menor o igual a 2018 y 5 cuyo estreno sea mayor o igual a 2019, es obligatorio que hagas uso de la función map para esto. Para finalizar tomaras este nuevo array el cual ha sido modificado y le aplicaras un reduce que sume todos los años de todos tus elementos como hicimos con valoraciones.

Lista de Estilos que puedes usar en React Native: https://github.com/vhpoet/react-native-styling-cheat-sheet

Juego Flexbox: http://flexboxfroggy.com/

Flexbox para RN del articulo del muchacho de filipinas: https://code.tutsplus.com/es/tutorials/get-started-with-layouts-in-react-native--cms-27418

DOC oficial de expo todos los componentes: https://docs.expo.io/versions/v32.0.0/react-native/tutorial/

Image: https://facebook.github.io/react-native/docs/image

Button: https://facebook.github.io/react-native/docs/button.html

Alert: https://facebook.github.io/react-native/docs/alert

Actualizado: Ahora para utilizar expo debes instalar ejecutando expo install expo-av e importamos como import { Video } from 'expo-av';

Link del ejercicio: https://drive.google.com/drive/folders/18ma_QfzgxESlPznHvaxxkstNmOuLn1pW

ImageBackground: https://facebook.github.io/react-native/docs/imagebackground

Touchables: https://facebook.github.io/react-native/docs/touchablehighlight

TextInput: https://facebook.github.io/react-native/docs/textinput.html

ScrollView: https://facebook.github.io/react-native/docs/scrollview.html

Expo Video: https://docs.expo.io/versions/latest/sdk/video/

GitHub Video Comunnity: https://github.com/react-native-community/react-native-video

Native base es una de las librerías UI para react native más usadas y populares

Comencemos nuestro primer proyecto desarrollando un login con native base

https://reactnavigation.org/docs/en/getting-started.html

OJO! Tal como sugiere la doc oficial si usas expo también deberás instalar gesture handler y reanimated luego de instalar react-navigation: If you're using Expo, to ensure that you get the compatible versions of the libraries you should run:

expo install react-native-gesture-handler react-native-reanimated

Navigate: https://reactnavigation.org/docs/en/navigating.html

navigationOptions: https://reactnavigation.org/docs/en/navigation-options.html

https://reactnavigation.org/docs/en/params.html

https://facebook.github.io/react-native/docs/keyboardavoidingview

Recuerda siempre escribir y mejorar tu código, nunca te quedes con lo que te enseñan, ve por más!

https://reactnavigation.org/docs/en/switch-navigator.html

https://reactnavigation.org/docs/en/stack-navigator.html

https://facebook.github.io/react-native/docs/statusbar

Actualizado: Para usar constants debemos ejecutar expo install expo-constants e importarlo como import Constants from 'expo-constants';

https://reactnavigation.org/docs/en/headers.html

https://reactnavigation.org/docs/en/navigation-options-resolution.html

Actualizado: Debemos ejecutar expo install expo-linear-gradient para instalarlo e importamos como: import { LinearGradient } from 'expo-linear-gradient';

https://docs.expo.io/versions/latest/sdk/linear-gradient/

Actualizado:

Debes instalar yarn add react-navigation-tabs e importar como import { createBottomTabNavigator } from 'react-navigation-tabs';

Leer doc oficial:

https://reactnavigation.org/docs/en/bottom-tab-navigator.html

Fijate en estos tab navigator:

https://reactnavigation.org/docs/en/material-bottom-tab-navigator.html

https://reactnavigation.org/docs/en/material-top-tab-navigator.html

https://reactnavigation.org/docs/en/drawer-navigator.html