You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

2 Días
12 Hrs
31 Min
13 Seg

Renderizando la PokemonCard

8/17
Resources

Contributions 14

Questions 5

Sort by:

Want to see more contributions, questions and answers from the community?

Aca encontre un articulo que explica como se usa flex box en React Native
https://medium.com/@lmleon19/flexbox-en-react-native-9defe7adfaa

Los view para dar agregar style no me parece buena práctica, se formará un callback Hell

Usando un solo view creo que podemos tener el mismo resultado

const PokemonCard = (props) => {
    const { pokemon } = props
    const goToPokemon = () => {
        console.log("pokemon send ", pokemon)
    }
    return (
        <TouchableWithoutFeedback onPress={goToPokemon}>
            <View style={styles.card}>
                <Text>{pokemon.name}</Text>
                <Image source={{ uri: pokemon.image }} style={styles.image} />
            </View>

        </TouchableWithoutFeedback>
    )
}
export default PokemonCard

const styles = StyleSheet.create({
    card: {
        flex: 1,
        backgroundColor: "#a4d1b3",
        width: 100,
        height: 100,
        margin: 8,
        borderRadius: 20
    },
    image: {
        width: 100,
        height: 100,
    }
})  

Segun la documentación de React Native, noes para nada recomendado usar “TouchableWithoutFeedbak”, literalmente dice: “Do not use unless you have a very good reason. All elements that respond to press should have a visual feedback when touched.”

en la ultima version el componente 'TouchableWithoutFeedback' fue deprecado (no tiene soporte, no se debe utilizar), en cambio esta el componente 'Pressable'

Los view para dar agregar style no me parece buena práctica, se formará un callback Hell

Hola, para arreglar la carga doble de información cambie la linea del keyExtractor en PokemonsList.jsx a la siguiente manera:

        keyExtractor={(pokemon, index) => String(index)}

Por el momento me ha funcionado bien 😄

El componente Image no acepta imágenes SVG, por lo que en ese caso tendrian que usar una libreria como react-native-svg y usar el componente SvgUri de esta manera:

<SvgUri
    width={100}
    height={100}
    uri={data.sprites.other["dream_world"].front_default}
 />

TouchableWithoutFeedback recomienda mejor utilizar el componente Pressable(). Para que se visualice de la mejor manera ese componente debe estar adentro de un “container”. Quedaría de la siguiente manera

export default function PokemonCard(props) {
    const { pokemon } = props;

    const goToPokemon = () => {
        console.log(`Es pokemon ${pokemon.name}`);
    }

    return (
        <View style={styles.container}>
            <Pressable onPress={goToPokemon}>
                <View style={styles.card}>
                    <View style={styles.spacing}>
                        <View style={styles.bgCard}>
                            <Text style={styles.number}>#{`${pokemon.order}`.padStart(3, 0)}</Text>
                            <Text style={styles.name}>{pokemon.name}</Text>
                            <Image source={{ uri: pokemon.image }} style={styles.image} />
                        </View>
                    </View>
                </View>
            </Pressable>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    card: {
        flex: 1,
        height: 130
    },
    spacing: {
        flex: 1,
        padding: 5
    },
    bgCard: {
        backgroundColor: "grey"
    },
    image: {
        position: "absolute",
        bottom: 2,
        right: 2,
        width: 90,
        height: 90
    },
    name: {
        color: "#fff",
        paddingTop: 10,
        fontSize: 15,
        fontWeight: "bold",
    },
    number: {
        position: "absolute",
        top: 10,
        right: 10,
        fontSize: 11,
        color: "#fff"
    }
});

Si les aparece un borde en arriba y abajo es normal, en la siguiente clase lo quitan con “headertransparent”

Alguien mas se dio cuenta que en el API no esta el pokemon #4??? Es curioso jaja
Deberias apagar las recomendaciones del IDE grabando las clases tu pantalla esta como muy acercada o es muy chica y se consume media pantalla hahah
Esta clase me regreso a mi infancia, ha motivado mas mis ganas de aprender mobile.

Hasta ahora vamos todo bien, no hay mayor problema usando la versión 6