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

ScrollView y ListView

Siguiente ►
►

En esta lección, aprenderemos sobre dos componentes esenciales para manejar listas y contenido desplazable en React Native: ScrollView y ListView. Estos componentes son fundamentales para crear interfaces de usuario que puedan manejar grandes cantidades de datos de manera eficiente.

ScrollView

ScrollView es un componente que permite a los usuarios desplazarse por el contenido que excede el tamaño de la pantalla. Es útil para mostrar contenido que no cabe en una sola vista.

Características Clave de ScrollView

  • Desplazamiento Vertical y Horizontal: Permite desplazarse tanto vertical como horizontalmente.
  • Anidación: Puede contener otros componentes y vistas.
  • Control de Desplazamiento: Proporciona métodos para controlar el desplazamiento programáticamente.

Ejemplo Básico de ScrollView

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

const ScrollViewExample = () => {
  return (
    <ScrollView style={styles.container}>
      <Text style={styles.text}>Elemento 1</Text>
      <Text style={styles.text}>Elemento 2</Text>
      <Text style={styles.text}>Elemento 3</Text>
      <Text style={styles.text}>Elemento 4</Text>
      <Text style={styles.text}>Elemento 5</Text>
      <Text style={styles.text}>Elemento 6</Text>
      <Text style={styles.text}>Elemento 7</Text>
      <Text style={styles.text}>Elemento 8</Text>
      <Text style={styles.text}>Elemento 9</Text>
      <Text style={styles.text}>Elemento 10</Text>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 50,
  },
  text: {
    fontSize: 20,
    margin: 10,
  },
});

export default ScrollViewExample;

Explicación del Código

  • ScrollView: El componente principal que permite el desplazamiento.
  • Text: Elementos de texto que se desplazarán dentro del ScrollView.
  • StyleSheet: Define los estilos para el contenedor y los textos.

ListView

ListView es un componente más eficiente para manejar listas grandes. Sin embargo, ha sido reemplazado por FlatList y SectionList en versiones más recientes de React Native. Aquí nos centraremos en FlatList.

Características Clave de FlatList

  • Renderizado Eficiente: Solo renderiza los elementos visibles en la pantalla.
  • Soporte para Datos Grandes: Maneja listas grandes de datos de manera eficiente.
  • Personalización: Permite personalizar el renderizado de cada elemento.

Ejemplo Básico de FlatList

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

const data = [
  { key: '1', name: 'Elemento 1' },
  { key: '2', name: 'Elemento 2' },
  { key: '3', name: 'Elemento 3' },
  { key: '4', name: 'Elemento 4' },
  { key: '5', name: 'Elemento 5' },
  { key: '6', name: 'Elemento 6' },
  { key: '7', name: 'Elemento 7' },
  { key: '8', name: 'Elemento 8' },
  { key: '9', name: 'Elemento 9' },
  { key: '10', name: 'Elemento 10' },
];

const FlatListExample = () => {
  return (
    <FlatList
      data={data}
      renderItem={({ item }) => (
        <View style={styles.item}>
          <Text style={styles.text}>{item.name}</Text>
        </View>
      )}
      keyExtractor={item => item.key}
    />
  );
};

const styles = StyleSheet.create({
  item: {
    padding: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
  text: {
    fontSize: 18,
  },
});

export default FlatListExample;

Explicación del Código

  • FlatList: El componente principal para renderizar listas.
  • data: Un array de objetos que contiene los datos a mostrar.
  • renderItem: Una función que define cómo se renderiza cada elemento de la lista.
  • keyExtractor: Una función que extrae una clave única para cada elemento.

Ejercicio Práctico

Ejercicio

Crea una aplicación que muestre una lista de tareas utilizando FlatList. Cada tarea debe tener un nombre y una descripción.

Solución

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

const tasks = [
  { key: '1', name: 'Comprar leche', description: 'Comprar leche en el supermercado' },
  { key: '2', name: 'Llamar a Juan', description: 'Llamar a Juan para discutir el proyecto' },
  { key: '3', name: 'Hacer ejercicio', description: 'Hacer 30 minutos de ejercicio' },
  { key: '4', name: 'Leer un libro', description: 'Leer 20 páginas del libro' },
  { key: '5', name: 'Escribir código', description: 'Trabajar en el proyecto de React Native' },
];

const TaskList = () => {
  return (
    <FlatList
      data={tasks}
      renderItem={({ item }) => (
        <View style={styles.item}>
          <Text style={styles.name}>{item.name}</Text>
          <Text style={styles.description}>{item.description}</Text>
        </View>
      )}
      keyExtractor={item => item.key}
    />
  );
};

const styles = StyleSheet.create({
  item: {
    padding: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
  name: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  description: {
    fontSize: 16,
    color: '#666',
  },
});

export default TaskList;

Explicación del Código

  • tasks: Un array de objetos que contiene las tareas.
  • TaskList: Un componente que renderiza la lista de tareas utilizando FlatList.
  • renderItem: Renderiza cada tarea mostrando su nombre y descripción.
  • keyExtractor: Extrae una clave única para cada tarea.

Conclusión

En esta lección, hemos aprendido a usar ScrollView y FlatList para manejar contenido desplazable y listas en React Native. ScrollView es útil para contenido pequeño y desplazable, mientras que FlatList es más eficiente para listas grandes. Con estos componentes, puedes crear interfaces de usuario más dinámicas y eficientes.

En la próxima lección, exploraremos cómo manejar la entrada del usuario en React Native. ¡Sigue practicando y nos vemos en la siguiente lección!

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