import axios from "axios";
import React, {useState, useEffect} from "react";
import {useNavigation} from "@react-navigation/native";
import {Card, ListItem, Button, Icon} from 'react-native-elements'
import {
View,
Text,
FlatList,
Image,
TouchableOpacity,
StyleSheet
} from "react-native";
function Pokedex() {
const styles = StyleSheet.create({
textoPoke: {
textTransform: 'capitalize',
color: 'red',
fontSize: 30
},
cuadrado: {
backgroundColor: "pink",
marginBottom: 10,
borderWidth: 2,
borderBottomLeftRadius: 20,
borderBottomRightRadius: 20,
borderTopLeftRadius: 20,
borderTopRightRadius: 20
},
icono: {
width: 80,
height: 80,
position: "absolute",
marginTop: "-4%",
marginLeft: "80%"
},
boton: {
padding: 50,
}
});
const [poke, setPoke] = useState([]);
const [loadPoke, setLoadPoke] = useState(
"https://pokeapi.co/api/v2/pokemon?limit=20"limit=10"
);
const getpoke = async () => {
const res = await fetch(loadPoke);
const data = await res.json();
setLoadPoke(data.next);
function createPokemonObjectcrearObjetoPokemon(result) {
result.forEach(async (pokemon) => {
const res = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemon.name}`);
const data = await res.json();
setPoke((currentList) => [
...currentList,
data
]);
});
}
createPokemonObjectcrearObjetoPokemon(data.results);
};
useEffect(() => {
getpoke();
}, []);
const navigation = useNavigation();
function siguientePagina(){
setPokeuseEffect([poke() => {
setpoke(poke.datanext);
}, []);
}
return (
<View
style={{
justifyContent: "center",
alignItems: "center"
}}>
<FlatList
data={poke}
renderItem={({item: pokeItem}) => (
<Card>
<Card.next]Title>{pokeItem.name}</Card.Title>
<Card.Divider/>
<Card.Image
source={{
uri: `https://projectpokemon.org/images/normal-sprite/${pokeItem.name}.gif`
}}></Card.Image>
<Text>Peso: {pokeItem.height}</Text>
<Text>Altura: {pokeItem.weight}</Text>
<Text
style={{
textTransform: 'capitalize'
}}>Habilidades: {
pokeItem
.abilities[0]
.ability
.name
}</Text>
</Card>
)}/>
</View>
);
};
export default Pokedex;
¿Alguna sugerencia para function siguientepagina() ? Actualizo la pregunta agregando mas información. No se si hice mal la función, mal el onpress, sinceramente estoy bastante confundido. Tampoco se si el usestate se puede usar dentro de una función o tal vez existe una manera mas simple y correcta.