No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de React Native CLI

Curso de React Native CLI

Alejandro Sanabria

Alejandro Sanabria

Dando estilos a nuestra FlatList

10/22
Recursos

Aportes 21

Preguntas 5

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Los colores

const colors = {
    blackPearl: "#20252c",
    charade: "#272c35",
    zircon: "#e0e0e0",
    white: "#fff"
}

Compañeros quiero hacer hincapié en el componente Platform:
Nos permite ejecutar comportamiento especifico dependiendo del OS.

El profesor aplicó estilos dependiendo del OS. 🤔

Más información

Hola Devs:
-Aqui les traigo unas mejoras que en lo personal me gustan mas, espero y les encanten, acepto feedback.
-Por si gustan aca esta el commit preciso de los cambios que hice por si gustan: Click Aqui

-Recuerden, #NuncaParesDeAprender 💚

Para los que le da error al momento de llamar la funcion getImgArrow , solo deben ponerle un let al comienzo.

let getImgArrow = () => {

        if(item.percent_change_1h > 0){
    
            return require("cryptoTracker/src/assets/arrow_up.png");
    
        } else {
    
            return require("cryptoTracker/src/assets/arrow_down.png");
    
        }
    }

Otra forma de poner el source puede ser con un operador ternario

import ArrowDown from "../../assets/arrow_down.png"
import ArrowUp from "../../assets/arrow_up.png"
const CoinsItem = (props) => {
  console.log(props);
  const {name, symbol, percent_change_1h, price_usd} = props.item;
  return (
    <View style={style.container}>
      <View style={style.row}>
        <Text style={style.symbolText}>{symbol}</Text>
        <Text style={style.nameText}>{name}</Text>
        <Text style={style.priceText}>{price_usd}</Text>
      
      </View>
      <View style={style.row}>
        <Text style={style.percentText}> {percent_change_1h}</Text>
        <Image style={style.imgIcon} source={percent_change_1h>0?ArrowUp:ArrowDown}/>
      </View>
    </View>
  );
};```

Lastima que el profe no hizo un commit en cada clase, es maluco ponerse a copiar solamente los estilos

How it’s going 😄

Media hora buscando porqué no me ponía el backgroundColor y resulta que había escrito “cointainer” en vez de “container” kjjjjj

Mi propuesta de diseño de la app

COMPONENTE

export const CoinsItem = ({ item: { symbol, name, price_usd, percent_change_1h } }) => {
  return (
    <View style={styles.container}>
      <View style={styles.row}>
        <Text style={styles.symbolText}>{symbol}</Text>
        <Text style={styles.nameText}>{name}</Text>
        <Text style={styles.price}>{`$${price_usd}`}</Text>
      </View>
      <View style={styles.row}>
        <Text style={styles.percent}> {percent_change_1h}</Text>
        <Arrow percent_change_1h={percent_change_1h} />
      </View>
    </View>
  )
}

SVG

import * as React from 'react'
import { Svg, Path, G } from 'react-native-svg'
import { Colors } from '../res/Colors'

export function Arrow ({ percent_change_1h }) {
  return (
    <Svg
      viewBox='0 0 448.011 448.011'
      fill={percent_change_1h > 0 ? Colors.green : Colors.red}
      width={14}
    >
      <G rotation='90' origin='300, 150'>
        <Path d='M438.731 209.463l-416-192c-6.624-3.008-14.528-1.216-19.136 4.48a15.911 15.911 0 00-.384 19.648l136.8 182.4-136.8 182.4c-4.416 5.856-4.256 13.984.352 19.648 3.104 3.872 7.744 5.952 12.448 5.952 2.272 0 4.544-.48 6.688-1.472l416-192c5.696-2.624 9.312-8.288 9.312-14.528s-3.616-11.904-9.28-14.528z' />
      </G>
    </Svg>
  )
}

Yo quise utilizar SVGs para las flechas, para poder cambiarles el color a diferencia de una imagen que ya lo trae. Por conveniencia, quise utilizar íconos de FontAwesome, los cuales les recomiendo por que tienen MUCHÍSIMOS. Para esto, tuve que importar las siguientes dependencias:

npm i --save react-native-svg
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/react-native-fontawesome

Mi código para el componente CoinsItem queda de la siguiente manera:

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Colors from 'cryptotracker/src/res/colors';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import { faArrowUp, faArrowDown } from '@fortawesome/free-solid-svg-icons';

const CoinsItem = (props) => {

    const getImgArrow = (pct_change) => {
        let icon = null;

        if (parseFloat(pct_change) > 0) {
            icon = <FontAwesomeIcon icon={faArrowUp} color={Colors.green} />
        } else {
            icon = <FontAwesomeIcon icon={faArrowDown} color={Colors.red} />
        }

        return icon;
    }

    return (
        <View style={styles.container}>
            <View style={styles.row}>
                <Text style={styles.symbol}>{props.item.symbol}</Text>
                <Text style={styles.text}>{props.item.name}</Text>
            </View>

            <View style={styles.row}>
                <Text style={styles.priceText}>$ {props.item.price_usd}</Text>
                <Text
                    style={{
                        color: props.item.percent_change_1h > 0 ? Colors.green : Colors.red,
                        ...styles.percentText
                    }}
                >
                    {props.item.percent_change_1h} %
                </Text>
                { getImgArrow( props.item.percent_change_1h ) }
            </View>
        </View>
    );
}

Omití los estilos por que son los mismos de la clase.

<Text style={styles.pricetext}>${item.price_usd}</Text>

tengo una pregunta, puedo hacer esto de cargar diferentes imagenes dependiendo de una variable, por ejemplo para cargar diferente imagen de background dependiendo si estoy en l landscape or portrait?

Mi App

Para condicionar las arrows las importé antes y la condición la puse con un if ternario dentro del segundo view interno

Muy buen curso hasta ahora, me enamoro de React Native!!!

Me dió error cuando no le puse const a getImgArrow()

const getImgArrow  = ()=> {
        if (item.percent_change_1h > 0){
            return require("cryptoTracker/src/assets/arrow_up.png");
        }else{
            return require("cryptoTracker/src/assets/arrow_down.png");
        }
    }

Puede que se presenre un error cuanfo tratas de poner la image, esto se puede solucionar.
ah ArrowUp ArrowDown se importan no es la mejor practca, posterior mente se realiza una operacion ternaria si se interesa leer.

    <View style={styles.container}>
      <View style={styles.row}>
        <Text style={styles.rank}>{item.rank} </Text>
        <Text style={styles.symbolText}> {item.symbol} </Text>
        <Text style={styles.nameText}> {item.name} </Text>
        <Text style={styles.price_usd}> {`$${item.price_usd}`} </Text>
      </View>

      <View style={styles.row}>
        <Text style={styles.percentText}> {item.percent_change_1h} </Text>
        <Image 
          source={item.percent_change_1h>0?ArrowUp:ArrowDown} 
          />
      </View>
    </View>```