Cursos Empresas Blog Live Conf Eventos Precios

0:0015:35

Maquetación del Pokemon: estadísticas

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

Clase 16 / 17

Ver clases

Maquetación del Pokemon: estadísticas

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

Clase 16 de 17

Clase 16 / 17

Maquetación del Pokemon: estadísticas

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

Clase 16 / 17

Ver clases

Comentarios (14)14 comentarios

Kevin Acevedo

Hace 5 años

Diego Delgado

Excelente

Gustavo Martín Isidoro Shiraishi

Hace 3 años

gracias, esta mejor así

Luis Alejandro Nieto Ruth

Luis Fernando Pedroza Taborda

Buen aporte, gracias.

Rocketfy learning

Samuel Miranda Martínez

Como no voy con lo de estadísticas malas y buenas no puse lo del color verde y rojo, pero si hice que el porcentaje fuera más acertado con los máximos actuales que tienen los pokemones.

const maxStats = [255, 190, 230, 194, 230, 180];

  const barStyles = (index, baseStat) => {
    const percentageStat = (100 * baseStat) / maxStats[index];
    return {
      backgroundColor: barColor,
      width: `${percentageStat}%`,
    };
  };

victor saumelli

la funcion para agregar 3 colorcitos por si alguien la quiere, si hay una mejor manera por favor decirme jeje, fue lo que se me ocurrio al momento.

const barstyles=(num)=>{
        const color = num >= 70 ? "#31BB09" : num < 70 && num>=30 ? "#D7CA25": "#E01C1C";
        return {backgroundColor: color,width: `${num}%`}
    }

Tulio Junior Rangel Nuñez

Hace 4 años

Probando el scroll me di cuenta de algo, el "order" de los pokémon no es el mismo de la pokédex, para que sea tal cual el número de la pokédex se debe renderizar el id

Cristofer Daniel Gómez Villanueva

Brian Bentancourt

como hay algunos pokemones que tienen stats mayores a 100 hice el siguiente cambio

export default function Stats({ stats }) {
    const [maxStat, setMaxStat] = useState(100)

    useEffect(() => {
        const max = Math.max(...stats.map(s => s.base_stat))
        if (max > 100)
            setMaxStat(max)
    }, [stats])

    const barStyles = (number) => {
        const color = number > 49 ? '#00ac17' : '#ff853e'
        const width = (number * 100 / maxStat).toFixed(2)
        return {
            backgroundColor: color,
            width: `${width}%`
        }
    }

Gustavo Pú

David Rangel

Hace un año

Les dejo el repo donde trabajo esta clase con Typescript y expo, les recomiendo revisar los utils ahi separé la función para obtener los colores de las barras para separar responsabilidades. El código de específico del proyecto esta en la rama feat/class16:

Vladimir Farrera Vera

Tengo el siguiente erro y no se como solucionarlo

Ninguna sobrecarga coincide con esta llamada.
  La sobrecarga 1 de 2, "(props: ViewProps | Readonly<ViewProps>): View", dio el error siguiente.
    El tipo '{ backgroundColor: string; width: string; }' no se puede asignar al tipo 'ViewStyle | Falsy | RegisteredStyle<ViewStyle> | RecursiveArray<ViewStyle | Falsy | RegisteredStyle<ViewStyle>> | readonly (ViewStyle | ... 1 more ... | RegisteredStyle<...>)[]'.
      El tipo '{ backgroundColor: string; width: string; }' no se puede asignar al tipo 'ViewStyle'.
        Los tipos de propiedad 'width' no son compatibles.
          El tipo 'string' no se puede asignar al tipo 'DimensionValue | undefined'.
  La sobrecarga 2 de 2, "(props: ViewProps, context: any): View", dio el error siguiente.
    El tipo '{ backgroundColor: string; width: string; }' no se puede asignar al tipo 'ViewStyle | Falsy | RegisteredStyle<ViewStyle>