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

Navegaci贸n entre pantallas

7/22
Recursos

Aportes 35

Preguntas 14

Ordenar por:

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

Un aporte:

// Siguiente ruta:
navigation.navigate("ScreenName");
// Pasar estado:
navigation.navigate("ScreenName", { someValue: 1});

Pueden utilizar esta forma si utilizan componentes funcionales o componentes sin estados sin utilizar props

Inclusive, pasar 鈥渆stados鈥, as铆 como en el ejemplo.

Gracias profesor

Hola Devs:
-Aca les dejo como lo he hecho con componentes funcionales:

Recuerda, #NuncaParesDeAprender 馃挌

una cosilla que tal vez pueda ayudar
esta es mi distribucion de folders en el app. He trabajado bastante con react y react native y es la forma mas escalable hasta ahora que he conseguido para la distribucion de files. Y en la carpeta views poner una carpeta que se llame _partials solo para componentes que usen solo unas views especificas (algo como _partials para componentes solo de las views y components para crear los stacks o cosas asi)

驴C贸mo hacer debug con Chrome de React Native?

Para que los que ya utilizaron algo de React recuerden que los componentes sin estado son lo que solo dibujan algo en pantalla pero no interactuan con los estados de la aplicaci贸n o con los ciclos de vida es decir las famosas funciones puros y lo extends son los que pueden o deben acceder a estados y a los ciclos de vida del componente.

Un aporte con hooks

import React from 'react'
import { StyleSheet, Text, View, Pressable } from 'react-native'

export const CoinsScreen = ({ navigation }) => {
    const handlePess = () => {
        navigation.navigate('CoinDetailScreen')
    }
    return (
        <View style={styles.container}>
            <Text style={styles.titleText}>CoinsScreen </Text>
            <Pressable style={styles.btn} onPress={handlePess}>
                <Text style={styles.btnText}>Ir a detail</Text>
            </Pressable>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'red'
    },
    titleText: {
        color: 'white',
        textAlign: 'center'
    },
    btn: {
        padding: 0,
        backgroundColor: 'blue',
        borderRadius: 8,
        margin: 16
    },
    btnText: {
        color: 'white',
        textAlign: 'center'
    }
})
error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup. Run CLI with --verbose flag for more details.
Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected]0.0.1 android: `react-native run-android`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected]0.0.1 android script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\PERSONAL\AppData\Roaming\npm-cache\_logs\2020-11-16T17_45_13_318Z-debug.log

Para aquellas personas que se preguntan como hacer debug en Windows, a mi me sirvi贸 con la siguiente combinaci贸n: " ctrl + m "

Extension para lo relacionado a estilos con RN

Name: React Native Snippet
Id: jundat95.react-native-snippet
Description: React Native, Typescript React Native, StyleSheet, Redux Snippet
Version: 0.5.6
Publisher: Jundat95
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=jundat95.react-native-snippet

QUE LOCASOO

Que nervios que utilice Class Components

yo presiono en mac command+m no me muestra ese menu, a alguien le paso?

this.props me muestra vac铆o

import React, { Component } from 'react';
import { View, Text, Pressable, StyleSheet } from 'react-native';

class CoinsScreen extends Component {

    handlerPress = ()=>{
        console.log("go to detail", this.props);
        this.props.navigation.navigate('CoinDetail');
    }

    render(){
        return (
            <View style={styles.container}>
                <Text style={styles.titleText}> Coins Screen</Text>
                <Pressable style={styles.btn} onPress={this.handlerPress}>
                    <Text style={styles.btnText}>Ir a detail</Text>
                </Pressable>
            </View>
        );
    }
}

const styles = StyleSheet.create({
   ......
});

export default CoinsScreen;

Con este error en el navigation.navigate

ReactNativeJS 鈻讹笌 TypeError: undefined is not an object (evaluatin
g '_this.props.navigation.navigate')

Al correr el proyecto en Android me sal铆a el error 鈥淭he application could not be installed: INSTALL_FAILED_INSUFFICIENT_STORAGE react native鈥 lo cual lo solucione con los comentarios en https://stackoverflow.com/questions/62861072/install-failed-insufficient-storage-error-when-i-ran-npm-run-android-command

Solo se debe de aumentar el storage como viene en el GIF

Hay otra manera de usar navigation

//Importamos useNavigation
import { useNavigation } from '@react-navigation/native';

const CoinsScreen = () => {

//definimos la variable.
const navigation = useNavigation()

  const handlePress = () => {
//Lo usamos como aprendimos
  navigation.navigate("Coins Details")
  };
  return (
    <View style={tailwind("flex items-center")}>
      <Text>Hola soy coinsScreens</Text>
      <Pressable onPress={handlePress}>
        <Text>
          Ir a detail
        </Text>
      </Pressable>
    </View>
  );
};

export default CoinsScreen;

Lo anterior puede ser muy 煤til para componentes que no reciben autom谩ticamente en las props el navigate.

A m铆 me gusta trabajar con componentes funcionales
As铆 se ven CoinScreen como componente funcional

import React from 'react';
import {Pressable, StyleSheet, Text, View} from 'react-native';

const CoinsScreen = props => {
  const handlePress = event => {
    props.navigation.navigate('CoinDetail');
  };

  return (
    <View style={styles.container}>
      <Text style={styles.titleText}>Coins Screen</Text>
      <Pressable onPress={handlePress} style={styles.btn}>
        <Text style={styles.btnText}>Go to coins detail</Text>
      </Pressable>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'red',
  },
  titleText: {
    color: 'white',
    textAlign: 'center',
  },
  btn: {
    padding: 8,
    backgroundColor: 'blue',
    borderRadius: 8,
    margin: 16,
  },
  btnText: {
    color: 'white',
    textAlign: 'center',
  },
});

export default CoinsScreen;

Excelente curso estoy muy contento que este sea mi primer curso en platzi

Si surge el error

error Failed to launch emulator. Reason: No emulators found as an output of `emulator -list-avds`.

Tenes dos opciones, conectar tu tel茅fono para correr la app ah铆 o bien ejecutar el emulador de android estudio y oprimir la flecha verde que se ubica en la primera posici贸n en la barra de men煤 (barra donde se ejecuta el emulador)

Realmente la estructura ser铆a esas vista en una carpeta llamada screens y los componentes dejarlos para un componente tipo Bot贸n?

Me sale un error cuando ejecuto npm run android 馃槮

error Android project not found. Are you sure this is a React Native project? If your Android files are located in a non-standard location (e.g. not inside 'android' folder), consider setting `project.android.sourceDir` option to point to a new location. Run CLI with --verbose flag for more details.

Estoy dentro de la carpeta del pryecto 馃槮

Navegaci贸n entre pantallas

Navegaci贸n entre pantallas

En windows si no pueden entrar al comand + m para el debug escriban esto en la consola donde arrancaron el android

adb shell input keyevent 82

Para los que no saben como ejecutar command + m en windows, en el android studio, abajo mismo en la pesta帽a logcat, pueden ver el debug y filtrando donde dice verbose a debug, creo que es una de las formas de verlo.

En MAC en cmd + m para el Degbug, pero para windows como se lo puede realizar?

Alguien sabe cual es el equivalente de command + End en Windows para abrir la depuraci贸n en el navegador.

esto deber铆a decir el profesor, ya que hay muchas personas que est谩n trabajando en Windows

tambi茅n puedes correr un emulador de android con el siguiente comando

npx react-native run-android

Comparto el c贸digo de coinScreen:

import  React, {Component } from 'react';
import {View, Text, Pressable, StyleSheet} from 'react-native'

class CoinsScreen extends Component {
    handlePress = () => {
        this.props.navigation.navigate('CoinDetail')
        console.log("Click")
    }

    render(){
        return(
            <View style={styles.container}>
                <Text style={styles.tittleText}>
                    Coin Screen
                </Text>
                <Pressable style={styles.btn} onPress={this.handlePress}>
                    <Text style={styles.btnText}>Detail</Text>
                </Pressable>
            </View >
        )
    }
}
export default CoinsScreen

const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:"#333"
    },
    tittleText:{
        color:"#fff",
        textAlign:"center"
    },
    btn:{
        padding:8,
        backgroundColor:"#0000aa",
        borderRadius:8,
        margin:16,
    },
    btnText:{
        color:"#fff",
        textAlign:"center"
    }
})```

Si alguien le gusta usar componentes funcionales React Navigation dispone de un hook para hacer esta operaci贸n.

import { Icon } from 'react-native-elements';
import { useNavigation } from '@react-navigation/native';
const Main = (props) => {
  const navigation = useNavigation();
  const handleNavigation = async () => {
    navigation.navigate('Secundary');
  };

  return (
        <Icon
          raised
          onPress={handleNavigation}
          name="envelope-square"
          type="font-awesome"
        />
  );
};
export default Main;

驴Cual es la diferencia entre usar
class componentName extends Component{
render(){
return()
}
}

de

const componentName = (props) =>{
return()
}

esto esta pero extramadamente buenooo!!!

Si se instalan esta extensi贸n pueden escribir rnce + Tab para crear el componente mas r谩pido.

Hola @alesanabriav y gente del foro. Soy viejo en React pero nuevo en Native.
Quer铆a saber si utilizas componentes de clase en lugar de funcionales por alg煤n motivo en particular.
(pido disculpas si esto ya fue preguntado)
Saludos!

no me sale鈥 uso los mismos comandos pero me sale error ,no me deja ver la pantalla tal cual el profesor no se como emularlo correctamente ya que hago lo msimo que el pero el resultado no es el mismo para mi