React Native中NAVIGATE动作未被导航器处理的问题求解

问题原因 #

报错Error: The action 'NAVIGATE' with payload {"name":"FeedScreen"} was not handled by any navigator的核心原因是：FeedScreen没有被注册到当前导航层级的任何导航器中。当前你的HomeScreen直接挂载在Tab导航器下，而Tab导航器里没有包含FeedScreen，也没有给HomeScreen嵌套可导航到FeedScreen的Stack导航器，导致导航系统找不到目标页面。

修复步骤 #

1. 给HomeScreen添加嵌套Stack导航器，将HomeScreen和FeedScreen放在同一Stack中，让HomeScreen具备跳转能力
2. 更新Tab导航器的Home页面，替换为新的Stack导航器
3. 清理代码中的冗余导入和未使用组件

修改后的完整代码 #

App.js #

import 'react-native-gesture-handler';
import Animated, {useSharedValue, withTiming, useAnimatedStyle, Easing,} from 'react-native-reanimated';
import * as React from 'react';
import { Button, Text, View, useColorScheme, Image  } from 'react-native';
import { NavigationContainer, DefaultTheme, DarkTheme } from '@react-navigation/native';
import { createDrawerNavigator, DrawerContentScrollView, DrawerItemList, DrawerItem, } from '@react-navigation/drawer';

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './src/screens/HomeScreen';
import FeedScreen from './src/screens/FeedScreen';
import Cards from './src/screens/CardScreen';
import ProfileScreen from './src/screens/ProfileScreen';
import Message from './src/screens/MessagesScreen';

function LogoTitle() {
  return (
    <Image
      style={{ width: 50, height: 50 }}
      source={{
        uri: 'https://awildgeographer.files.wordpress.com/2015/02/john_muir_glacier.jpg',
      }}
    />
  );
}

const Stack   = createNativeStackNavigator();
const Tab     = createBottomTabNavigator();
const Drawer  = createDrawerNavigator();

// 新增：包含HomeScreen和FeedScreen的Stack导航器
function HomeStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="HomeScreen" component={HomeScreen} options={{ headerShown: false }} />
      <Stack.Screen name="FeedScreen" component={FeedScreen} />
    </Stack.Navigator>
  );
}

function Tabs() {
  return (
    <Tab.Navigator>
      {/* 替换原HomeScreen为HomeStack */}
      <Tab.Screen name="Home" component={HomeStack} options={{ headerShown: false }} />
      <Tab.Screen name="Profile" component={ProfileScreen} options={{ headerShown: false }} />
      <Tab.Screen name="Message" component={Message} options={{ headerShown: false }} />
    </Tab.Navigator>
  );
}

export default function App() {
  const scheme = useColorScheme();
  return (
    <NavigationContainer theme={scheme === 'dark' ? DarkTheme : DefaultTheme}>
      <Drawer.Navigator initialRouteName="Home" screenOptions={{
        drawerPosition: 'left',
      }}>
        <Drawer.Screen name="Home" component={Tabs} options={{
          headerTitle: (props) => <LogoTitle {...props} />,
          headerRight: () => (
            <Button
              onPress={() => alert('This is a button!')}
              title="Info"
              color="red"
            />
          ),
        }} /> 
        <Drawer.Screen name="Message" component={Message} />       
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

HomeScreen.js #

import * as React from 'react';
import { View, ScrollView, StyleSheet, Image } from 'react-native';
import { Text, Card, Button, Icon } from '@rneui/themed';

// 移除无用的导航导入
function HomeScreen({ navigation }) {
  return (
    <View >
      <Card>
        <Card.Title>HELLO WORLD</Card.Title>
        <Card.Divider />
        <Card.Image
          style={{ padding: 0 }}
          source={{
            uri: 'https://awildgeographer.files.wordpress.com/2015/02/john_muir_glacier.jpg',
          }}
        />
        <Text style={{ marginBottom: 10 }}>
          The idea with React Native Elements is more about component
          structure than actual design.
        </Text>
        <Button
          title="Go to Feed Screen"
          onPress={() => navigation.navigate('FeedScreen')}
        />
      </Card>
    </View>
  );
}

export default HomeScreen

关键说明 #

React Navigation的核心逻辑是：只有目标页面和当前页面处于同一导航器层级，或当前页面的父/子导航器包含目标页面时，才能成功跳转。这里通过给HomeScreen嵌套Stack导航器，既保留了原有的Tab和Drawer结构，又让HomeScreen获得了导航到FeedScreen的能力。

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