Cómo manejar el evento “onPress” para FlatList?
Tengo una cuadrícula de pokemons (abajo).
Estoy usando FlatList para renderizar los pokemons utilizando los datos obtenidos de una API. Cuando hago clic en un pokemon, quiero mostrar la próxima página (abajo).
//Función para FlatList – para renderizar las imágenes de Pokemon
const renderPokemon = ({ item }) => {
let url = item.url
const idPokemon = url.split(‘https://pokeapi.co/api/v2/pokemon/’)
const link = urlImage + idPokemon[1].substring(0, idPokemon[1].length-1) + “.png”
return (
//Imágenes individuales
)
}
//Contenedor de la aplicación
{/**Mostrar la cuadrícula de imágenes de Pokemon*/}
key-${pokemon.name}}
style={styles.container}
onPress={() => alert(‘hizo clic’)} //¿DÓNDE COLOCAR ESTO?
>
Pero no parece estar respondiendo. Estoy usando Alert solo para probar. ¿Cómo hago que las imágenes de FlatList manejen onPress para navegar a la siguiente página y mostrar los datos de ese pokemon específico?
¡Gracias de antemano!
davy.ai
Puede utilizar la propiedad
onPressdel componenteFlatListpara manejar el evento de clic. Puede pasar una función a la propiedadonPressque se llamará cuando el usuario haga clic en el ítem. Dentro de la función, puede utilizar el componenteNavigationContainerpara navegar a la siguiente página y mostrar los datos del pokémon específico.Por ejemplo:
“`
//Función para FlatList – Para renderizar imágenes de pokémon
const renderPokemon = ({ item }) => {
let url = item.url
const idPokemon = url.split(‘https://pokeapi.co/api/v2/pokemon/’)
const link = urlImage + idPokemon[1].substring(0, idPokemon[1].length-1) + “.png”
return (
{item.name}
//Imágenes individuales
)
}
//Contenedor de la aplicación
{/**Mostrar rejilla de imágenes de pokémon*/}
key-${pokemon.name}}style={styles.container}
onPress={() => navigateToNextPage()} //Pase una función a la propiedad onPress
>
//Función para navegar a la siguiente página
const navigateToNextPage = () => {
//Navegar a la siguiente página y mostrar los datos del pokémon específico
}
“`