如何在使用 StackNavigator 登录后更新 React Native Expo 中的主屏幕

Question

我正在 React Native Expo 中开发我的第一个应用程序，我已经取得了很多进展，但目前当用户登录并正确验证数据但屏幕没有改变时我遇到了问题。你能帮我一下吗？

这是我的 StackNavigator 的代码

const Stack = createStackNavigator();

const StackNavigator = () => {

const [isLoggedIn, setIsLoggedIn] = useState(false);
const [isLoading, setIsLoading] = useState(false);

useEffect(() => {
    const checkLoginStatus = async () => {
      try {
        let token = await AsyncStorage.getItem("token");
        setIsLoggedIn(!!token);

        if (isLoggedIn) {
          setIsLoading(true);
          // Refresh your app data here (e.g., fetch user details, cart items, etc.)
          await doAsyncRefresh();
          setIsLoading(false);
        }
      } catch (err) {
        setIsLoggedIn(false);
      }
    };

    checkLoginStatus();
  }, []);

return (
    <Stack.Navigator>
      {isLoggedIn ? (
        <>
          <Stack.Screen name="Inicio" component={BottomTabNavigator} options={{headerShown: false}}/>
          <Stack.Screen name="Order" component={OrderScreen} 
            options={{
              title: 'Realiza tu pedido'
            }}
          />

          <Stack.Screen name="Detalle" component={ProductDetailScreen} 
            options={{
              title: 'Información del producto'
            }}
          />
          <Stack.Screen name="Home" component={HomeSreen} />
          <Stack.Screen name="Orders" component={OrderDetailScreen} 
            options={{
              title: 'Historial de pedidos'
            }}
          />
          <Stack.Screen name="DatosFacturacion" component={InvoiceDataScreen} 
            options={{
              title: 'Datos de facturación'
            }}
          />
          <Stack.Screen name="ProductosPorCategoria" component={ShowPerCategoryListScreen} 
            options={{
              title: 'Productos por categoria'
            }}
          />
          <Stack.Screen name="Confirmation" component={ConfirmationOrderScreen} 
            options={{headerShown: false}}
          />
        </>
      ) : (
        <>
          <Stack.Screen name="Login" component={LoginScreen} />
        </>
      )}
    </Stack.Navigator>
);

}

导出默认StackNavigator；

这是我在 AuthContext 中登录的代码

常量登录=异步（电子邮件，密码）=> {

setIsLoading(true);

try {
    
    // Send the login request to the API
    const response = await axios.post('https://ecommerce.comercializadoramya.com/api/v1/login', {
      email,
      password,
      device_name: 'Mobile'
    });

    if(response.data.success){
        const token = response.data.token;
        const user_info = response.data.user;

        await AsyncStorage.setItem('token', token);
        await AsyncStorage.setItem('user_info', JSON.stringify(user_info));

        setUserInfo(user_info);
        console.log(user_info);
        console.log(token);

        await isLoggedIn(true);

    }else{
       setErrorMessage(response.data.message);
    } 

  } catch (error) {

    if (error.response.status === 401) {
      setErrorMessage('La contraseña es incorrecta por favor intenta nuevamente');
    } else if (error.response.status === 404) {
      setErrorMessage('No existe un usuario con este correo electrónico');
    } else {
      setErrorMessage('Ha ocurrido un error. Intenta nuevamente.');
    }

    // Handle error using error handling tools or custom logic
    setErrorMessage(error.message);
  }

  setIsLoading(false);

};

Answer 1

让我展示一下登录后如何管理我的导航器。

这里你需要管理两个堆栈导航器。我建议您将堆栈导航器更改为两个堆栈。例如

AuthStack

和

AppStack

Authstack.js

    
const Authstack= ()=>{

    const Stack = createNativeStackNavigator();
  
    return(
        <Stack.Navigator initialRouteName='Login'>
            <Stack.Screen name="Login" component={Login}  />
        </Stack.Navigator>
        
    );
}
export default Authstack

AppStack.js

const AppStack= ()=>{

    const Stack = createNativeStackNavigator();
  
    return(
        <Stack.Navigator >
            <Stack.Screen name="Inicio" component={BottomTabNavigator}   />
            <Stack.Screen name="Order" component={OrderScreen} 
            options={{
              title: 'Realiza tu pedido'
            }}
          />

          <Stack.Screen name="Detalle" component={ProductDetailScreen} 
            options={{
              title: 'Información del producto'
            }}
          />
          <Stack.Screen name="Home" component={HomeSreen} />
          <Stack.Screen name="Orders" component={OrderDetailScreen} 
            options={{
              title: 'Historial de pedidos'
            }}
          />
          <Stack.Screen name="DatosFacturacion" component={InvoiceDataScreen} 
            options={{
              title: 'Datos de facturación'
            }}
          />
          <Stack.Screen name="ProductosPorCategoria" component={ShowPerCategoryListScreen} 
            options={{
              title: 'Productos por categoria'
            }}
          />
          <Stack.Screen name="Confirmation" component={ConfirmationOrderScreen} 
            options={{headerShown: false}}
          />
        </Stack.Navigator>
        
    );
}

export default AppStack

然后您需要使用

useContext

钩子来管理日志记录。上下文是全局管理状态的一种方式。

请参阅 https://react.dev/reference/react/useContext 了解更多信息。

LoginProvider.js

    
import React,{ createContext, useContext, useState, useEffect} from 'react'
import AsyncStorage from '@react-native-async-storage/async-storage';


const LoginContext = createContext();

const LoginProvider = ({children}) => {
    const [isLoggedIn, setIsLoggedIn] = useState(false);

    useEffect(async()=>{
        const token= await AsyncStorage.getItem('token')
        (token ? setIsLoggedIn(true) : setIsLoggedIn(false))
      },[])

  return (
    <LoginContext.Provider value={{isLoggedIn, setIsLoggedIn}}>
        {children}
    </LoginContext.Provider>
  )
}

export const useLogin = () => useContext(LoginContext)


export default LoginProvider

然后你可以使用LoginProvider来管理你的登录状态

路线.js

import React, { useEffect, useState } from 'react';
import { NavigationContainer} from '@react-navigation/native';
import 'react-native-gesture-handler';

import AuthStack from './Authstack';
import AppStack from './Appstack';
import { useLogin } from './LoginProvider';


function Route() {

  const {isLoggedIn, setIsLoggedIn} = useLogin()

    return (
      <NavigationContainer  >
          {(isLoggedIn ? <AppStack/> : <AuthStack/>) }
      </NavigationContainer>
    );
  }

  export default Route;

希望您能通过上面的例子有所了解。