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

Creando nuestra vista detalle

12/22
Recursos

URL para im谩genes:
https://c1.coinlore.com/img/25x25/{$symbol}.png

Aportes 20

Preguntas 4

Ordenar por:

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

Utilizando 鈥渘ameid鈥 en vez de 鈥渘ame鈥 te ahorras transformarlo a lowercase y hacer replace de espacios en blancos.
Con monedas como Ripple devuelve solamente 鈥榵鈥 como nombre por lo que no muestra la imagen de esta, pero usando nameid si genera la url con el nombre correcto

  getSymbolIcon = (coinNameId) => {
    if (coinNameId) {
      return `https://c1.coinlore.com/img/16x16/${coinNameId}.png`;
    }
  };

<Image
            style={styles.iconImg}
            source={{uri: this.getSymbolIcon(coin.nameid)}}
          />```

Hola Devs:
-Aqui les muestro como va quedando mi proyecto, usando componentes funcionales y hooks:

-Aca les dejo el commit exacto de esta clase, por si les interesa mi implementacion: Click Aqui
Recuerda: #NuncaParesDeAprender 馃挌

En react native 0.63 el header del sectionlist va as铆:

renderSectionHeader={({ section }) => <Text>{section.title}</Text>}

Les comparto mi c贸digo de coindetail screen:

import  React, {Component } from 'react';
import {View, Image, Text, StyleSheet, SectionList} from 'react-native'
import Colors from '../../res/color'

class CoinDetailScreen extends Component {

    state = {
        coin:{}
    }
    getSymbolIcon = (name) => {
        if (name) {
            const symbol = name.toLowerCase().replace(" ","-")
          return `https://c1.coinlore.com/img/16x16/${symbol}.png`;
        }
    };
    getSections = (coin) => {

        const sections = [
          {
            title: "Market cap",
            data: [coin.market_cap_usd]
          },
          {
            title: "Volume 24h",
            data: [coin.volume24]
          },
          {
            title: "Change 24h",
            data: [coin.percent_change_24h]
          }
        ];
    
        return sections;
    }


    componentDidMount() {
        const {coin} = this.props.route.params;
        this.props.navigation.setOptions({title: coin.symbol})
        this.setState({coin})
    } 

    render(){
        const {coin} = this.state;
        return(
            <View style={styles.container}>
                <View style={styles.subHeader}>
                    <Image style={styles.iconImg} source={{uri: this.getSymbolIcon(coin.name)}}></Image>
                    <Text style={styles.titleText}>
                        {coin.name}
                    </Text>
                </View >
                <SectionList 
                    sections={this.getSections(coin)} 
                    keyExtractor={(item,index) => item+index} 
                    renderItem={({item}) => 
                    <View style={styles.sectionItem}>
                        <Text style={styles.itemText}>{item}</Text>
                    </View>
                    } 
                    renderSectionHeader={({section: {title}}) =>
                    <View style={styles.sectionHeader}> 
                        <Text style={styles.sectionText}>{title}</Text>
                    </View>
                    } 
                    />
            </View>
        )
    }
}
export default CoinDetailScreen

const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: Colors.charade,
    },
    subHeader: {
      backgroundColor: 'rgba(0,0,0,0.1)',
      padding: 16,
      flexDirection: 'row',
    },
    titleText: {
      fontSize: 16,
      color: '#fff',
      fontWeight: 'bold',
      marginLeft: 8,
    },
    iconImg: {
      height: 25,
      width: 25,
    },
    sectionHeader: {
      backgroundColor: 'rgba(0,0,0,0.2)',
      padding: 8,
    },
    sectionItem: {
      padding: 8,
    },
    itemText: {
      color: '#fff',
      fontSize: 14,
    },
    sectionText: {
      color: '#fff',
      fontSize: 14,
      fontWeight: 'bold',
    },
  });```

Saludos :)

comparto los estilos del componente coinsDetailScreen.js

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.charade,
  },
  subHeader: {
    backgroundColor: 'rgba(0,0,0,0.1)',
    padding: 16,
    flexDirection: 'row',
  },
  titleText: {
    fontSize: 16,
    color: '#fff',
    fontWeight: 'bold',
    marginLeft: 8,
  },
  iconImg: {
    height: 25,
    width: 25,
  },
  sectionHeader: {
    backgroundColor: 'rgba(0,0,0,0.2)',
    padding: 8,
  },
  sectionItem: {
    padding: 8,
  },
  itemText: {
    color: '#fff',
    fontSize: 14,
  },
  sectionText: {
    color: '#fff',
    fontSize: 14,
    fontWeight: 'bold',
  },
});
const getSections = (coin) => {

        const sections = [
          {
            title: "Market cap",
            data: [coin.market_cap_usd]
          },
          {
            title: "Volume 24h",
            data: [coin.volume24]
          },
          {
            title: "Change 24h",
            data: [coin.percent_change_24h]
          }
        ];
    
        return sections;
    }```

23 de Mayo de 2021鈥 las im谩genes no funcionan con el s铆mbolo sino con el nombre en min煤sculas. Por ejemplo: https://c1.coinlore.com/img/25x25/ethereum.png

Con Arrow Function Component

import React, {useEffect} from 'react';
import {View, Image, Text, SectionList, StyleSheet} from 'react-native';
import Colors from '../../res/colors';

const CoinDetailScreen = (props) => {
  const {
    route: {
      params: {coin},
    },
    navigation,
  } = props;

  const imageUri = `https://c1.coinlore.com/img/16x16/${coin.nameid}.png`;

  const sections = [
    {
      title: 'Market cap',
      data: [coin.market_cap_usd],
    },
    {
      title: 'Volume 24h',
      data: [coin.volume24],
    },
    {
      title: 'Change 24h',
      data: [coin.percent_change_24h],
    },
  ];

  useEffect(() => {
    navigation.setOptions({title: coin.symbol});
  }, [coin.symbol, navigation]);

  return (
    <View style={styles.container}>
      <View style={styles.subHeader}>
        <Image style={styles.iconImg} source={{uri: imageUri}} />
        <Text style={styles.titleText}>{coin.name}</Text>
      </View>
      <SectionList
        sections={sections}
        keyExtractor={(item) => item}
        renderItem={({item}) => (
          <View style={styles.sectionItem}>
            <Text style={styles.itemText}>{item}</Text>
          </View>
        )}
        renderSectionHeader={({section}) => (
          <View style={styles.sectionHeader}>
            <Text style={styles.sectionText}>{section.title}</Text>
          </View>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: Colors.charade,
    flex: 1,
  },
  subHeader: {
    backgroundColor: 'rgba(0,0,0,0.2)',
    padding: 16,
    flexDirection: 'row',
    alignItems: 'center',
  },
  titleText: {
    fontSize: 16,
    color: 'white',
    fontWeight: 'bold',
    marginLeft: 8,
  },
  iconImg: {
    width: 25,
    height: 25,
  },
  sectionHeader: {
    backgroundColor: 'rgba(0,0,0,0.2)',
    padding: 8,
  },
  sectionItem: {
    padding: 8,
  },
  itemText: {
    color: '#fff',
    fontSize: 14,
  },
  sectionText: {
    color: '#fff',
    fontSize: 14,
    fontWeight: 'bold',
  },
});

export default CoinDetailScreen;

El curso necesita un lavado de cara, adem谩s de usar componentes stafull de tipo clase, hay ciertas cosas desactualizadas y no dan tanto support a las configuraciones de cada sistema operattivo. Adem谩s creo que no hubiese estado dem谩s explicar algo de Expo

Componente Details, lo puedes estilar a tu estilo.

import React, { useEffect } from 'react'
import { View, Text, Image, StyleSheet, ActivityIndicator, SectionList } from 'react-native'
import { Colors, Fonts } from '../../res/'

export function CoinDetailScreen ({ navigation, route }) {
  const { params } = route
  console.log(params)
  const { symbol, name, market_cap_usd, volume24, percent_change_24h } = params.coin

  const getSymbolIcon = (symbolStr) => {
    if (symbolStr) {
      const s = symbolStr.toLowerCase().replace(' ', '/')
      return `https://c1.coinlore.com/img/25x25/${s}.png`
    }
  }

  const getSections = ({
    market_cap_usd,
    volume24,
    percent_change_24h
  }) => {
    const sections = [
      {
        title: 'Mark cap',
        data: [market_cap_usd]
      },
      {
        title: 'Volume 24h',
        data: [volume24]
      },
      {
        title: 'Change 24',
        data: [percent_change_24h]
      }
    ]
    return sections
  }

  useEffect(() => {
    navigation.setOptions({ title: symbol })
  }, [params])

  return (
    <View style={styles.container}>
      <View style={styles.subHeader}>
        <Image
          style={styles.iconImg}
          source={{
            uri: getSymbolIcon(name)
          }}
        />
        <Text style={styles.titleText}>{name}</Text>
      </View>

      <SectionList
        sections={getSections({ volume24, market_cap_usd, percent_change_24h })}
        renderItem={({ item }) => {
          return (
            <View style={styles.sectionItem}>
              <Text style={styles.sectionText}>{item}</Text>
            </View>
          )
        }}
        keyExtractor={(item) => item}
        renderSectionHeader={({ section }) => {
          return (
            <View style={styles.sectionHeader}>
              <Text style={styles.sectionText}>{section.title}</Text>
            </View>
          )
        }}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: Colors.charade,
    flex: 1
  },
  subHeader: {
    backgroundColor: Colors.zircon,
    padding: 16,
    flexDirection: 'row'
  },
  titleText: {
    fontSize: Fonts.lg,
    color: Colors.white,
    fontWeight: Fonts.bold
  },
  sectionHeader: {
    color: Colors.white,
    backgroundColor: Colors.charade,
    padding: 8
  },
  sectionItem: {
    padding: 8
  },
  itemText: {
    color: Colors.white,
    fontSize: 11
  },
  sectionText: {
    color: Colors.white,
    fontSize: Fonts.md,
    fontWeight: Fonts.bold
  },
  iconImg: {
    width: 25,
    height: 25
  }
})


Este curso esta con todo, me esta gustando mucho!!!

Comparto como resolv铆 esta vista con componentes funcionales

const CoinDetailScreen = ({ route, navigation }) => {
  const { coin } = route.params;
  navigation.setOptions({ title: coin.name });

  const getSymbolImage = () => `https://c1.coinlore.com/img/25x25/${coin.nameid}.png`;

  const getSections = () => {
    const sections = [
      {
        title: 'Price',
        data: [coin.price_usd],
      },
      {
        title: 'Market Cap',
        data: [coin.market_cap_usd],
      },
      {
        title: 'Volume 24h',
        data: [coin.volume24],
      },
    ];
    return sections;
  };

  return (
    <View style={styles.container}>
      <View style={styles.row}>
        <Image style={styles.iconImage} source={{ uri: getSymbolImage() }} />
        <Text style={styles.textSymbol}>{coin.symbol}</Text>
      </View>
      <SectionList
        sections={getSections()}
        keyExtractor={(item) => item}
        renderSectionHeader={({ section }) => (
          <View style={styles.headerSection}>
            <Text style={styles.textHeader}>
              {section.title}
            </Text>
          </View>
        )}
        renderItem={({ item }) => (
          <View style={styles.headerItemSection}>
            <Text style={styles.textHeaderItem}>
              {item}
            </Text>
          </View>
        )}
      />
    </View>
  );
};

Ale! me gustar铆a que saber con mas profundidad c贸mo se encuentra el dato que trae la url de las im谩genes.

Este es uno de los mejores cursos que he tomado. Gracias profe!

no se si soy tonto, estupido o retardado, quizas alguna de las anteriores, pero enserio el CURSO ES GENIAL FANTASTICO el profesor sabe muchicimo鈥 pero siento como si la cantidad de informacion fuera un TREN A VAPOR DE 200 VAGONES pasando sobre mi pobre integridad fisica y mental鈥 me siento saturadisimo como si no pudiera hacer nadaaaa con todo eso 鈥 alguna voz de aliento para no abrumarme y terminar en el rincon de mi casa llorando???

PDTA: juro que tratare HORRIBLE al que me diga que entonces no naci para programar y no me importara el bann de platzi si sucede

necesito ayuda me da error al querer traer la imagen y la propiedad title no cambia al seleccionar una moneda

  • Me aparec铆a este error:
    鈥渋f you meant to render a collection of children use an array instead react native鈥
  • Lo resolv铆 as铆:
<SectionList 
        sections={this.getSections(coin)} 
        keyExtractor={(item,index) => item+index} 
        renderItem={({item}) => <Text>{item}</Text>} 
        renderSectionHeader={({section: {title}}) => <Text>{title}</Text>} 
        />```