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

Llistes i claus

Següent ►
►

En aquest tema, aprendrem com treballar amb llistes a React Native i la importància de les claus (keys) per a la renderització eficient de components. Les llistes són una part fonamental de moltes aplicacions mòbils, ja que permeten mostrar col·leccions de dades de manera organitzada i interactiva.

Objectius

  • Comprendre com renderitzar llistes a React Native.
  • Aprendre a utilitzar les claus per a una renderització eficient.
  • Implementar components com FlatList i SectionList.

  1. Renderització de llistes amb FlatList

FlatList és un component de React Native dissenyat per renderitzar llistes de dades de manera eficient. És ideal per a llistes llargues, ja que només renderitza els elements visibles a la pantalla.

Exemple bàsic de FlatList

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

const DATA = [
  { id: '1', title: 'Element 1' },
  { id: '2', title: 'Element 2' },
  { id: '3', title: 'Element 3' },
  // Afegeix més elements segons sigui necessari
];

const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

const App = () => {
  return (
    <FlatList
      data={DATA}
      renderItem={({ item }) => <Item title={item.title} />}
      keyExtractor={item => item.id}
    />
  );
};

const styles = StyleSheet.create({
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});

export default App;

Explicació del codi

  • DATA: És un array d'objectes que conté les dades que es mostraran a la llista. Cada objecte ha de tenir una propietat única id.
  • Item: És un component funcional que representa cada element de la llista.
  • FlatList: El component principal que renderitza la llista. Té les següents propietats:
    • data: L'array de dades que es mostrarà.
    • renderItem: Una funció que especifica com renderitzar cada element de la llista.
    • keyExtractor: Una funció que retorna una clau única per a cada element.

  1. Importància de les claus (keys)

Les claus són essencials per a la renderització eficient de llistes a React Native. Permeten a React identificar quins elements han canviat, afegit o eliminat. Això ajuda a optimitzar el procés de renderització i millorar el rendiment de l'aplicació.

Errors comuns amb les claus

  • No utilitzar claus úniques: Si les claus no són úniques, React no podrà identificar correctament els elements.
  • Utilitzar l'índex de l'array com a clau: Això pot causar problemes si l'ordre dels elements canvia.

  1. Renderització de llistes amb SectionList

SectionList és similar a FlatList, però permet agrupar els elements en seccions. És útil per a llistes que necessiten una estructura més complexa.

Exemple bàsic de SectionList

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

const DATA = [
  {
    title: 'Secció 1',
    data: ['Element 1', 'Element 2', 'Element 3'],
  },
  {
    title: 'Secció 2',
    data: ['Element 4', 'Element 5', 'Element 6'],
  },
  // Afegeix més seccions segons sigui necessari
];

const App = () => {
  return (
    <SectionList
      sections={DATA}
      keyExtractor={(item, index) => item + index}
      renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
      renderSectionHeader={({ section: { title } }) => (
        <Text style={styles.header}>{title}</Text>
      )}
    />
  );
};

const styles = StyleSheet.create({
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  header: {
    fontSize: 32,
    backgroundColor: '#fff',
  },
});

export default App;

Explicació del codi

  • DATA: És un array d'objectes que conté les dades agrupades en seccions. Cada objecte té una propietat title i una propietat data que és un array d'elements.
  • SectionList: El component principal que renderitza la llista amb seccions. Té les següents propietats:
    • sections: L'array de dades agrupades en seccions.
    • keyExtractor: Una funció que retorna una clau única per a cada element.
    • renderItem: Una funció que especifica com renderitzar cada element de la llista.
    • renderSectionHeader: Una funció que especifica com renderitzar el capçal de cada secció.

Exercicis pràctics

Exercici 1: Crear una llista de contactes

Crea una aplicació que mostri una llista de contactes utilitzant FlatList. Cada contacte ha de tenir un nom i un número de telèfon.

Exercici 2: Crear una llista de tasques amb seccions

Crea una aplicació que mostri una llista de tasques agrupades per categories utilitzant SectionList. Cada tasca ha de tenir un títol i una descripció.

Solucions

Solució de l'exercici 1

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

const CONTACTS = [
  { id: '1', name: 'John Doe', phone: '123-456-7890' },
  { id: '2', name: 'Jane Smith', phone: '098-765-4321' },
  // Afegeix més contactes segons sigui necessari
];

const ContactItem = ({ name, phone }) => (
  <View style={styles.item}>
    <Text style={styles.name}>{name}</Text>
    <Text style={styles.phone}>{phone}</Text>
  </View>
);

const App = () => {
  return (
    <FlatList
      data={CONTACTS}
      renderItem={({ item }) => <ContactItem name={item.name} phone={item.phone} />}
      keyExtractor={item => item.id}
    />
  );
};

const styles = StyleSheet.create({
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  name: {
    fontSize: 24,
  },
  phone: {
    fontSize: 18,
  },
});

export default App;

Solució de l'exercici 2

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

const TASKS = [
  {
    title: 'Personal',
    data: [
      { id: '1', title: 'Comprar menjar', description: 'Comprar verdures i fruites' },
      { id: '2', title: 'Fer exercici', description: 'Correr 5 km' },
    ],
  },
  {
    title: 'Treball',
    data: [
      { id: '3', title: 'Reunió amb el client', description: 'Discutir els requisits del projecte' },
      { id: '4', title: 'Enviar informe', description: 'Enviar l'informe mensual' },
    ],
  },
  // Afegeix més seccions i tasques segons sigui necessari
];

const TaskItem = ({ title, description }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
    <Text style={styles.description}>{description}</Text>
  </View>
);

const App = () => {
  return (
    <SectionList
      sections={TASKS}
      keyExtractor={(item, index) => item.id}
      renderItem={({ item }) => <TaskItem title={item.title} description={item.description} />}
      renderSectionHeader={({ section: { title } }) => (
        <Text style={styles.header}>{title}</Text>
      )}
    />
  );
};

const styles = StyleSheet.create({
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 24,
  },
  description: {
    fontSize: 18,
  },
  header: {
    fontSize: 32,
    backgroundColor: '#fff',
  },
});

export default App;

Conclusió

En aquesta secció, hem après com treballar amb llistes a React Native utilitzant FlatList i SectionList. També hem vist la importància de les claus per a la renderització eficient de components. Amb aquests coneixements, estàs preparat per crear aplicacions que mostrin col·leccions de dades de manera organitzada i eficient. En el següent tema, explorarem com treballar amb formularis i components controlats.

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