React Navigation、React Native 中的导航问题

Question

我在我的移动应用程序中使用 react-navigation 5，但我无法实现注销功能。

场景是我的应用中有一个堆栈导航器和一个底部选项卡导航器。该应用程序从堆栈导航器（登录功能和重置密码功能）开始，登录时转到来自底部选项卡导航器的仪表板页面。现在在仪表板页面上，我正在实现一个注销功能，单击该功能时应该将我带到登录页面（堆栈导航器的一部分），无论我尝试什么，它都会不断给我这样的错误

有效载荷为 {"index":0,"routes":[{"name":"AuthNavigator"}]} 的操作“RESET”未被任何导航器处理。

这是我从一开始的代码 sn-ps

从 App.js 调用的组件

import React, { useState, useEffect, useContext } from "react";
import { ActivityIndicator } from "react-native";
import AsyncStorage from '@react-native-async-storage/async-storage';
import { Center } from "../../components/Center";
import { AuthContext } from "../authentication/AuthProvider";
import { NavigationContainer } from "@react-navigation/native";
import { AuthNavigator } from "./AuthNavigator"; 
import { MainTabNavigator } from "./MainTabNavigator"; 


export default function App() {
  const { user, login } = useContext(AuthContext);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // check if the user is logged in or not
    //AsyncStorage.removeItem("user") //- uncomment this and refresh emulator to start from login screen
    AsyncStorage.getItem("user")
      .then(userString => {
        if (userString) {
          login();
        }
        setLoading(false);
      })
      .catch(err => {
        console.log(err);
      });
  }, []);

  if (loading) {
    return (
      <Center>
                <ActivityIndicator size="large" />
      </Center>

    );
  }
  return (
    <NavigationContainer>
      {user ? <MainTabNavigator /> : <AuthNavigator />}
    </NavigationContainer>
  );

}

AuthNavigator.js

import React from "react";
import { createStackNavigator } from '@react-navigation/stack';
import Login from '../authentication/Login';
import ResetPassword from '../authentication/ResetPassword';
import { MainTabNavigator } from "./MainTabNavigator"; 


const Stack = createStackNavigator();

export const AuthNavigator = () => {
    return (
        <Stack.Navigator initialRouteName="Login">
          <Stack.Screen name="Login" component={Login} />
          <Stack.Screen name="ResetPassword" options={{headerTitle: "Reset Password"}} component={ResetPassword} />
        </Stack.Navigator>
      );
}

MainTabNavigator.js

import * as React from 'react';
import { Text, View, Image, StyleSheet, Platform } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import DashboardView from '../dashboard/DashboardView';
import Search from '../searchLoan/Search';
import { colors } from '../../styles';

const iconHome = require('../../../assets/images/tabbar/home.png');
const iconGrids = require('../../../assets/images/tabbar/grids.png');
const searchIcon = require('../../../assets/images/pages/search_24px.png');

const Tab = createBottomTabNavigator();

const tabData = [
  {
    name: 'Dashboard',
    component: DashboardView,
    icon: iconHome,
  },
  {
    name: 'Search',
    component: Search,
    icon: searchIcon,
  },
];

export const MainTabNavigator = () => {
  return (
    <Tab.Navigator tabBarOptions={{ style: { height: Platform.OS === 'ios' ? 90 : 50 } }}>
      {tabData.map((item, idx) => (
        <Tab.Screen
          key={`tab_item${idx + 1}`}
          name={item.name}
          component={item.component}
          options={{
            tabBarIcon: ({ focused }) => (
              <View style={styles.tabBarItemContainer}>
                <Image
                  resizeMode="contain"
                  source={item.icon}
                  style={[styles.tabBarIcon, focused && styles.tabBarIconFocused]}
                />
              </View>
            ),
            tabBarLabel: ({ focused }) => <Text style={{ fontSize: 12, color: focused ? colors.primary : colors.gray }}>{item.name}</Text>,
            title: item.name,
          }}
        />
      ))}
    </Tab.Navigator>
  );
};

const styles = StyleSheet.create({
  tabBarItemContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    borderBottomWidth: 2,
    borderBottomColor: colors.white,
    paddingHorizontal: 10,
    bottom: Platform.OS === 'ios' ? -5 : 0,
  },
  tabBarIcon: {
    width: 23,
    height: 23,
  },
  tabBarIconFocused: {
    tintColor: colors.primary,
  },
});

DashboardView.js

import React , {useContext }from 'react';
import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';
import {Header} from 'react-native-elements';
import AntIcon from "react-native-vector-icons/AntDesign";
import { colors, fonts } from '../../styles';
import AmountDetails from './AmountDetails';
import DashboardFields from './DashboardFields';
import { AuthContext } from "../authentication/AuthProvider";
import { CommonActions } from "@react-navigation/native";


export default function DashboardView(props) {
    const appLogOut = () => {
        const { logout } = useContext(AuthContext);
        console.log('props', props)
        if(logout){
           // console.log("Navigation Object", navigation)
           props.navigation.dispatch(
            CommonActions.reset({
               index: 0,
               routes: [{ name: "AuthNavigator" }],
           }));

        }
    }
    return (
        <View style={styles.container}>
            <Header containerStyle = {{backgroundColor: colors.primary}}
            centerComponent={{ text: 'Dashboard', style: { color: colors.white, backgroundColor: colors.primary } }}
            rightComponent = <TouchableOpacity onPress={appLogOut()}><AntIcon name="logout" color="white" size={25}/></TouchableOpacity>
            />           
            <View style={styles.container}>
                <View>
                    <AmountDetails />
                </View>
                <View style={styles.dashboardFields}>
                    <DashboardFields />
                </View>
            </View>
        </View>
       
    );
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: colors.gray,
    },
    dashboardFields: {
        marginTop: 20,
    },
});

Answer 1

您应该尝试直接调用登录屏幕，而不是整个堆栈。

CommonActions.reset({
               index: 0,
               routes: [{ name: "Login" }],
           }));

Answer 2

正如另一个答案所说，您的路线名称不正确（AuthNavigator）。

但是，您是根据用户是否登录来有条件地定义屏幕。退出时您不需要做任何额外的事情。有条件地定义屏幕意味着 React Navigation 可以在条件更改时自动处理要显示的屏幕。

所以你需要删除重置的代码。

来自文档：

请务必注意，在使用此类设置时，您无需通过调用navigation.navigate('Home') 或任何其他方法手动导航 到Home 屏幕。 React Navigation 将在 isSigned 发生变化时自动导航到正确的屏幕 - 当 isSignedIn 变为 true 时，Home 屏幕，当 isSignedIn 变为 false 时，将导航到 SignIn 屏幕.如果您尝试手动导航，则会收到错误消息。

更多详情：https://reactnavigation.org/docs/auth-flow/