Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Como fazer a navegação condicional no react-navigation?

Olá pessoal..

Instalei a dependência do react-navigation (tentei utilizar o react-native-navigation conforme o treinamento, mas devido as versões diferentes, mesmo seguindo a documentação, não consegui utilizar, por isso o react-navigation) para efetuar a navegação do treinamento. Ela está funcionando, porém não estou conseguindo fazer a navegação condicional (caso tenha token ele direciona para a Feed e senão tiver, encaminha para a tela de login).

index.js

import {AppRegistry} from 'react-native';
import App from './src/app';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

app.js

import React from 'react';
import { createAppContainer, NavigationActions, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator} from 'react-navigation-stack';
import Feed from './components/Feed';
import Login from './screens/Login';
import AsyncStorage from '@react-native-community/async-storage';

export default class App extends React.Component {
  render() {
    const RootStack = createSwitchNavigator(
      {
        Feed: {
          screen: Feed,
        },
        Login: {
          screen: Login,
        },
      });
      const AppContainer = createAppContainer(RootStack);

      AsyncStorage.getItem('token')
      .then(token => {
        if(token) {
          return {
            teste: 'Feed'
          }
        }

        return  {
          teste: 'Login'
        }
      })
      .then(pagina => {
        console.warn({pagina})
      });

      return <AppContainer />
    }
}

Neste momento, como eu poderia direcionar?

Obrigado.

2 respostas
solução!

Quando você utiliza o AppContainer, você pode informar dois objetos, o primeiro são as rotas, e o segundo são as configurações.

Existe uma propriedade para o objeto de configurações chamada "initialRouteName "que permite definir qual a rota inicial.

O que você precisa fazer é uma verificação para ver ser o token existe, de acordo com a resposta, você altera a rota inicial.

Aqui tem um exemplo:

https://reactnavigation.org/docs/en/auth-flow.html

Vlw Daniel!! Muito obrigado pela dica.

Implementei aqui e está funcionando certinho!!

Grande abraço.