El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Listas y Claves

Siguiente ►
►

En esta sección, aprenderemos cómo manejar listas en React Native y la importancia de las claves (keys) para el rendimiento y la correcta renderización de los componentes. Este conocimiento es fundamental para crear aplicaciones que manejen datos dinámicos de manera eficiente.

Conceptos Clave

  1. Listas en React Native:

    • Las listas son una forma común de mostrar datos en una aplicación.
    • React Native proporciona componentes como FlatList y SectionList para manejar listas de manera eficiente.

  2. Claves (Keys):

    • Las claves ayudan a React a identificar qué ítems han cambiado, han sido agregados o eliminados.
    • Las claves deben ser únicas entre los hermanos (elementos en el mismo nivel).

FlatList

FlatList es un componente de React Native que se utiliza para renderizar listas de datos de manera eficiente. A continuación, se muestra un ejemplo básico de cómo usar FlatList.

Ejemplo Básico de FlatList

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

const DATA = [
  { id: '1', title: 'Item 1' },
  { id: '2', title: 'Item 2' },
  { id: '3', title: 'Item 3' },
];

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ón del Código

  1. Importaciones:

    • FlatList, Text, View, y StyleSheet son importados desde react-native.

  2. Datos:

    • DATA es un array de objetos que contiene los datos que se mostrarán en la lista.

  3. Componente Item:

    • Item es un componente funcional que recibe title como prop y lo muestra dentro de un View.

  4. Componente App:

    • FlatList se utiliza para renderizar la lista.
    • data es la fuente de datos para la lista.
    • renderItem es una función que toma un ítem de datos y devuelve un componente Item.
    • keyExtractor es una función que toma un ítem y devuelve su clave única (id en este caso).

  5. Estilos:

    • styles define los estilos para los componentes item y title.

SectionList

SectionList es otro componente de React Native que se utiliza para renderizar listas seccionadas. Es útil cuando necesitas agrupar ítems en secciones.

Ejemplo Básico de SectionList

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

const DATA = [
  {
    title: 'Main dishes',
    data: ['Pizza', 'Burger', 'Risotto'],
  },
  {
    title: 'Sides',
    data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
  },
  {
    title: 'Drinks',
    data: ['Water', 'Coke', 'Beer'],
  },
  {
    title: 'Desserts',
    data: ['Cheese Cake', 'Ice Cream'],
  },
];

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

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

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

export default App;

Explicación del Código

  1. Importaciones:

    • SectionList, Text, View, y StyleSheet son importados desde react-native.

  2. Datos:

    • DATA es un array de objetos, donde cada objeto representa una sección con un título y un array de datos.

  3. Componente Item:

    • Similar al ejemplo anterior, Item es un componente funcional que recibe title como prop.

  4. Componente App:

    • SectionList se utiliza para renderizar la lista seccionada.
    • sections es la fuente de datos para la lista.
    • keyExtractor es una función que toma un ítem y su índice y devuelve una clave única.
    • renderItem es una función que toma un ítem de datos y devuelve un componente Item.
    • renderSectionHeader es una función que toma una sección y devuelve un componente Text para el encabezado de la sección.

  5. Estilos:

    • styles define los estilos para los componentes item, header, y title.

Ejercicio Práctico

Ejercicio

Crea una aplicación que muestre una lista de tareas pendientes utilizando FlatList. Cada tarea debe tener un título y una descripción. Asegúrate de que cada ítem tenga una clave única.

Solución

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

const TASKS = [
  { id: '1', title: 'Comprar leche', description: 'Ir al supermercado y comprar leche' },
  { id: '2', title: 'Llamar a Juan', description: 'Llamar a Juan para discutir el proyecto' },
  { id: '3', title: 'Estudiar React Native', description: 'Completar el módulo de listas y claves' },
];

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

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

const styles = StyleSheet.create({
  item: {
    backgroundColor: '#e0f7fa',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
  },
  description: {
    fontSize: 16,
  },
});

export default App;

Explicación del Código

  1. Datos:

    • TASKS es un array de objetos que contiene las tareas con id, title, y description.

  2. Componente TaskItem:

    • TaskItem es un componente funcional que recibe title y description como props y los muestra dentro de un View.

  3. Componente App:

    • FlatList se utiliza para renderizar la lista de tareas.
    • data es la fuente de datos para la lista.
    • renderItem es una función que toma un ítem de datos y devuelve un componente TaskItem.
    • keyExtractor es una función que toma un ítem y devuelve su clave única (id en este caso).

  4. Estilos:

    • styles define los estilos para los componentes item, title, y description.

Conclusión

En esta sección, hemos aprendido cómo manejar listas en React Native utilizando FlatList y SectionList, y la importancia de las claves para la correcta renderización de los componentes. Estos conceptos son fundamentales para crear aplicaciones que manejen datos dinámicos de manera eficiente. En la siguiente sección, exploraremos cómo manejar formularios y componentes controlados en React Native.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados