React Native导航至未在导航栏的Chat页面遇报错求解决方案

在Expo中通过FlatList跳转到名为Chat的页面时，使用useNavigation()出现报错：

ERROR: The action 'NAVIGATE' with payload {"name":"Chat","params":{"id":3}} was not handled by any navigator.

尝试用@react-navigation/native-stack的createNativeStackNavigator包裹时，又出现导航项传入两个子元素的问题。

聊天列表页面代码如下：

// Chat list screen

import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { Text, View, Image, SafeAreaView, FlatList, TouchableHighlight } from 'react-native';
import { useNavigation } from '@react-navigation/native';

const ChatListScreen = ({}) => {
    const navigation = useNavigation();
    return (
        <SafeAreaView className="container mx-auto max-w-screen-xl">
            <FlatList className="my-4 px-4"
                data={users}
                renderItem={({ item }) =>   
                    <TouchableHighlight onPress={() => navigation.navigate('Chat', { id: item.id })}>
                        <Item username={item.username} avatar={item.avatar} lastMessage={item.lastMessage} id={item.id}/>
                    </TouchableHighlight>
                }
                keyExtractor={item => item.id}
            />
        </SafeAreaView >
    );
}

export default ChatListScreen;

1. 把Chat页面正确注册到导航栈 #

报错的核心是当前导航器找不到Chat路由，必须确保它被添加到栈配置里：

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import ChatListScreen from './ChatListScreen';
import Chat from './Chat';

const Stack = createNativeStackNavigator();

function AppNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="ChatList" component={ChatListScreen} />
      <Stack.Screen name="Chat" component={Chat} /> {/* 这一行必须存在 */}
    </Stack.Navigator>
  );
}

2. 修复导航项多子元素问题 #

出现这个错误通常是两个原因，对应解决：

• 检查Chat组件的返回值，确保只有一个根容器（比如View或SafeAreaView），不能直接返回多个同级元素；
• 每个Stack.Screen只能绑定一个页面组件，不要在里面嵌套多个组件。

3. 确保导航上下文正常传递 #

ChatListScreen必须被包裹在NavigationContainer内部，否则useNavigation()拿不到导航上下文：

import { NavigationContainer } from '@react-navigation/native';
import AppNavigator from './AppNavigator';

export default function App() {
  return (
    <NavigationContainer>
      <AppNavigator />
    </NavigationContainer>
  );
}

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