0

espero me puedan ayudar con lo siguiente:

Tengo mi archivo App.js donde obtengo un token al iniciar sesión, pues bien, una vez se se inicia sesión cargo otro componente llamado Principal.js, en este creo mi StackNavigator donde genero las rutas, pues bien necesito enviar el toke recibido en App.js a Principal.js para que asi en Principal.js enviarlo como parametro a las rutas (ya lo ultimo lo tengo resuelto)

Aqui mi codigo en App.js

import React from "react";
import Principal from "./Principal";
import Login from "./Login";
import NavegacionPrincipal from "./NavegacionPrincipal";
import { Text, View } from "react-native";

export default class App extends React.Component {
  state = {
    token: "",
    usuario: ""
  };

  cargaToken = token => {
    this.setState({
      token: token
    });
  };

  enviaToken = () => {
    return this.state.token;
  };

  render() {
    if (this.state.token != "") {
      return <Principal screenProps={this.state.token} />;
    } else {
      return <Login cargaToken={this.cargaToken} />;
      //return <NavegacionPrincipal />;
    }
  }
}

Aqui mi código en Principal.js

import React, { Component } from "react"; //<====== solo para envio de parametros
import { Text, View } from "react-native"; //<====== solo para envio de parametros
import { createStackNavigator, createAppContainer } from "react-navigation";
import Home from "./Home";
import Navegacion from "./Navegacion";
import Configuracion from "./Configuracion";
import ConductorInfo from "./ConductorInfo";
import SeleccionPPU from "./SeleccionPPU";
import Siniestros from "./Siniestros";

retornaToken = () => {
  const valorToken = Inicio;
  return valor;
};

class Inicio extends React.Component {
  obtieneToken() {
    const token = this.props.screenProps;
    console.log("el token es:" + token);
  }
}
const RootStack = createStackNavigator(
  {
    //Home: { screen: <Home tokenLlave={this.props.screenProps} /> },
    Home: {
      screen: Home,
      params: { token: Inicio }
    },
    Navegacion: { screen: Navegacion },
    Configuracion: { screen: Configuracion },
    ConductorInfo: { screen: ConductorInfo },
    SeleccionPPU: { screen: SeleccionPPU },
    Siniestros: { screen: Siniestros }
  },
  {
    initialRouteName: "Home"
  }
);

export default createAppContainer(RootStack);

Como ven, en:

Home: {
          screen: Home,
          params: { token: Inicio }
        },

estoy enviando como parámetro (en Principal.js) el token en la ruta, pero no logro recibirlo de App.js

Gracias a quienes me pueden ayudar en lograr recibir el parámetro desde App.js en el componente donde armo las rutas (Principal.js) :)

Version de react-native-cli: 2.0.1 Version de react-native: 0.57.1

1 respuesta 1

0

Los parametros que pasas con screenProps ya está en las 'screens' y los puedes usar con this.props.screenPropscómo https://reactnavigation.org/docs/en/stack-navigator.html#navigator-props.

<SomeStack
  screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
/>

Los estas haciendo mal, eso si, en App.js Correcto es: screenProps={ { token: this.state.token } }

...
render() {
    if (this.state.token != "") {
      return <Principal screenProps={ { token: this.state.token } } />;
    } else {
      return <Login cargaToken={this.cargaToken} />;
      //return <NavegacionPrincipal />;
    }
  }

Entonces no hacer falta pasar params en home

...
const RootStack = createStackNavigator(
  {
    //Home: { screen: <Home tokenLlave={this.props.screenProps} /> },
    Home: {
      screen: Home,
    },
    Navegacion: { screen: Navegacion },
    Configuracion: { screen: Configuracion },
    ConductorInfo: { screen: ConductorInfo },
    SeleccionPPU: { screen: SeleccionPPU },
    Siniestros: { screen: Siniestros }
  },
  {
    initialRouteName: "Home"
  }
);
...

Simplemente en Home ya pudes usar this.props.screenProps.token

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.