React Native Expo嵌套导航报错：NAVIGATE动作未被处理的解决方法

问题背景 #

使用Expo + React Native + React Navigation开发应用，Bottom Tab标签页加载正常，但页面跳转时触发以下错误：

The action 'NAVIGATE' with payload {"name":"Mostrar"} was not handled by any navigator.

Do you have a screen named 'Mostrar'?

相关核心代码如下：

页面导出文件（screens/index.js） #

export { default as Actividades } from './Activities/index';
export { default as Detalles } from './DetailsActivities/index';
export { default as Inicio } from './Welcome/index';
export { default as Mostrar } from './See/index';
export { default as Agenda} from './Schedule/index';
export { default as DetalleAgenda} from './DetailsSchedule/index';
export { default as APersona} from './AddPersons/index';
export { default as ADireccion} from './AddAdress/index';
export { default as AFoto} from './AddPhoto/index';

StartNavigator代码 #

import  {Inicio, Mostrar} from '../../screens/index';

import React from 'react';
import { createNativeStackNavigator } from "@react-navigation/native-stack";

const Stack = createNativeStackNavigator();

const StartNavigator = () => {
  return(
    <Stack.Navigator initialRouteName = 'Inicio'>
      <Stack.Screen name='Inicio'  component={Inicio} option={{ title:'Bienvenido'}}/>
      <Stack.Screen name ='Mostrar' component={Mostrar} option={{title: 'Actividades'}}/>
    </Stack.Navigator>
  )
}

export default StartNavigator;

Bottom Tab Navigator代码 #

import ActivityNavigator from './stack/activity';
import AddNavigator from './stack/add';
import Color from '../constants/color';
import Ionicons from '@expo/vector-icons/Ionicons';
import React from 'react';
import ScheduleNavigator from './stack/schedule';
import StartNavigation from './stack/start';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const BottomTab = createBottomTabNavigator();

const TabsNavigation = () => {
  return(
    <BottomTab.Navigator
      initialRouteName="StartTab"
      screenOptions={{
        headerShown: false,
        tabBarLabelStyle: {
          fontFamily: 'Montserrat-Regular',
          fontSize: 12,
        },
        tabBarActiveTintColor: Color.primary,
        tabBarInactiveTintColor: Color.gray,
    }}>

      <BottomTab.Screen
        name="StartTab"
        component={StartNavigation}
        options={{
          tabBarIcon: () => (
            <Ionicons name="home-outline" size={22} color={Color.primary} />
          ),
        }}
      />

      <BottomTab.Screen
        name="AddTab"
        component={AddNavigator}
        options={{
          tabBarIcon: () => (
            <Ionicons name="person-add" size={22} color={Color.primary} />
          ),
        }}
      />

      <BottomTab.Screen
        name="ScheduleTab"
        component={ScheduleNavigator}
        options={{
          tabBarIcon: () => (
            <Ionicons name="book-outline" size={22} color={Color.primary} />
          ),
        }}
      />

      <BottomTab.Screen
        name="ActivityTab"
        component={ActivityNavigator}
        options={{
          tabBarIcon: () => (
            <Ionicons name="checkmark-done-outline" size={22} color={Color.primary} />
          ),
        }}
      />

    </BottomTab.Navigator>
  );
};

export default TabsNavigation;

错误原因 #

1. 导航配置拼写错误：StartNavigator中Stack.Screen的属性写成了option（单数），正确应该是options（复数）。这个错误会导致页面的路由配置未被正确识别，导航器无法找到Mostrar页面。
2. 嵌套导航跳转逻辑错误：如果跳转代码直接调用navigation.navigate('Mostrar')，而当前活跃的是外层Bottom Tab导航器，它无法识别内层StartNavigator中的Mostrar页面，必须通过嵌套路径跳转。
3. 导航器导入名称不匹配：Bottom Tab中导入的是StartNavigation，但文件导出的是StartNavigator，可能导致导航器未正确注册。

解决方法 #

1. 修复options拼写错误 #

修改StartNavigator中的代码，将option改为options：

const StartNavigator = () => {
  return(
    <Stack.Navigator initialRouteName = 'Inicio'>
      <Stack.Screen name='Inicio'  component={Inicio} options={{ title:'Bienvenido'}}/>
      <Stack.Screen name ='Mostrar' component={Mostrar} options={{title: 'Actividades'}}/>
    </Stack.Navigator>
  )
}

2. 正确处理嵌套导航跳转 #

• 从StartTab内部跳转：如果在Inicio页面内跳转到Mostrar，直接使用内层导航对象：

  // Inicio组件内
  navigation.navigate('Mostrar');
  

• 从其他Tab页面跳转：需要指定外层Tab名称+内层页面名称：

  navigation.navigate('StartTab', { screen: 'Mostrar' });
  

3. 统一导航器导入名称 #

确保Bottom Tab中导入的导航器名称与文件导出一致，比如将import StartNavigation from './stack/start';改为import StartNavigator from './stack/start';，同时修改对应component={StartNavigator}。

内容的提问来源于stack exchange，提问作者Juan Pablo Grover Pinto