No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Convierte tus certificados en títulos universitarios en USA

Antes: $249

Currency
$209

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscríbete

Termina en:

16 Días
6 Hrs
32 Min
3 Seg

Lista de Pokemon con FlatList

7/17
Recursos

Aportes 6

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Aqui les dejo el componente


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

const PokemonList = ({ pokemontList }) => {

    return (
        <FlatList
            data={pokemontList}
            numColumns={2}
            showsVerticalScrollIndicator={false}
            keyExtractor={(pokemon) => String(pokemon.id)}
            renderItem={({ item }) => <Text>{item.name}</Text>}
            contentContainerStyle={styles.flatListContainer}
        />
    );
}
const styles = StyleSheet.create({
    flatListContainer: {
        paddingHorizontal: 5,
    }
})

export default PokemonList;


Para los que tengan el error cargando la info con FlatList, en la siguiente clase explican que es normal y vamos bien

Tuve problemas para renderizar el componente tal cual como en en la clase.

Tuve en cuenta la documentación que se encuentra en el siguiente link .

Les comparto mi componente:

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

export default function PokemonList(props) {
  const { pokemons } = props;

  const renderItem = ({ item }) => (
    <View>
      <Text>{item.name}</Text>
    </View>
  );

  return (
    <FlatList
      data={pokemons}
      numColumns={2}
      showsVerticalScrollIndicator={false}
      renderItem={renderItem}
      keyExtractor={(item) => String(item.id)}
      contentContainerStyle={styles.flatListContentContainer}
    />
  );
}

const styles = StyleSheet.create({
  flatListContentContainer: {
    paddingHorizontal: 15,
  },
});
en el minuto 5:30 hay un megafail, deberías explicar que el { item } es una propiedad del FlatList pasada al metodo renderItem y es el nombre propio, porque primero pones pokemon y lo cambias por item, sin explicar eso, confudiendo a medio mundo xD

¿Qué es FlatList?

.
Es una manera fácil de hacer una lista de datos de desplazamiento eficiente. No solo es eficiente, sino que tiene una API increíblemente simple con la que trabajar. Si has utilizado o está familiarizado con el componente ListView, es muy similar.
.

Uso básico

.
Hay dos accesorios principales que debes conocer en un FlatList y eso es datos y renderItem . La primera es una matriz de datos que se utiliza para crear la lista, normalmente una matriz de objetos, y la segunda es la función que tomará un elemento individual de la matriz de datos y representará un componente para él.

Por ahora bastate interesante, aunque bastante basico tambien.