Componentes de React Native
Listado de los componentes de IU disponibles para la aplicación
Button
Agregar un botón arriba del Text Component en el archivo App.js
Button
Agregar la función onPressLearnMore()
Button
Importar el component Button
State
Se utliza el state cuando vamos a manejar información que va a
cambiar.
Switch
Agregar un switch arriba del botón en el archivo App.js
Switch (función)
Agregar la función onChange(value) para que cambiar el state
Switch
Práctica R1
1. Agregar un TextInput arriba del switch
2. Cada que cambie el valor del TextInput,
actualizarlo en el state.
3. Al presionar el botón, imprimir un Alert
que contengo el texto de TextInput
FLEXBOX
Especificación de CSS3 que define como se van a alinear los
elementos y como se va a distribuir el espacio dentro de un
contenedor.
React Native tiene su propia versión.
FLEXBOX
flexDirection
Setea el eje principal
“column” || “row”
Valor por default es column
justifyContent
Espaciado de los elementos hijos sobre el eje principal
“flex-start” || “flex-end” || “center”
“space-around” || “space-between”
FLEXBOX
alignItems
Espaciado de elementos hijos sobre el eje cruzado
“flex-start” || “flex-end” || “center” || “stretch”
alignSelf
Alineación de elemento en el eje cruzado (alinear un elemento en
particular)
“flex-start” || “flex-end” || “center” || “stretch” || “auto”
FLEXBOX
flex
Fluidez del tamaño del elemento
>0 = lo hace flexible y proporcional al valor
0 = inflexible, tamaño acorde a width y height seteado
-1 = como 0 pero se achica a minHeight, minWidth si no tiene
espacio
flexWrap
El comportamiento de los hijos al llegar al final del contenedor
“wrap” || “nowrap”
MyMusic
Limpiamos el render y colocamos 4 views
MyMusic
Agregamos los estilos
MyMusic
Recargamos simulador…
MyMusic
En el container, sólo dejamos la propiedad flex y backgroundColor
MyMusic
Colocamos flexdirection con row
MyMusic
Agregamos justifyContent con center
MyMusic
Modificamos flexdirection a column
MyMusic
Agregamos alignItems con center
MyMusic
Eliminamos alignItems y agregamos alignSelf
MyMusic
Eliminamos alignSelf y agregamos justifyContent y alignItems
MyMusic
Actualizamos justifyContent con space-around
MyMusic
Agregamos la propiedad flex a red y blue
MyMusic
Actualizamos el flexDirection con row
MyMusic
Quitamos flex de las cajas y actualizamos el box y container
MyMusic
Agregamos flexWrap con wrap
MyMusic
Cambiamos las propiedades de box y de green
Práctica R1
Crear la pantalla de login usando Views
Navegación
La forma en que llevas al usuario entre las diversas pantallas de la
aplicación.
Usaremos
react-native-router-flux
