0
221
Views¿Cómo manejar onpress para FlatList?
Tengo una grilla de pokemons (abajo).
Estoy usando flatlist para renderizar los pokemons usando los datos obtenidos de una API. Cuando hago clic en un pokemon, quiero mostrar la página siguiente (abajo)
//Function for FlatList - To render Pokemon images 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 ( //Individual images <View style={styles.pokemons}> <Image style={styles.image} resizeMode='contain' source={{uri:link}} /> <Text style={styles.text}>{item.name}</Text> </View> ) } //App container <NavigationContainer> <View style={styles.container}> <TopBar/> {/**Pokemon image grid display*/} <FlatList numColumns={2} data={pokemons} renderItem={renderPokemon} keyExtractor={pokemon => `key-${pokemon.name}`} style={styles.container} onPress={() => alert('clicked')} //WHERE DO I PUT THIS ? > </FlatList> </View> <NavigationContainer>Pero no parece estar respondiendo. Estoy usando Alert solo para probar. ¿Cómo obtengo las imágenes de la lista plana para manejarlas en la prensa para que navegue a la página siguiente y muestre los datos para ese pokemon específico?
¡Gracias por adelantado!
1 answers
Answer question0
Debe agregar Pressable dentro de cada elemento renderizado, después de importar desde react-native y agregar el evento onPress y hacer lo requerido en la función de devolución de llamada (como en su caso, navegar a una nueva pantalla). Puede pasar pokemonDetailsObj en los parámetros de ruta o simplemente el pokemonId, dependiendo de cómo funcione el componente de detalles de Pokémon.
También le sugiero que cree un navegador de pila y registre los componentes de su pantalla para usar mejor las características de [reactnavigation][1].
import { Pressable} from 'react-native'; 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 ( //Individual images <Pressable onPress={() => { // pass the 'ScreenName' of the Pokemon details component. props.navigation.navigate('ScreenName', { // props to be passed to the component like pokemonId or full pokemon Details Obj }) }} > <Image style={styles.image} resizeMode='contain' source={{uri:link}} /> <Text style={styles.text}>{item.name}</Text> </Pressable> ) } [1]: https://reactnavigation.org/docs/getting-started