React Native导航报错：NAVIGATE至Home未被处理的问题求助

点击SignIn页面的Continue按钮尝试跳转到Home页面时，出现错误提示：

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

问题原因 #

你的App.js中没有在Stack导航器里注册Home页面，React Navigation的导航器只能识别已配置的页面路由名称，当调用navigation.navigate('Home')时，找不到对应的路由配置，因此触发该报错。

解决方案 #

步骤1：创建Home页面组件 #

如果还未创建Home页面，先新建基础的Home组件示例：

// screens/Home.js
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const Home = () => {
  return (
    <View style={styles.container}>
      <Text>Home Page</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default Home;

步骤2：在App.js中注册Home页面 #

在App.js中导入Home组件，并将其添加到Stack导航器的屏幕配置列表中：

// App.js
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Sliders from './screens/Sliders';
import SignUp from './screens/signUp';
import SignIn from './screens/signIn';
import ResetPassword from './screens/resetPassword';
import Home from './screens/Home'; // 新增Home组件导入

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Sliders">
        {/* 原有屏幕配置保持不变 */}
        <Stack.Screen
          name="Sliders"
          component={Sliders}
          options={{ 
            headerShown: false,
          }}
        />
        <Stack.Screen 
          name="SignUp" 
          component={SignUp}
          options={{
            headerBackVisible: false,
            headerTitle: 'Sign Up',
            headerStyle: {
              backgroundColor: '#129990',
            },
            headerTintColor: '#ffffff',
            headerTitleStyle: {
              color: '#ffffff',
            },
          }}
        />
        <Stack.Screen 
          name="SignIn" 
          component={SignIn}
          options={{
            headerBackVisible: true,
            headerTitle: 'Sign In',
            headerStyle: {
              backgroundColor: '#129990',
            },
            headerTintColor: '#ffffff',
            headerTitleStyle: {
              color: '#ffffff',
            },
          }}
        />
        <Stack.Screen 
          name="ResetPassword" 
          component={ResetPassword}
          options={{
            headerBackVisible: false,
            headerTitle: 'Reset Password',
            headerStyle: {
              backgroundColor: '#129990',
            },
            headerTintColor: '#ffffff',
            headerTitleStyle: {
              color: '#ffffff',
            },
          }}
        />
        {/* 新增Home页面的路由配置 */}
        <Stack.Screen 
          name="Home" 
          component={Home}
          options={{
            headerTitle: 'Home',
            headerStyle: {
              backgroundColor: '#129990',
            },
            headerTintColor: '#ffffff',
            headerTitleStyle: {
              color: '#ffffff',
            },
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

步骤3：验证跳转逻辑 #

SignIn页面中handleFormSubmit函数内的navigation.navigate('Home')代码无需修改，现在导航器已能识别Home路由，点击Continue按钮即可正常跳转。

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