A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Clasificaci贸n por colores y utilidades de Lodash

9/17
Recursos

Aportes 13

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

export const POKEMON_TYPE_COLORS = {
  normal: "#A8A878",
  fighting: "#C03028",
  flying: "#A890F0",
  poison: "#A040A0",
  ground: "#E0C068",
  rock: "#B8A038",
  bug: "#A8B820",
  ghost: "#705898",
  steel: "#B8B8D0",
  fire: "#FA6C6C",
  water: "#6890F0",
  grass: "#48CFB2",
  electric: "#FFCE4B",
  psychic: "#F85888",
  ice: "#98D8D8",
  dragon: "#7038F8",
  dark: "#705848",
  fairy: "#EE99AC",
};

Otra forma de ocultar el header en React Navigation es mediante la key 鈥渉eaderShown鈥.

Ejemplo:

<Stack.Screen 
	name="Pokedex"
	component={PokedexScreen}
	options={{headerShown: false}}  
 />

No s茅 si se usar谩 el paquete lodash para mas cosas en el transcurso del curso, pero una forma f谩cil de 鈥淐apitalizar鈥 un texto sin instalar un paquete es simplemente agregar la propiedad 鈥渢extTransform: 鈥榗apitalize鈥欌 en los estilos:

  name: {
    color: '#fff',
    fontWeight: 'bold',
    fontSize: 15,
    paddingTop: 10,
   textTransform: 'capitalize'
  }

Lodash es muy 煤til para algunas cosas, pero para colocar la primera letra del nombre en may煤scula solo debes agregar el siguiente css en el name

textTransform: 'capitalize',

En Android, el tag SafeAreaView no funciona igual que en ios.

Dejo abajo el c贸digo de la screen de Pokedex para que se vea lindo y tambi茅n el art铆culo de StackOverflow de d贸nde saqu茅 este c贸digo.

https://stackoverflow.com/questions/51289587/react-native-how-to-use-safeareaview-for-android-notch-devices

import React, { useState, useEffect } from "react";
import { SafeAreaView, StyleSheet, StatusBar, Platform } from "react-native";
import { getPokemonsAPI, getPokemonDetailsByUrlAPI } from "../api/pokemon";
import PokemonList from "../components/PokemonList";

export default function PokedexScreen() {
  const [pokemons, setPokemons] = useState([]);

  useEffect(() => {
    (async () => {
      await loadPokemons();
    })();
  }, []);

  const loadPokemons = async () => {
    try {
      const response = await getPokemonsAPI();
      const pokemonsArray = [];

      for await (const pokemon of response.results) {
        const pokemonDetails = await getPokemonDetailsByUrlAPI(pokemon.url);
        pokemonsArray.push({
          id: pokemonDetails.id,
          name: pokemonDetails.name,
          type: pokemonDetails.types[0].type.name,
          order: pokemonDetails.order,
          image: pokemonDetails.sprites.other["official-artwork"].front_default,
        });
      }

      setPokemons([...pokemons, ...pokemonsArray]);
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <SafeAreaView style={styles.AndroidSafeArea}>
      <PokemonList pokemons={pokemons} />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  AndroidSafeArea: {
    paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
  },
});

Otra manera de capitalizar el nombre ser铆a a trav茅s de los estilos, con la propiedad:

textTransform: 鈥榗apitalize鈥

En vez de crear una funcion en Utils se podria convertir el valor que esta en StyleSheet en una funcion y pasarle como parametro el valor de la constante

<View style={styles.bgStyles(POKEMON_TYPE_COLORS[pokemon.type])}>
 </View>

const styles = StyleSheet.create({
  bgStyles: (color) => ({
    backgroundColor: color,
    flex: 1,
    padding: 10,
    borderRadius: 15,
  }),

});

Si a alguien le falla el spread operator del los styles es porque StyleSheet esta pensada para ser usada de forma directa, no heredada, por lo cual si hacen un console.log() de algun key que tengan en la constante styles, les va a devolver el index de la ubicaci贸n en memoria.
Por lo cual, StyleSheet provee el metodo .flatten() a trav茅s del cual van a poder acceder al value de la key, el spread quedar铆a as铆.
鈥tyleSheet.flatten(styles.laKeyQueNecesitan)

Saludos
-MC

export default function capitalizeWords(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
}

Capitalizar sin usar libreria

Yo vengo de web. Y he viste que para poner en may煤sculas la primera letra. Aun en otros cursos fuera de aqu铆, ya con typescript, redux etc. Incluso con JavaScript acceden al primer car谩cter y lo convierten en may煤sculas. Aqu铆 se instal贸 un paquete muy grande, con muchas funciones, solo para capitalizar texto. Pero en los estilos se puede poner. Para web es el equivalente a una propiedad de css. textTransform: 鈥渃apitalize鈥. La pregunta es: por qu茅 muchos lo hacen de esta manera (como lo explicaba antes) cu谩ndo existe una propiedad de estilos que lo puede hacer en dos palabras?

Para convertir la primera letra en may煤scula prefer铆 hacer una funci贸n en utils:
src/utils/capitalizeFirstLetter.js

const capitalizeFirstLetter = (str) => str.charAt(0).toUpperCase() + str.slice(1)
export default capitalizeFirstLetter

Y lo usas desde PokemonCard.jsx

import capitalizeFirstLetter from '../utils/capitalizeFirstLetter'
...
 <Text>{capitalizeFirstLetter(pokemon.name)}</Text>```

Para los que tienen problemas con tener un solo tipo, pueden utilizar expo-linear-gradient.

const getColorsByPokemonType = (type1, type2) => {
  if (type2) {
    return [
      POKEMON_TYPE_COLORS[type1.toLowerCase()],
      POKEMON_TYPE_COLORS[type2.toLowerCase()],
    ];
  }
  return [
    POKEMON_TYPE_COLORS[type1.toLowerCase()],
    POKEMON_TYPE_COLORS[type1.toLowerCase()],
  ];
};