Como usar FlexBox en ReactNative

En este post aprenderemos a utilizar FlexBox en ReacNative.

Como usar FlexBox en ReactNative

En este post aprenderemos a utilizar FlexBox en ReacNative.


flexDirection

Un componente puede especificar el diseño de sus views utilizando el algoritmo flexbox. Flexbox está diseñado para proporcionar un diseño consistente en diferentes tamaños de pantalla.

Flexbox funciona de la misma manera en React Native como lo hace en CSS en la web, con algunas excepciones.


import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

export default class FlexDirectionBasics extends Component {
 render() {
  return (
   // Try setting `flexDirection` to `column`.
   <View style={{flex: 1, flexDirection: 'row'}}>
    <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
    <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
    <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
   </View>
  );
 }
};



Compartir:


0 Comentarios

Este curso no cuenta con comentarios aún; puedes ser el primero, escribenos tu duda, consulta, sugerencia o calificación.

Comentar ahora

Tutor

Tutor
Cristhian
Mobile Developer

Post Relacionados

Empezando con RecyclerView en android

En este post veremos la implementación del una lista RecyclerView.


Calificación

4.5

5 Comentarios
Comentar ahora