React Native/Expo NavigationContainer嵌套错误问题求助

错误信息 #

Error: Looks like you have nested a 'NavigationContainer' inside another. Normally you need only one container at the root of the app, so this was probably an error. If this was intentional, pass 'independent={true}' explicitly. Note that this will make the child navigators disconnected from the parent and you won't be able to navigate between them.

需求说明 #

点击HomeScreen的“Play Now”按钮跳转到QRCodeScannerScreen并启用相机扫描功能，但无法定位NavigationContainer嵌套位置，涉及文件：navigationTypes.tsx、app/index.tsx、app/_layout.tsx、app/(tabs)/QRCodeScannerScreen.tsx

排查与解决步骤 #

1. 检查根布局文件app/_layout.tsx #

Expo Router项目中，_layout.tsx是路由的根容器，通常这里会配置顶层导航结构：

• 若文件中已存在NavigationContainer（或Expo Router的Stack/Tabs导航器，v2+版本内置容器），其他页面绝对不能再嵌套NavigationContainer。
• 错误示例：手动重复添加容器

  // 错误写法：Expo Router v2+无需手动包裹NavigationContainer
  import { NavigationContainer } from '@react-navigation/native';
  import { Stack } from 'expo-router';
  
  export default function RootLayout() {
    return (
      <NavigationContainer>
        <Stack>
          <Stack.Screen name="index" />
          <Stack.Screen name="(tabs)" />
        </Stack>
      </NavigationContainer>
    );
  }
  

• 修正：移除手动添加的NavigationContainer，仅保留Expo Router导航组件

2. 检查页面文件中的容器嵌套 #

打开app/index.tsx（HomeScreen）和app/(tabs)/QRCodeScannerScreen.tsx，查找是否存在以下错误代码：

// 错误示例：页面中自行嵌套NavigationContainer
import { NavigationContainer } from '@react-navigation/native';
import { Button } from 'react-native';

export default function HomeScreen() {
  return (
    <NavigationContainer>
      <Button title="Play Now" onPress={() => navigation.navigate('QRCodeScannerScreen')} />
    </NavigationContainer>
  );
}

• 修正：直接删除页面中的NavigationContainer包裹，仅保留页面内容

3. 确认导航类型文件navigationTypes.tsx #

该文件仅用于定义导航参数类型，检查是否误导入或渲染NavigationContainer，确保文件仅包含类型声明代码，无组件渲染逻辑。

4. 修复跳转逻辑 #

使用Expo Router或React Navigation提供的官方钩子实现跳转：

• 方式1：使用Expo Router的useRouter

  import { useRouter } from 'expo-router';
  import { Button } from 'react-native';
  
  export default function HomeScreen() {
    const router = useRouter();
    return (
      <Button title="Play Now" onPress={() => router.push('/(tabs)/QRCodeScannerScreen')} />
    );
  }
  

• 方式2：使用React Navigation的useNavigation

  import { useNavigation } from '@react-navigation/native';
  import { Button } from 'react-native';
  import type { RootStackParamList } from '../navigationTypes';
  
  export default function HomeScreen() {
    const navigation = useNavigation<NavigationProp<RootStackParamList>>();
    return (
      <Button title="Play Now" onPress={() => navigation.navigate('QRCodeScannerScreen')} />
    );
  }
  

5. 验证相机权限配置 #

修复嵌套问题后，确保扫码页面的相机功能正常，在app.json中添加权限配置：

{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSCameraUsageDescription": "需要访问相机进行二维码扫描"
      }
    },
    "android": {
      "permissions": ["android.permission.CAMERA"]
    }
  }
}

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