Estilos y Layout con Flexbox

Clase 11 de 36 • Curso de React Native 2016

Clase anteriorSiguiente clase

Resumen

Flexbox es una especificación de CSS que determina cómo se van a posicionar los elementos dentro de la pantalla.

React Native tiene su propia implementación de Flexbox y… ¡es muy fácil de usar!

Aprende las propiedades para alinear cajas dentro de la pantalla.

Julio J Yépez

student•

El Resumen:

# Elige el eje principal:
flexDirection: 'column' || 'row'

# Alineamiento con el eje principal:
justifyContent: 'flex-start' || 'flex-end' || 'center' || 'space-around' || 'space-between'

# Alineamiento con el eje cruzado:
alignItems: 'flex-start' || 'flex-end' || 'center' || 'stretch'

# Alineamiento de un elemento sobre el eje cruzado:
alignSelf: 'flex-start' || 'flex-end' || 'center' || 'stretch' || 'auto'

# Comportamiento al final del contenedor:
flexWrap: 'wrap' || 'nowrap'

# Fluidez relativa de un elemento:
flex: number (el. 1, 0.5, 5)

Iván López Hdez

student•

Para quien quiera tener una referencia visual de todos los elementos de flexbox

Julio J Yépez

student•

Está bueno el aporte, sólo recuerda que estos atributos de React Native, quizás sean similares, pero no necesariamente se corresponden con los de CSS3.

Nose Borrarmicuenta

student•

FlexboxFroggy FTW!

Filiberto Santillán

student•

Por si quieren saber un poco más sobre flexbox, escribí este artículo hace ya un tiempo:

Nota: Todos los valores por default aplican para Web (Usando CSS), recuerden que hay que tener en cuenta que en React Native se comportan diferente.

Edinson Carranza Saldaña

student•

FLEXBOX como en la web

Camilo Ortegón

student•

Excelente Flexbox, es mucho más fácil que usar el AutoLayout nativo de iOS.

Mauricio Muriel

student•

En la definición de valores numéricos css (width, height por ejemplo) no se definen unidades como en el entorno de los navegadores? Es decir, no se usa: px, %, em, rem?

Alejandro Sanabria

student•

React native lo que usa por debajo para implementar flexbox en android y ios es un layout engine que se llama Yoga.

Carlos Andrés Millan Satizabal

student•

Muy buena la explicación de Flex Box. Practicando mucho se aprende rápido.

Yeraldine Martinez

student•

Flexbox así como en la web 💚 (aunque tienen diferencias)

Juan Manuel Ramallo

student•

No sé si este video termina correctamente, Gonzalo queda diciendo que “puede resultar medio confuso”

Jesús Frías

student•

Yo he podido verlo terminar bien.
Prueba otra vez, aunque tampoco te faltaba mucho.

Augusto Gonzalez

student•

Que excelente los enlaces. Estoy resolviendo el último nivel de flexboxfroggy es todo un reto! De verdad que este curso es genial!

jhon erick marroquin cardenas

student•

Hola chicos, alguien tiene algún ejemplo en git para realizar un menu slide de izquierda a derecha en react-native

ariel ventura

student•

Excelente (Y)

Jean Carlo Flores Carrasco

student•

para separar los estilos en otro archivo, debería usar un export? O existe algún otro método?

# Elige el eje principal:
flexDirection: 'column' || 'row'

# Alineamiento con el eje principal:
justifyContent: 'flex-start' || 'flex-end' || 'center' || 'space-around' || 'space-between'

# Alineamiento con el eje cruzado:
alignItems: 'flex-start' || 'flex-end' || 'center' || 'stretch'

# Alineamiento de un elemento sobre el eje cruzado:
alignSelf: 'flex-start' || 'flex-end' || 'center' || 'stretch' || 'auto'

# Comportamiento al final del contenedor:
flexWrap: 'wrap' || 'nowrap'

# Fluidez relativa de un elemento:
flex: number (el. 1, 0.5, 5)

Estilos y Layout con Flexbox

Lanzamiento del Curso

Intro a React Native y a Platzimusic, el proyecto del curso

Requerimientos técnicos del curso

Guía de instalación de React Native

Guía de instalación para desarrollar para Android

Introducción al Desarrollo Mobile

¿De qué se trata este Curso de React Native?

Tres enfoques para desarrollo de aplicaciones móviles

Qué es React Native y sus componentes básicos

Primera App con React Native

Instalación y configuración de entorno

Creando tu primera aplicación

Developer Experience (DX)

Componentes y APIs

Estilos y Layout con Flexbox

PlatziMusic

Armando la ArtistBox

Componentes reutilizables

Contenedores con Scroll

Armando nuestro listado de artistas

Consume datos de la API de last.fm para listar los artistas

Routing y Navegación

Agregando una vista de detalle

Autenticación de usuarios

Agregando login con Facebook para iOS

Agregando botón de login con Facebook para iOS

Agregando botón de login con Facebook para Android

Configurando autenticación con Firebase

Agreguemos las funcionalidades principales a nuestra app: likes y comentarios

Refactor y referencias de Firebase

Agrega la funcionalidad para hacer Like a un artista

Envia comentarios de un artista y almacénalos en Firebase

Lista los comentarios de un artista trayendo los datos desde Firebase

Agrega un avatar de usuario para mostrar en los comentarios

Refinando detalles de la app

Mejorando la UI/UX de PlatziMusic para Android y iOS en cada caso

Agrega recursos de imágenes en la aplicación para la pantalla de login

Agrega un ícono bonito para PlatziMusic

Llevando la app a los Stores

Cómo subir tu aplicación de React Native al Play Store

Cómo subir tu aplicación de React Native al App Store

Conclusiones

Cierre del curso

Desafíos

Desafío 1 - Lista los artistas top de tu país

Desafío 2 - Lista la cantidad precisa de comentarios

Desafío 3 - Comparte un artista en Facebook o Whatsapp