Skip to main content
se añadieron 2919 caracteres en el cuerpo
Origen Enlace
      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.

  const [poke, setPoke] = useState([]);
    const [loadPoke, setLoadPoke] = useState(
        "https://pokeapi.co/api/v2/pokemon?limit=20"
    );
    const getpoke = async () => {
        const res = await fetch(loadPoke);
        const data = await res.json();
        setLoadPoke(data.next);

        function createPokemonObject(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
                ]);
            });
        }
        createPokemonObject(data.results);
    };
    useEffect(() => {
        getpoke();
    }, []);

    const navigation = useNavigation();

    function siguientePagina(){
        setPoke([poke.data.next])
    }

¿Alguna sugerencia para function siguientepagina() ?

      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=10"
    );
    const getpoke = async () => {
        const res = await fetch(loadPoke);
        const data = await res.json();
        setLoadPoke(data.next);

        function crearObjetoPokemon(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
                ]);
            });
        }
        crearObjetoPokemon(data.results);
    };
    useEffect(() => {
        getpoke();
    }, []);

    const navigation = useNavigation();

    function siguientePagina(){
        useEffect(() => {
            setpoke(poke.next);
        }, []);
    }
   
    return (
        <View
            style={{
                justifyContent: "center",
                alignItems: "center"
            }}>
            <FlatList
                data={poke}
                renderItem={({item: pokeItem}) => (
                    <Card>
                        <Card.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.

Origen Enlace

¿Como puedo hacer un boton para ir a la siguiente pagina o a la anterior?

Estoy utilizando la PokeApi y solo me falta ir a la siguiente y anterior pagina... Por ahora pense en hacer una función utilizando el set pero no quiere acceder a "poke". A continuación dejo el codigo . (Quiero aclarar que dentro de la api esta el array next el cual tiene la siguiente pagina.)

  const [poke, setPoke] = useState([]);
    const [loadPoke, setLoadPoke] = useState(
        "https://pokeapi.co/api/v2/pokemon?limit=20"
    );
    const getpoke = async () => {
        const res = await fetch(loadPoke);
        const data = await res.json();
        setLoadPoke(data.next);

        function createPokemonObject(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
                ]);
            });
        }
        createPokemonObject(data.results);
    };
    useEffect(() => {
        getpoke();
    }, []);

    const navigation = useNavigation();

    function siguientePagina(){
        setPoke([poke.data.next])
    }

¿Alguna sugerencia para function siguientepagina() ?