反应导航没有显示正确的屏幕

Posted 2023-03-12

【中文标题】反应导航没有显示正确的屏幕

【英文标题】：React navigation not showing the right screen

【发布时间】：2020-05-25 12:50:58

【问题描述】：

我为我的应用程序创建了一个导航设置，该设置应该从欢迎屏幕上的欢迎屏幕开始，您会发现两个按钮，一个用于注册，另一个用于登录。

当用户注册或登录时，他会被发送到其他屏幕。我在登录和注册屏幕之间创建了一个堆栈导航器，并将它们放在一个 loginFlow 常量中，另一个放在欢迎屏幕和 loginFlow 常量之间，并且这些屏幕之间的导航工作，但由于某种原因，欢迎屏幕没有显示首先，我得到了注册屏幕（注册屏幕）。

为什么会这样，我怎样才能让welcomeScreen首先显示

import React from "react";
import  View  from "react-native";
import WeclomeScreen from "./app/screens/WelcomeScreen";
import MainScreen from "./app/screens/MainScreen";
import AccountScreen from "./app/screens/AccountScreen";
import  Provider as AuthProvider  from "./app/context/AuthContext";
import  createMaterialBottomTabNavigator  from "react-navigation-material-bottom-tabs";
import SignupScreen from "./app/screens/SignupScreen";
import  createAppContainer, createSwitchNavigator  from "react-navigation";
import  createStackNavigator  from "react-navigation-stack";
import ResultShowScreen from "./app/screens/ResultShowScreen";
import ResolveAuthScreen from "./app/screens/ResolveAuthScreen";
import SigninScreen from "./app/screens/SigninScreen";
import ArticleSaveScreen from "./app/screens/ArticleSaveScreen";
import  setNavigator  from "./app/navigationRef";

const articleListFlow = createStackNavigator(
  Main: MainScreen, // screen with diffrent articles categories
  ResultsShow: ResultShowScreen, // article details screen
);
const loginFlow = createStackNavigator(
  Signup: SignupScreen,
  Signin: SigninScreen,
);
loginFlow.navigationOptions = () => 
  return 
    headerShown: false,
  ;
;

articleListFlow.navigationOptions = 
  title: "News Feed",
  tabBarIcon: ( tintColor ) => (
    <View>
      <Icon style=[ color: tintColor ] size=25 name="ios-cart" />
    </View>
  ),
  activeColor: "#ffffff",
  inactiveColor: "#ebaabd",
  barStyle:  backgroundColor: "#d13560" ,
;
const switchNavigator = createSwitchNavigator(
  ResolveAuth: ResolveAuthScreen,
  MainloginFlow: createStackNavigator(
    WelcomeScreen: WeclomeScreen,
    loginFlow: loginFlow,
  ),

  mainFlow: createMaterialBottomTabNavigator(
    
      articleListFlow: articleListFlow,
      ArticleSave: ArticleSaveScreen, // we dont need this one
      Account: AccountScreen,
    ,
    
      activeColor: "#ffffff",
      inactiveColor: "#bda1f7",
      barStyle:  backgroundColor: "#6948f4" ,
    
  ),
);
const App = createAppContainer(switchNavigator);
export default () => 
  return (
    <AuthProvider>
      <App
        ref=(navigator) => 
          setNavigator(navigator);
        
      />
    </AuthProvider>
  );
;

这里是 ResolveAuthscreen 的内容：

import React,  useEffect, useContext  from "react";
import  Context as AuthContext  from "../context/AuthContext";

const ResolveAuthScreen = () => 
  const  tryLocalSignin  = useContext(AuthContext);

  useEffect(() => 
    tryLocalSignin();
  , []);

  // not returning anything since just waiting to check the token
  // will transition to signin or signup very quickly
  return null;
;

export default ResolveAuthScreen;

【问题讨论】：

能否也提供ResolveAuthScreen的内容？

是的，我在最初的帖子中添加了它

tryLocalSignin 函数中有什么？

只是一种查看用户登录信息是否存储在本地设备上的方法，以便他可以自动登录，而无需每次都输入登录信息

您是否根据任何条件浏览tryLocalSignin 函数中的用途？

【参考方案1】：

正如您在 cmets 中提到的，您的 tryLocalSignin 方法存在问题。在该方法中，如果没有任何token，则您将用户导航到Signup 屏幕。不要导航到Signup 屏幕，而是导航到WelcomeScreen 屏幕，如下所示：

const tryLocalSignin = (dispatch) => async () => 
    const token = await AsyncStorage.getItem("token");
    if (token) 
        dispatch( type: "signin", payload: token );
        navigate("Main");
     else 
        navigate("WelcomeScreen");
    
;