El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Estilització amb Flexbox

Següent ►
►

En aquest tema, aprendrem a utilitzar Flexbox per estilitzar els components en React Native. Flexbox és un model de disseny que permet distribuir espai entre els elements d'una interfície d'usuari i alinear-los de manera eficient. És especialment útil per crear dissenys responsius i adaptables.

Conceptes Clau de Flexbox

Abans de començar a utilitzar Flexbox, és important comprendre alguns conceptes clau:

  • Container Flex: L'element que conté els elements flexibles (flex items).
  • Flex Items: Els elements fills directes del container flex.
  • Eixos: Flexbox treballa amb dos eixos: l'eix principal (main axis) i l'eix creuat (cross axis).
    • Eix Principal: Per defecte, és l'eix horitzontal.
    • Eix Creuat: Per defecte, és l'eix vertical.

Propietats del Container Flex

Les propietats següents s'apliquen al container flex:

  • flexDirection: Defineix la direcció dels flex items.

    • row: Els elements es disposen en una fila horitzontal.
    • column: Els elements es disposen en una columna vertical.
    • row-reverse: Els elements es disposen en una fila horitzontal inversa.
    • column-reverse: Els elements es disposen en una columna vertical inversa.

  • justifyContent: Defineix com es distribueixen els flex items al llarg de l'eix principal.

    • flex-start: Els elements s'alineen al començament de l'eix principal.
    • flex-end: Els elements s'alineen al final de l'eix principal.
    • center: Els elements s'alineen al centre de l'eix principal.
    • space-between: Els elements es distribueixen amb espai igual entre ells.
    • space-around: Els elements es distribueixen amb espai igual al voltant d'ells.

  • alignItems: Defineix com es distribueixen els flex items al llarg de l'eix creuat.

    • flex-start: Els elements s'alineen al començament de l'eix creuat.
    • flex-end: Els elements s'alineen al final de l'eix creuat.
    • center: Els elements s'alineen al centre de l'eix creuat.
    • stretch: Els elements s'estiren per omplir l'espai disponible.

Propietats dels Flex Items

Les propietats següents s'apliquen als flex items:

  • flex: Defineix la capacitat de creixement d'un element.

    • flex: 1: L'element ocuparà tot l'espai disponible.
    • flex: 2: L'element ocuparà el doble d'espai que un element amb flex: 1.

  • alignSelf: Permet sobreescriure l'alineació definida per alignItems per a un element específic.

    • auto: Utilitza el valor de alignItems del container.
    • flex-start: L'element s'alinea al començament de l'eix creuat.
    • flex-end: L'element s'alinea al final de l'eix creuat.
    • center: L'element s'alinea al centre de l'eix creuat.
    • stretch: L'element s'estira per omplir l'espai disponible.

Exemple Pràctic

A continuació, veurem un exemple pràctic d'ús de Flexbox en React Native:

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const FlexboxExample = () => {
  return (
    <View style={styles.container}>
      <View style={styles.box1}>
        <Text style={styles.text}>Box 1</Text>
      </View>
      <View style={styles.box2}>
        <Text style={styles.text}>Box 2</Text>
      </View>
      <View style={styles.box3}>
        <Text style={styles.text}>Box 3</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
  },
  box1: {
    width: 50,
    height: 50,
    backgroundColor: 'red',
  },
  box2: {
    width: 50,
    height: 50,
    backgroundColor: 'green',
  },
  box3: {
    width: 50,
    height: 50,
    backgroundColor: 'blue',
  },
  text: {
    color: '#fff',
    textAlign: 'center',
    lineHeight: 50,
  },
});

export default FlexboxExample;

Explicació del Codi

  1. Container Flex: El View amb l'estil container actua com a container flex.
  2. Flex Items: Els View amb els estils box1, box2 i box3 són els flex items.
  3. Propietats del Container:
    • flex: 1: El container ocupa tot l'espai disponible.
    • flexDirection: 'row': Els elements es disposen en una fila horitzontal.
    • justifyContent: 'space-between': Els elements es distribueixen amb espai igual entre ells.
    • alignItems: 'center': Els elements s'alineen al centre de l'eix creuat.
  4. Propietats dels Flex Items: Cada View té una mida fixa i un color de fons diferent.

Exercici Pràctic

Crea una interfície d'usuari amb tres caixes disposades en una columna vertical, centrades tant horitzontalment com verticalment, i amb espai igual entre elles.

Solució

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const FlexboxExercise = () => {
  return (
    <View style={styles.container}>
      <View style={styles.box1}>
        <Text style={styles.text}>Box 1</Text>
      </View>
      <View style={styles.box2}>
        <Text style={styles.text}>Box 2</Text>
      </View>
      <View style={styles.box3}>
        <Text style={styles.text}>Box 3</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
  },
  box1: {
    width: 50,
    height: 50,
    backgroundColor: 'red',
  },
  box2: {
    width: 50,
    height: 50,
    backgroundColor: 'green',
  },
  box3: {
    width: 50,
    height: 50,
    backgroundColor: 'blue',
  },
  text: {
    color: '#fff',
    textAlign: 'center',
    lineHeight: 50,
  },
});

export default FlexboxExercise;

Explicació de la Solució

  1. Container Flex: El View amb l'estil container actua com a container flex.
  2. Propietats del Container:
    • flexDirection: 'column': Els elements es disposen en una columna vertical.
    • justifyContent: 'space-around': Els elements es distribueixen amb espai igual al voltant d'ells.
    • alignItems: 'center': Els elements s'alineen al centre de l'eix creuat.

Conclusió

En aquesta secció, hem après a utilitzar Flexbox per estilitzar els components en React Native. Hem vist les propietats clau del container flex i dels flex items, i hem practicat amb exemples pràctics. Flexbox és una eina poderosa per crear dissenys responsius i adaptables, i és essencial per a qualsevol desenvolupador de React Native.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats