Блог

Я новичок в навигации, ориентированной на реакцию. В настоящее время у меня есть два стека AuthenicationStack , в которых у меня есть экран входа и регистрации. Второй стек MainStack , где у меня есть основные экраны, которые появляются после входа пользователей в систему.

в App.js Я проверяю токен, чтобы убедиться, что пользователь уже вошел в систему, и вот код:

 import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import AuthenticationStack from './src/navigation/AuthenticationStack';
import MainStack from './src/navigation/MainStack';
import AsyncStorage from '@react-native-async-storage/async-storage'


export default function App() {

  const [userId, setUserId] = useState(null);
  const [token, setToken] = useState(null);

  AsyncStorage.getItem('userId')
    .then((value) => {
      console.log('userId: ', value);
      setUserId(value);
    })
  AsyncStorage.getItem('token')
    .then((value) => {
      console.log('token: ',value);
      setToken(value);
    })

  return (
    <NavigationContainer>
        {
          token ?
            <MainStack />
          :
            <AuthenticationStack />
        }
    </NavigationContainer>

  );
}
 

и вот мой стек аутентификации:

 import { createStackNavigator } from '@react-navigation/stack';
import React from 'react';


import Login from '../components/Login/Login';
import Signup from '../components/Signup/Signup';

const AuthenticationStack = () => {

    const Stack = createStackNavigator();
    return (
        <Stack.Navigator initialRouteName="login">
            <Stack.Screen name="login" component={Login} />
            <Stack.Screen name="signup" component={Signup} />
            
        </Stack.Navigator>
    );
}

export default AuthenticationStack;
 

Опора:

 import { createStackNavigator } from '@react-navigation/stack';
import React from 'react';


import Home from '../components/Home/Home';

const MainStack = () => {

    const Stack = createStackNavigator();
    return (
        <Stack.Navigator initialRouteName="home">
            <Stack.Screen name="home" component={Home} />
            {/* I want to add more screens here */}
        </Stack.Navigator>
    );
}

export default MainStack;
 

So, when the user launches the app the app do what is supposed to do and check which stack to render. My Question is when I login in Login.js how to go to the MainStack and when I logout from the Home.js in the MainStack how do I go to the AuthenticationStack ?