React Bottom Tab Navigator组件跳转至Login页面失败求助

问题原因 #

你的Settings组件位于嵌套的Tab导航器内，而这个Tab导航器又被包裹在根Stack的Main屏幕中。当前组件获取到的navigation对象属于Tab导航器，它的路由列表仅包含Tab的三个标签页（Home、Activity、Settings），无法识别根Stack中注册的Login屏幕，因此直接调用navigate('Login')会抛出未找到路由的错误。

解决方案 #

方案1：获取根导航器实例跳转

通过navigation.getParent()向上获取父导航器（即根Stack导航器），再调用它的navigate方法跳转到Login：

logOutPress = async() => {
  try {
    await AsyncStorage.clear();
    // 获取根Stack导航器的引用
    const rootNavigator = this.props.navigation.getParent();
    rootNavigator.navigate('Login');
  } catch (error) {
    console.log('Error clearing AsyncStorage:', error);
  }
}

如果导航嵌套层级更深，可以多次调用getParent()，直到获取到根导航器。

方案2：重置整个导航栈（推荐登出场景）

登出后通常不希望用户能返回之前的页面，因此可以用CommonActions.reset直接重置导航栈，将Login设为唯一的路由：

import { CommonActions } from '@react-navigation/native';

logOutPress = async() => {
  try {
    await AsyncStorage.clear();
    this.props.navigation.dispatch(
      CommonActions.reset({
        index: 0,
        routes: [{ name: 'Login' }],
      })
    );
  } catch (error) {
    console.log('Error clearing AsyncStorage:', error);
  }
}

额外验证 #

确保App.js中的根Stack导航器已正确注册Login屏幕，示例结构如下：

// App.js 根Stack示例
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Main">
        <Stack.Screen name="Main" component={MainTabNavigator} />
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="Signup" component={Signup} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

内容的提问来源于stack exchange，提问作者Siyabonga Mathikge