React Native跳转Cardiologist页面报NAVIGATE动作未被导航器处理

点击Doctor页面上的Cardiologist按钮时，出现报错：The action 'NAVIGATE' with payload {"name":"Cardiologist"} was not handled by any navigator，报错截图如下：

Cardiologist页面组件（跳转目标页） #

import * as React from 'react';
import {Text, View} from 'react-native';

export default function Cardiologist ({navigation}){
    return(
        <View>
            <Text>
                Cardiologist Screen
            </Text>
        </View>
      
    )
    
}

Doctor页面（包含跳转按钮） #

页面已在Cardiologist按钮的onPress事件中绑定navigation.navigate('Cardiologist')跳转逻辑，完整代码如下：

import * as React from 'react';
import {View, Text, Image, StyleSheet, ImageBackground, Dimensions, Pressable} from 'react-native';


export default function Doctor ({navigation}){
  return(
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        {/* 页面背景 */}
          <ImageBackground source={require('../assets/Background.png')}  style={styles.image}>

             {/* Logo */}
            <Image source = {require('../assets/Logo.png')} style = {styles.LogoImage}></Image>

             {/* 页面标题 */}
            <Image source={require('../assets/Title.png')} style = {styles.TitleImage}></Image>
             
             {/* 分类面板背景 */}
             <View  style = {styles.CategoriesContainer}>
                <Image source={require('../assets/CategoriesPanel.png')}></Image>
             </View>

             {/* 分类面板内所有功能图标 */}
            <View style = {styles.CateIconContioner}>
                <Pressable style = {styles.CardioIcon} onPress = {()=> navigation.navigate('Cardiologist')}>
                    <Image source={require("../assets/CardioIcon.png")}></Image>
                </Pressable>

                <View style = {styles.DenIcon}>
                    <Image source = {require("../assets/DenIcon.png")}></Image>
                </View>

                <View style = {styles.PediaIcon}>
                  <Image source = {require("../assets/PediaIcon.png")}></Image>
                </View>

                <View style = {styles.DermaIcon}>
                  <Image source={require("../assets/DermaIcon.png")}></Image>
                </View>

                <View style = {styles.GastroIcon}>
                  <Image source={require("../assets/GastroIcon.png")}></Image>
                </View>

</View>
             

          </ImageBackground>
             
        </View>
  );
}

const styles = StyleSheet.create({
  text:{
    fontSize: 26, 
    fontWeight: 'bold',
    justifyContent:'center'
  },
  LogoImage:{
      marginTop:15,
      marginLeft:41
  },
  TitleImage:{
      marginTop:5,
      marginLeft:-29,
      justifyContent:'center',
      alignItems:'center'
      
  },
  image:{
    height:766,
    width:390,
    marginLeft:10,
    marginBottom:50
    
  },
  
  CategoriesContainer:{
    marginLeft:-16,
    marginRight:20
  },
  CateContainer:{
    alignItems:"center",
    justifyContent:"center"
  },
  CardioIcon:{
    marginTop:-250,
    marginLeft:43,
  },
  DenIcon:{
    marginLeft:160,
    marginTop:-80.80
  },
  PediaIcon:{
    marginLeft:260,
    marginTop:-84.80,
  },
  DermaIcon:{
    marginTop:25,
    marginLeft:70
  },
  GastroIcon:{
    marginTop:-3,
    marginLeft:199
  }
})

目前已在项目中引入Cardiologist页面组件，但跳转始终无法正常生效，初步怀疑是Cardiologist页面配置或按钮跳转逻辑存在问题。

该报错与按钮点击逻辑、Cardiologist页面组件本身的代码无关，核心问题是：仅编写了Cardiologist页面的组件代码，但没有将该组件注册到当前使用的导航器（栈/标签/抽屉导航）的路由列表中，导航器匹配不到对应名称的路由，就会抛出上述NAVIGATE动作未被处理的错误。

以最常用的React Navigation栈导航（Stack Navigator）为例，按以下步骤操作即可：

• 第一步：在路由配置文件（通常是App.js，或navigation目录下的路由定义文件）中导入Cardiologist组件，注意替换为你项目内的实际组件路径：

// 示例路径，请替换为你项目里Cardiologist组件的实际存放位置
import Cardiologist from './screens/Cardiologist';
import Doctor from './screens/Doctor';
// 其他已存在的页面导入保持不变

• 第二步：将Cardiologist页面添加到Stack.Navigator的子Screen配置中，name属性值必须和跳转时传入的字符串完全一致（大小写敏感）：

<Stack.Navigator initialRouteName="Doctor">
  {/* 原有已注册的Doctor页面 */}
  <Stack.Screen name="Doctor" component={Doctor} />
  {/* 新增Cardiologist页面注册 */}
  <Stack.Screen name="Cardiologist" component={Cardiologist} />
  {/* 其他已注册的页面保持不变 */}
</Stack.Navigator>

• 第三步：保存代码后重新加载应用，点击按钮即可正常跳转到Cardiologist页面。

补充说明：如果项目使用了嵌套导航结构，需要确保Cardiologist页面注册在Doctor页面所在的同层导航树中，跨嵌套导航跳转需要指定导航层级，否则依然会出现找不到路由的问题。

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