React Native使用NavigationContainer持续报错求助

我正在学习React Native，从一个小项目开始实践，但在使用NavigationContainer时始终出现报错，错误截图显示相关依赖或渲染异常。我的代码如下：

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import SignUp from './src/SignUp';
import LogIn from './src/LogIn';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  const Stack = createStackNavigator();
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="LogIn" component={LogIn} />
        <Stack.Screen name="SignUp" component={SignUp} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

我已经尝试过Blackbox、ChatGPT、Tabnin等工具，也四处查找相关资料，但都未能解决问题，恳请技术支持。

排查与解决步骤 #

1. 确认依赖完整安装
   React Navigation需要核心包、栈导航包及原生依赖支持，执行对应命令安装：

   • Expo项目：

     expo install @react-navigation/native @react-navigation/stack react-native-screens react-native-safe-area-context
     

   • 裸React Native项目：

     npm install @react-navigation/native @react-navigation/stack react-native-screens react-native-safe-area-context
     # iOS需额外执行
     cd ios && pod install && cd ..
     

2. 校验版本兼容性
   确保@react-navigation/native和@react-navigation/stack版本一致（建议统一使用v6.x系列），执行命令锁定兼容版本：

   npm install @react-navigation/native@^6.1.7 @react-navigation/stack@^6.3.17
   

3. 清除缓存重启项目
   缓存异常可能导致模块解析错误，执行以下命令重置缓存后重启：

   npx react-native start --reset-cache
   # 重新运行项目
   npx react-native run-android # 或 run-ios
   

4. 检查子组件合法性
   确认./src/LogIn和./src/SignUp组件已正确导出（默认导出或命名导出匹配导入方式），且组件内部无语法错误、未引用不存在的依赖。

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