Aca encontre un articulo que explica como se usa flex box en React Native
https://medium.com/@lmleon19/flexbox-en-react-native-9defe7adfaa
Inicializando la app
Creación del proyecto: PokeDex
Configuración de React Navigation
Diseñando la Tab navigation con iconos
Stack de navegación para Pokedex
API y listado de Pokemon
Consumo de APIs con fetch: PokeApi
Información de todos los Pokemon
Lista de Pokemon con FlatList
Renderizando la PokemonCard
Clasificación por colores y utilidades de Lodash
Infinite scrolling con FlatList
Añadiendo StyleSheet a la lista
Detalles del Pokemon
Vista y navegación al detalle del Pokemon
Consultando la API de detalles del Pokemon
Maquetación del Pokemon: header
Maquetación del Pokemon: sección de tipos
Maquetación del Pokemon: estadísticas
Maquetación del Pokemon: barra de navegación
You don't have access to this class
Keep learning! Join and start boosting your career
Contributions 14
Questions 5
Aca encontre un articulo que explica como se usa flex box en React Native
https://medium.com/@lmleon19/flexbox-en-react-native-9defe7adfaa
Les comparto la documentación sobre el método padStart:
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/String/padStart
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.”
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”
Hasta ahora vamos todo bien, no hay mayor problema usando la versión 6
Want to see more contributions, questions and answers from the community?