React Native报错Can't find Variable: NavigationContainer求助

报错属于运行时作用域异常导致的误导性提示，核心问题出在导航组件写法错误，和依赖安装、import语句无关：

• 核心错误：自定义的StackNavigator函数组件存在无限递归自调用问题。你在该组件的返回JSX中写了<StackNavigator>作为根节点，相当于组件渲染时调用自身，会直接触发调用栈溢出，打乱JS运行时作用域链，最终抛出和实际问题不匹配的Can't find variable: NavigationContainer错误。此处正确的节点应该是createStackNavigator()生成的Stack.Navigator组件。
• 次要检查项：你贴出的package.json依赖片段未闭合，需确认本地实际文件中dependencies块语法完整，避免依赖安装异常。

你的依赖版本本身兼容：@react-navigation/native@5.9.8和@react-navigation/stack@5.3.5、@react-native-community/masked-view@0.1.11是匹配的，不需要重复删除重装node_modules。

将StackNavigator组件中的自调用标签替换为正确的Stack.Navigator，修正后完整代码如下：

import React from 'react';
import { Text, View } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import Screen from './app/components/Screen';
import { NavigationContainer } from '@react-navigation/native';


const Tweets = () => (
  <Screen>
    <Text>Tweets</Text>
  </Screen>
);

const TweetDetails = () => (
  <Screen>
    <Text>Tweet Details</Text>
  </Screen>
);

const Stack = createStackNavigator();

const StackNavigator = () => (
  // 修复点：将<StackNavigator>替换为<Stack.Navigator>，闭合标签同步修改
  <Stack.Navigator>
    <Stack.Screen name="Tweets" component={Tweets} />
    <Stack.Screen name="TweetDetails" component={TweetDetails} />
  </Stack.Navigator>
);

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

• 保存代码后清除打包工具缓存再启动项目：React Native CLI项目执行npx react-native start --reset-cache，Expo项目执行expo start -c。
• 启动后即可正常渲染导航容器，不会再出现变量找不到的报错。

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