React Native导航报错：NAVIGATE动作未处理，求解决页面跳转问题

问题根源 #

报错提示The action 'NAVIGATE' with payload {"name":"Dict"} was not handled by any navigator，核心原因是你没有在Stack.Navigator中注册名为Dict的屏幕，导航器找不到对应的页面组件，无法完成跳转。另外dict.js中导入的NavigationContainer和createNativeStackNavigator属于冗余代码，子组件不需要重复引入这些导航根容器相关的模块。

修复方案 #

1. 更新App.js，注册Dict页面到导航器 #

在Stack.Navigator中新增Stack.Screen配置，将Dict组件纳入导航体系：

import { StatusBar } from 'expo-status-bar';
import { Button, StyleSheet, Text, View, TextInput, Image } from 'react-native';
import * as React from 'react';
import { NavigationContainer, StackActions } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Dict from './dict';

const Stack = createNativeStackNavigator();

const HomeScreen = ({ navigation }) => {
  return (
    <View style={{ height: '100%' }}>
      <View style={{
        height: '15%', backgroundColor: 'powderblue', flexDirection:'row'
      }} />
      <Text>This is a test</Text>
      <Button title="Go to Dictionary" onPress={() => navigation.navigate('Dict')}/>
    </View>
  );
};

export default function App() {
  
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{ headerShown: false }}
        />
        {/* 新增Dict页面的导航配置 */}
        <Stack.Screen
          name="Dict"
          component={Dict}
          options={{ title: '字典页面' }} // 可选：自定义页面标题
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

2. 简化dict.js，移除冗余导入 #

删除子组件中不需要的导航相关模块：

import React from 'react';
import { Text } from 'react-native';

function Dict () {
  return (
    <Text>Hello, I am your cat!</Text>
  );
}

export default Dict;

验证效果 #

重新运行项目，点击"Go to Dictionary"按钮即可正常跳转到Dict页面。

内容的提问来源于stack exchange，提问作者Kai-Chun Lin