Agregando una vista de detalle

Clase 18 de 36 • Curso de React Native 2016

Resumen

Es hora de instalar react-native-router-flux. Lo primero que hay que hacer es instalar la librería con el comando:
npm i react-native-router-flux --save
Si tenemos algún problema durante su instalación, debemos cerrar el simulador y el bridge y correr el comando:
npm start --reset-cache

Y cuando termine el proceso, terminarlo y volver a correr los simuladores.

Una vez que tengamos esta librería funcionando, crearemos las vistas de HomeView y ArtistDetailView y agregaremos la navegación entre ambas.

Veremos un patrón muy utilizado en iOS que es el botón volver. Observa lo fácil que es ocultarlo en Android: todo es JavaScript.

Nicolás F. Ormeño Rojas

student•

En la configuración de las rutas, ahí que hacer una pequeña configuración extra

class PlatziMusic extends React.Component {
  render() {
    return <Router>
      <Scene key="root">
        <Scene key="home" component={HomeView} hideNavBar={true} />
        <Scene key="artistDetail" component={ArtistDetailView} hideNavBar={false} />
      </Scene>
    </Router>
  }
}

Esto es debido a la descripción de hideNavBar

“hides the navigation bar for this scene and any following scenes until explicitly reversed”

Cuando ocultamos una escena, ocultamos todas las demás, hasta que, explícitamente indiquemos lo contrario

Usuario anónimo

user•

Alguien me puede ayudar yo lo hice de otra manera utilizando FlatList ok todo perfecto me muestra la lista principal pero cuando le doy a un artista me pasa a la otra vista de detalle pero solo me muestra la imagen no me muestra los demas datos, hice console.warn y si me muestra el nombre los likes y los comentarios pero no se porque no lo muestra, lo que si sale es un warring de que no uso la key alguien quien me ayude
este es mi codigo

ARTISTLIST

export default class ArtistList extends Component {

    handlePress(item){
      // console.warn('Artist is ', item); 
      this.props.navigation.navigate('Details',{item});
    }

render(){

    return ( 
      <FlatList
        data={this.props.artists}
        renderItem={({item}) => {
        return ( 
          <TouchableOpacity
           onPress={() => this.handlePress(item)}>
            <ArtistBox artist={item} />
          </TouchableOpacity>
        )}}
        keyExtractor={item => item.artists}
      />
    );   
  }
}

DETAILS

class Details extends Component {

  render() {
    const artists = this.props.navigation.state.params.item
    // console.warn(JSON.stringify(artists))
        return (
          <View style={styles.artistBox}>
            <ArtistBox artist={artists}/>
          </View>
    );  
  }
}

David Stiven Valbuena Restrepo

student•

Yo tuve ese mismo error, lo solucione eliminando la línea flex del estilo de la caja del artista

Esnor Noel Enrique Vaca Moreno

student•

Yo hice de ésta forma:

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  FlatList, 
  TouchableOpacity,
} from 'react-native';
import ArtistBox from './ArtistBox';
import { Actions } from 'react-native-router-flux';

export default class ArtistList extends Component {
  state = {
    dataSource: this.props.artists
  }

  componentWillReceiveProps(newProps) {
    if (newProps.artists !== this.props.artists) {
    this.setState({
      dataSource: newProps.artists
    })
    }
  }

  renderItem = ({ item, index }) => {
    return(
      <TouchableOpacity 
        onPress={() => this.handlePress(item)}>
        <ArtistBox artist={item} />
      </TouchableOpacity>
    )
  }

  handlePress(artist) {
    Actions.artistDetail({artist})
  }

  render() {   
    return (
      <FlatList
        data={this.state.dataSource}
        renderItem={this.renderItem}
      />
    );
  }
}

El ArtistDetailView.js lo tengo igual al del video.

Daniela P. Toscano Zapata

student•

Para aquellos que no alcanzan a ver bien como quedó la linea 27:

const isAndroid = Platform.OS === 'android'

    return <Router>
      <Scene key="root">
        <Scene key="home" component={HomeView} hideNavBar />
        <Scene key="artistDetail" component={ArtistDetail} hideNavBar={isAndroid} />
      </Scene>
    </Router>

Abdelkarim Khouyi

student•

Me sale este error:
unable to resolve module react-native-router-flux
aunque he copiado los archivos creados por el profesor

Sacha Lifszyc

teacher•

corriste el comando npm install en el directorio del proyecto?

Abdelkarim Khouyi

student•

Si pero sigue el error

Arnold Torres Teheran

student•

Hola, me sale este error, cuando ejecuto la aplicacion, con la libreria de router-flux, gracias, por la ayuda…
error: bundling: UnableToResolveError: Unable to resolve module react/lib/ReactComponentWithPureRenderMixin from /Users/arnoldtorres/Sites/musicapp/MusicApp/node_modules/react-native-experimental-navigation/node_modules/react-addons-pure-render-mixin/index.js: Module does not exist in the module map or in these directories:
/Users/arnoldtorres/Sites/musicapp/MusicApp/node_modules/react-native-experimental-navigation/node_modules/react/lib
, /Users/arnoldtorres/Sites/musicapp/MusicApp/node_modules/react/lib
, /Users/arnoldtorres/Sites/musicapp/node_modules/react/lib

Iván López Hdez

student•

Yo estoy con el mismo error alguna solucion?

jhon erick marroquin cardenas

student•

El mismo error, por acá ¿Alguna solución?

David González Vidal González Vidal

student•

Después de instalar router-flux me arrojó el siguiente error en el simulador:

No bundle URL present.
Make sure you’re running a packager server or have included a .jsbundle file in your application bundle.

Ya ejecute el comando npm start --reset-cache, pero nada.

Audel Ortiz O. Gutierrez

student•

mismo issue here

Audel Ortiz O. Gutierrez

student•

el problema desaparece cuando desinstaló router-flux

Santiago Maya

student•

A este momento cual es el mejor Router? reacct-native-router-flux? react-navigation, react router o cual?

Emmanuel Montenegro

student•

En la documentación de React Native recomiendan usar React Navigation

Brandon David Estrada Gonzalez

student•

tengo algunos problemas con esta librería

camilo andres reina cifuentes

student•

en estos momentos que es mejor, usar react-native-router-flux o react-router (native) ?

Starling Mercedes

student•

cual boilerplate o start kit de react-native me recomiendan ? para empezar un proyecto ?

Alejandro Sanabria

student•

Yo te recomiendo que uses react-native-cli porque si no vas a tener problemas con las librerías nativas.

camilo andres reina cifuentes

student•

En en el emulador de Android no se muestra los console.warn() ???

Pablo Almonte

student•

Yo uso el emulador de Android y todo me funciona bien.

Martín Varela

student•

Como implementan por ejemplos los menu hamburguesa?
Gracias

Aldo Morales Saldarriaga

student•

Saludos quisiera que me ayudaran cada vez que instalo un nuevo npm el proyecto se cae y me salen errores de dependencias, tengo que ejecutar yarn install para que vuelva a funcionar.

Juan Manuel Lora

student•

Hola, Teniendo en cuenta el nivel de jerarquía de los componentes
HomeView -> ArtistList -> ArtistBox como puedo acceder a las props de HomeView desde ArtistBox ? Gracias por su ayuda.

Gonzalo Aguirre

teacher•

Deberías pasarlas de padre a hijo: primero de HomeView a ArtistList y luego de ArtistList a ArtistBox.

Otra alternativa, si estás usando Redux, es conectar el componente ArtistBox y tener esa prop en el store de Redux.

Rogelio García Valenzuela

student•

Tengo este error:

RawText " /defino una funcion que va a llamar a mi handle con el parametro artist" must be wrapped in an explicit <text> component

Ricardo Azpeitia P.

student•

Seguro estas usando tabs.

Mira esto:

Rogelio García Valenzuela

student•

Muchas gracias, fue de mucha ayuda.

juan carlos

student•

“No bundle present” Make sure you’re running a packager server or have include a .jsbundle file in your application bundle.

Eso aparece al instalar react-native-router-flux al momento de abrir el simulador. Busque en los issues de la libreria y efectivmente “Error with the latest version of React Native 0.43.0” pero no tienen solucion.

Saben como resolverlo?. alguien?

Gian Villanueva

student•

Luego de instalar router flux en el simulador me sale el siguiente error “No dimension set for key windows get Dimensions.js”

Steven Sierra

student•

tengo el mismo problema

Steven Sierra

student•

Alguien ha tenido el siguiente problema con react-native-router-flux??
component property is not set for key=root

Gabriel Rodriguez Diaz

student•

He usado Navigator y cuando lo uso en Android me pone el botón del back nativo, pero en este caso con react-native-router… muestra el mismo que IOS, alguien sabe por que?

Pablo Almonte

student•

Actualmente se utiliza React Navigation

class PlatziMusic extends React.Component {
  render() {
    return <Router>
      <Scene key="root">
        <Scene key="home" component={HomeView} hideNavBar={true} />
        <Scene key="artistDetail" component={ArtistDetailView} hideNavBar={false} />
      </Scene>
    </Router>
  }
}

export default class ArtistList extends Component {

    handlePress(item){
      // console.warn('Artist is ', item); 
      this.props.navigation.navigate('Details',{item});
    }

render(){

    return ( 
      <FlatList
        data={this.props.artists}
        renderItem={({item}) => {
        return ( 
          <TouchableOpacity
           onPress={() => this.handlePress(item)}>
            <ArtistBox artist={item} />
          </TouchableOpacity>
        )}}
        keyExtractor={item => item.artists}
      />
    );   
  }
}

class Details extends Component {

  render() {
    const artists = this.props.navigation.state.params.item
    // console.warn(JSON.stringify(artists))
        return (
          <View style={styles.artistBox}>
            <ArtistBox artist={artists}/>
          </View>
    );  
  }
}

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  FlatList, 
  TouchableOpacity,
} from 'react-native';
import ArtistBox from './ArtistBox';
import { Actions } from 'react-native-router-flux';

export default class ArtistList extends Component {
  state = {
    dataSource: this.props.artists
  }

  componentWillReceiveProps(newProps) {
    if (newProps.artists !== this.props.artists) {
    this.setState({
      dataSource: newProps.artists
    })
    }
  }

  renderItem = ({ item, index }) => {
    return(
      <TouchableOpacity 
        onPress={() => this.handlePress(item)}>
        <ArtistBox artist={item} />
      </TouchableOpacity>
    )
  }

  handlePress(artist) {
    Actions.artistDetail({artist})
  }

  render() {   
    return (
      <FlatList
        data={this.state.dataSource}
        renderItem={this.renderItem}
      />
    );
  }
}

const isAndroid = Platform.OS === 'android'

    return <Router>
      <Scene key="root">
        <Scene key="home" component={HomeView} hideNavBar />
        <Scene key="artistDetail" component={ArtistDetail} hideNavBar={isAndroid} />
      </Scene>
    </Router>

Agregando una vista de detalle

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