React Navigation报错：NAVIGATE未被处理，无法跳转NewPost组件

报错信息：

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

我使用Stack Navigation，尝试访问NewPost组件时触发上述报错，相关代码如下：

app.routes.js #

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';

import Feather from 'react-native-vector-icons/Feather';

import Home from '../pages/Home';
import Profile from '../pages/Profile';
import Search from '../pages/Search';
import NewPost from '../pages/NewPost';
import PostUser from '../pages/PostUser';
// import { Keyboard } from 'react-native';

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

//NAVEGAÇÃO EM PILHA
function StackScreen(){
  return(
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} options={{ headerShown: false }} />
      <Stack.Screen name="NewPost" component={NewPost} />
      <Stack.Screen name="PostUser" component={PostUser}/>
    </Stack.Navigator>
  );
}

Home页面 index.js #

import React from 'react';
import { View, Text } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import  Feather  from 'react-native-vector-icons/Feather';

import  { Container, ButtonPost }  from './styles';

export default function Home() {
  const navigation = useNavigation();
 return (
    <Container>

        <ButtonPost onPress={() => navigation.navigate('NewPost') }>
          <Feather
          name="edit-2"
          color="#FFF"
          size={25}
          />
        </ButtonPost>

    </Container>
  );
}

我是编程新手，不清楚问题所在，恳请提供帮助。

问题核心：你只定义了包含NewPost路由的StackScreen组件，但没有将这个栈导航集成到应用的主导航（Tab导航）中。当前Home页面所在的导航上下文无法识别NewPost路由，导致报错。

修正步骤 #

1. 补全Tab导航的定义，将StackScreen作为Tab导航的一个标签页
2. 确保应用使用整合后的导航结构，让Home页面的导航上下文能关联到包含NewPost的栈

修正后的app.routes.js代码 #

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';

import Feather from 'react-native-vector-icons/Feather';

import Home from '../pages/Home';
import Profile from '../pages/Profile';
import Search from '../pages/Search';
import NewPost from '../pages/NewPost';
import PostUser from '../pages/PostUser';

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

// 栈导航：包含Home、NewPost、PostUser路由
function StackScreen(){
  return(
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} options={{ headerShown: false }} />
      <Stack.Screen name="NewPost" component={NewPost} />
      <Stack.Screen name="PostUser" component={PostUser}/>
    </Stack.Navigator>
  );
}

// 主导航：底部Tab导航，集成栈导航
export default function AppRoutes() {
  return (
    <Tab.Navigator>
      <Tab.Screen 
        name="HomeTab" 
        component={StackScreen} 
        options={{
          tabBarIcon: ({ color }) => <Feather name="home" color={color} size={25} />,
          headerShown: false
        }} 
      />
      <Tab.Screen 
        name="Search" 
        component={Search} 
        options={{
          tabBarIcon: ({ color }) => <Feather name="search" color={color} size={25} />
        }} 
      />
      <Tab.Screen 
        name="Profile" 
        component={Profile} 
        options={{
          tabBarIcon: ({ color }) => <Feather name="user" color={color} size={25} />
        }} 
      />
    </Tab.Navigator>
  );
}

说明 #

• 新增AppRoutes作为应用的主导航入口，用Tab导航包裹了包含NewPost的栈导航
• 现在Home页面属于StackScreen栈导航的一部分，调用navigation.navigate('NewPost')时，栈导航能直接识别该路由，不会再出现报错
• 给每个Tab标签配置了图标，符合底部Tab导航的常规使用方式

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