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
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 6
Preguntas 2
Para hacer transparente el header y ocultar la sombra usar el siguiente código, enero del 2022
<Stack.Screen
name='Pokemon'
component={ Pokemon }
options={ {
title: "",
headerShown: true,
headerTransparent: true,
headerShadowVisible: false
} }
/>
Archivo header.js
import React from 'react'
import { View, Text, StyleSheet, SafeAreaView, Image } from 'react-native';
import { capitalize } from 'lodash';
import getColorByPokemonType from '../../utils/getColorByPokemonType'
export default function Header(props) {
const { name, order, image, type } = props;
const color = getColorByPokemonType(type);
const bgStyles = [{ backgroundColor: color, ...styles.bg }]
return (
<>
<View style={bgStyles} />
<SafeAreaView style={styles.content}>
<View style={styles.header}>
<Text style={styles.name}>{capitalize(name)}</Text>
<Text style={styles.order}>#{`${order}`.padStart(3, 0)}</Text>
</View>
<View style={styles.contentImg}>
<Image source={{ uri: image }} style={styles.image} />
</View>
</SafeAreaView>
</>
)
}
const styles = StyleSheet.create({
bg: {
width: '100%',
height: 400,
position: 'absolute',
borderBottomEndRadius: 300,
borderBottomLeftRadius: 300,
transform: [{ scaleX: 2 }],
},
content: {
marginHorizontal: 20,
marginTop: 30
},
header: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingTop: 40
},
name: {
color: 'white',
fontWeight: 'bold',
fontSize: 26,
},
order: {
color: 'white',
fontWeight: 'bold',
},
contentImg: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
top: 30,
},
image: {
width: 250,
height: 300,
resizeMode: "contain",
},
})
el componente Header 🚀
<Header
name={pokemon.name}
order={pokemon.order}
image={pokemon.sprites.other["official-artwork"].front_default}
type={pokemon.types[0].type.name}
/>
Esta quedando Genial!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?