React Native嵌套导航报错：NAVIGATE操作未被任何导航器处理

报错信息 #

ERROR The action 'NAVIGATE' with payload {"name":"ExploreStack","params":{"screen":"Roaster"}} was not handled by any navigator. Do you have a screen named 'ExploreStack'?

使用的库版本 #

• @react-navigation/native: "^6.0.0"
• @react-navigation/bottom-tabs: "^6.0.0"
• @react-navigation/stack: "^6.0.0"
• react-native-vector-icons: "^8.0.0"

问题描述 #

底部标签导航（Tab.Navigator）包含Dashboard、Explore、Settings三个标签页，其中Explore标签页嵌套了ExploreStack栈导航，栈内包含ExploreScreen及多个目标跳转屏幕。点击ExploreScreen中的按钮跳转时触发上述报错，页面无变化。

相关代码 #

ExploreScreen.js #

import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';

const ExploreScreen = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.item} onPress={() => navigation.navigate('ScreenTimeTracking')}>
        <Ionicons name="time" size={24} color="#000" />
        <Text style={styles.text}>Screen Time Tracking</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.item} onPress={() => navigation.navigate('ApplicationProcess')}>
        <Ionicons name="apps" size={24} color="#000" />
        <Text style={styles.text}>Application Process</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.item} onPress={() => navigation.navigate('Bookings')}>
        <Ionicons name="book" size={24} color="#000" />
        <Text style={styles.text}>Bookings</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.item} onPress={() => navigation.navigate('Roaster')}>
        <Ionicons name="calendar" size={24} color="#000" />
        <Text style={styles.text}>Roaster</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.item} onPress={() => navigation.navigate('DigitalPersonalFileLite')}>
        <Ionicons name="folder-open" size={24} color="#000" />
        <Text style={styles.text}>Digital Personal File Lite</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.item} onPress={() => navigation.navigate('ELearning')}>
        <Ionicons name="school" size={24} color="#000" />
        <Text style={styles.text}>E-learning</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.item} onPress={() => navigation.navigate('Imprint')}>
        <Ionicons name="information-circle-outline" size={24} color="#000" />
        <Text style={styles.text}>Imprint</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 16,
  },
  item: {
    width: '90%',
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
    marginVertical: 8,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 8,
  },
  text: {
    marginLeft: 16,
    fontSize: 16,
    flex: 1,
  },
});

export default ExploreScreen;

AppNavigator.js #

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import Ionicons from 'react-native-vector-icons/Ionicons';

// Import screens
import DashboardScreen from '../screens/DashboardScreen';
import ExploreScreen from '../screens/ExploreScreen';
import ScreenTimeTrackingScreen from '../screens/ScreenTimeTrackingScreen';
import ApplicationProcessScreen from '../screens/ApplicationProcessScreen';
import BookingsScreen from '../screens/BookingsScreen';
import RoasterScreen from '../screens/RoasterScreen';
import DigitalPersonalFileLiteScreen from '../screens/DigitalPersonalFileLiteScreen';
import ELearningScreen from '../screens/ELearningScreen';
import ImprintScreen from '../screens/ImprintScreen';
import SettingsScreen from '../screens/SettingsScreen';

const Tab = createBottomTabNavigator();
const ExploreStack = createStackNavigator();

const ExploreStackScreen = () => (
  <ExploreStack.Navigator>
    <ExploreStack.Screen name="Explore" component={ExploreScreen} />
    <ExploreStack.Screen name="ScreenTimeTracking" component={ScreenTimeTrackingScreen} />
    <ExploreStack.Screen name="ApplicationProcess" component={ApplicationProcessScreen} />
    <ExploreStack.Screen name="Bookings" component={BookingsScreen} />
    <ExploreStack.Screen name="Roaster" component={RoasterScreen} />
    <ExploreStack.Screen name="DigitalPersonalFileLite" component={DigitalPersonalFileLiteScreen} />
    <ExploreStack.Screen name="ELearning" component={ELearningScreen} />
    <ExploreStack.Screen name="Imprint" component={ImprintScreen} />
  </ExploreStack.Navigator>
);

const AppNavigator = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ color, size }) => {
            let iconName;

            if (route.name === 'Dashboard') {
              iconName = 'ios-home';
            } else if (route.name === 'Explore') {
              iconName = 'ios-search';
            } else if (route.name === 'Settings') {
              iconName = 'ios-settings';
            }

            return <Ionicons name={iconName} size={size} color={color} />;
          },
        })}
      >
        <Tab.Screen name="Dashboard" component={DashboardScreen} />
        <Tab.Screen name="Explore" component={ExploreStackScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

export default AppNavigator;

问题原因 #

报错信息显示代码中尝试跳转到名为ExploreStack的导航器，但底部标签导航中注册的屏幕名称是Explore，而非ExploreStack。另外，若在ExploreStack内部的屏幕（如ExploreScreen）跳转，直接使用目标屏幕名称即可，无需指定外层导航器。

解决方案 #

1. 检查导航调用代码
   确保所有跳转逻辑中，没有使用ExploreStack作为导航目标：

   • 如果是从ExploreStack内部屏幕（如ExploreScreen）跳转，直接调用：

     navigation.navigate('Roaster') // 或其他目标屏幕名称
     

   • 如果是从外部屏幕（如Dashboard）跳转到ExploreStack内的屏幕，需要指定标签页名称Explore，再嵌套目标屏幕：

     navigation.navigate('Explore', { screen: 'Roaster' })
     

2. 清除React Native缓存
   若代码无误仍报错，可能是缓存导致的问题，执行以下命令重置缓存：

   npx react-native start --reset-cache
   

3. 确认导航结构正确性
   检查AppNavigator.js中：

   • Tab.Screen的name属性为Explore，正确关联ExploreStackScreen
   • ExploreStack内已正确注册所有目标跳转屏幕

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