Cursos Empresas Blog Live Conf Eventos Precios

0:0015:14

Renderizando la PokemonCard

Curso de React Native: Manejo de Listas y Consumo de APIs

Clase 8 / 17

Ver clases

Comentarios

Luis Alejandro Nieto Ruth#3073248
Aca encontre un articulo que explica como se usa flex box en React Native https://medium.com/@lmleon19/flexbox-en-react-native-9defe7adfaa
Percy Tejada#3116813
Les comparto la documentación sobre el método padStart: https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

Darío Condori Humerez#3411031

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,
    }
})

Jaime David Burbano Montoya#3779442
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."
Julio Santacruz#5146238
en la ultima version el componente 'TouchableWithoutFeedback' fue deprecado (no tiene soporte, no se debe utilizar), en cambio esta el componente 'Pressable'
Darío Condori Humerez#3411012
Los view para dar agregar style no me parece buena práctica, se formará un callback Hell
Gabriel Hernández Valdez#3491681
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 :D
Andres Gallardo#3336172
El view vendria a ser el div del html? Porque lo utiliza tanto?
Joseph Humberto Cueva#4622884
No puedo hacer scroll en la pantalla para ver el resto de pokemons
Misael Valdez#4417252
Buenas compañeros a mi no me funcionan las imagenes, de hecho me cierra la app de expo al recargar expo con la etiqueta Image, alguno tiene idea de porque pueda ser?