No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Renderizando la PokemonCard

8/17
Recursos

Aportes 9

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥淭ouchableWithoutFeedbak鈥, literalmente dice: 鈥淒o not use unless you have a very good reason. All elements that respond to press should have a visual feedback when touched.鈥

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 馃槃

TouchableWithoutFeedback recomienda mejor utilizar el componente Pressable(). Para que se visualice de la mejor manera ese componente debe estar adentro de un 鈥渃ontainer鈥. 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 鈥渉eadertransparent鈥

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