Componentes reutilizables

Clase 13 de 36 • Curso de React Native 2016

Resumen

Separando la caja de ArtistBox en un archivo separado podemos mostrar en pantalla todos los artistas que queramos escribiendo menos código.

Para eso, usamos destructuring, una funcionalidad de ECMAScript 2015, para obtener las props que tienen todos los componentes de React y mostrarlas en la caja del artista.

Por último, podemos colocarle un sombreado a nuestra caja:
En iOS se hace con las propiedades de shadowColor, shadowOpacity y shadowOffset
En Android puede lograrse un estilo similar con la propiedad elevation para los estilos.

Juan Carlos Rueda Diaz

student•

En el caso de Android:
En cuanto a temas de tamaños de pantalla, fragments, idiomas, como se podrian trabajar?

Nicolás Cieri

student•

En Android existe posibilidad de setear color, opacity y offset como en IOS?

Sacha Lifszyc

teacher•

No por el momento. En Android utilizamos el elevation que es la manera nativa de resolverlo. Mira la discusión en este issue

Augusto Gonzalez

student•

En Android al utilizar el ArtistBox.js me aparece un error en la pantalla rojo en la pantalla de mi emulador, diciendo Element type is invalid: expected a String or a class/function but got: object.
Check the render method of ‘PlatziMusic’,
Al remover:

<ArtistBox />

Me aparece ese error. Alguna idea?

Augusto Gonzalez

student•

Ya resolví el error tenía un ; como lo decía bien claro el error en el archivo ArtistBox.js en la parte del import. Aunque a Gonzalo le funciono perfecto, a mi me trajo conflictos.

Miguel Ruiz Moreno

student•

¿Cuándo se define un tamaño(como en margin: 5) el número en que unidad se representa?

Nicolás F. Ormeño Rojas

student•

elevation para Android ya no funciona? he buscado en la doc de react-native y sólo vi shadow, y elevation no genera ningún efecto

Gonzalo Aguirre

teacher•

El estilo elevation funciona solamente para Android a partir de la versión 5 (Lollipop). Si tu dispositivo/emulador es una versión anterior no vas a ver ningún efecto…

Milton Díaz

student•

Para el caso de los TextInput, ¿cómo puedo identificar cada uno para obtener sus datos? ¿con props o refs es posible?

Sacha Lifszyc

teacher•

Mira, eso lo aprenderás en el material de Envia comentarios de un artista y almacénalos en Firebase

Milton Díaz

student•

Genial, gracias!

Edwin Rebolledo

student•

propiedades de un objeto y asignarla a variables con ES.

Cristian Parra Gaviria

student•

es posible pasar varios objetos a un componente?

student•

Hola mi app se rompió al momento de hacer el cambio de quitar el hard codeo de image, name, likes, comments…

Comparto pantallazos del código y del error, ayuda pls!

student•

Snheidert Smalbach

student•

El error esta en el igual debes colocar dos puntos en los items

const artist={
image:‘https://static.platzi.com/media/files/bowie_a927fdf3-b321-4a5c-99ca-239cc86c57bc.png’,
name:‘David Bowie’,
likes:200,
comments:428,

Aaron Pérez Pereira

student•

Saben lo complicado que es hacer un Custom List View en Android de manera nativa? Habría que hacer esto:

Ya yo los había hecho con anterioridad y es todo un rollo.

Juan José Vargas Fletes

student•

Finalmente, una manera facil y rapida de hacer listas en android xD, porque de manera nativa con Kotlin y Java hay que hacer un recycler view o list view y eso es algo que se dura un poco haciendo.

Carlos David Ramírez Gómez

student•

¿Alguien sabe por qué se genera el error 500? cree una carpeta, pero algunos elementos de la carpeta lo generan y otroso no, estoy haciendo un proyecto y quiero hacer un splashscreen, tengo esto, si me pudieran ayudar, muchas gracias.

App.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';
import splashScreen from '.\\src\\components\\SplashScreen';

type Props = {};

const logo = ".\\src\\assets\\justicia.png";
const SplashScreen = require('.\\src\\components\\SplashScreen');

export default class App extends Component<Props>{
  render() {
    return (
      <View style={styles.container}>
        <SplashScreen logos={this.logo}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  images:{
    justifyContent: 'center',
    alignItems: 'center',
  }
});

SplashScreen.js

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  FlatList
} from 'react-native';

type Props = {};
export default class SplashScreen extends Component<Props> {
    constructor(props){
        super(props);
        const logo = props.logos;
    }
    render() {
        return (
          <View style={styles.container}>
            <Image style={styles.images} source={require(logo)}/>
            <Text style={styles.welcome}>
              Welcome to Clowyer
            </Text>
          </View>
        );
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'lightgray',
    paddingTop: 50
  }
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  images:{
    justifyContent: 'center',
    alignItems: 'center',
  }
});

Carlos David Ramírez Gómez

student•

Carlos David Ramírez Gómez

student•

No me deja subir la imagen donde describe el error.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';
import splashScreen from '.\\src\\components\\SplashScreen';

type Props = {};

const logo = ".\\src\\assets\\justicia.png";
const SplashScreen = require('.\\src\\components\\SplashScreen');

export default class App extends Component<Props>{
  render() {
    return (
      <View style={styles.container}>
        <SplashScreen logos={this.logo}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  images:{
    justifyContent: 'center',
    alignItems: 'center',
  }
});

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  FlatList
} from 'react-native';

type Props = {};
export default class SplashScreen extends Component<Props> {
    constructor(props){
        super(props);
        const logo = props.logos;
    }
    render() {
        return (
          <View style={styles.container}>
            <Image style={styles.images} source={require(logo)}/>
            <Text style={styles.welcome}>
              Welcome to Clowyer
            </Text>
          </View>
        );
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'lightgray',
    paddingTop: 50
  }
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  images:{
    justifyContent: 'center',
    alignItems: 'center',
  }
});

Componentes reutilizables

Lanzamiento del Curso

Intro a React Native y a Platzimusic, el proyecto del curso

Requerimientos técnicos del curso

Guía de instalación de React Native

Guía de instalación para desarrollar para Android

Introducción al Desarrollo Mobile

¿De qué se trata este Curso de React Native?

Tres enfoques para desarrollo de aplicaciones móviles

Qué es React Native y sus componentes básicos

Primera App con React Native

Instalación y configuración de entorno

Creando tu primera aplicación

Developer Experience (DX)

Componentes y APIs

Estilos y Layout con Flexbox

PlatziMusic

Armando la ArtistBox

Componentes reutilizables

Contenedores con Scroll

Armando nuestro listado de artistas

Consume datos de la API de last.fm para listar los artistas

Routing y Navegación

Agregando una vista de detalle

Autenticación de usuarios

Agregando login con Facebook para iOS

Agregando botón de login con Facebook para iOS

Agregando botón de login con Facebook para Android

Configurando autenticación con Firebase

Agreguemos las funcionalidades principales a nuestra app: likes y comentarios

Refactor y referencias de Firebase

Agrega la funcionalidad para hacer Like a un artista

Envia comentarios de un artista y almacénalos en Firebase

Lista los comentarios de un artista trayendo los datos desde Firebase

Agrega un avatar de usuario para mostrar en los comentarios

Refinando detalles de la app

Mejorando la UI/UX de PlatziMusic para Android y iOS en cada caso

Agrega recursos de imágenes en la aplicación para la pantalla de login

Agrega un ícono bonito para PlatziMusic

Llevando la app a los Stores

Cómo subir tu aplicación de React Native al Play Store

Cómo subir tu aplicación de React Native al App Store

Conclusiones

Cierre del curso

Desafíos

Desafío 1 - Lista los artistas top de tu país

Desafío 2 - Lista la cantidad precisa de comentarios

Desafío 3 - Comparte un artista en Facebook o Whatsapp