React Native跳转CoursesPlaylistScreen提示NAVIGATE操作无导航器处理怎么解决

你的代码存在3个直接导致导航失效的错误：

• 重复声明NavigationContainer：React Navigation全局仅允许存在一个根级NavigationContainer，你在BootcampWeeksScreen内部额外嵌套了一层，导致内部的Tab导航和外层的Stack导航完全隔离，内部Tab的导航事件无法传递到外层Stack
• 根组件导出错误：你最后导出的是BootcampWeeksScreen，而非包含CoursesPlaylistScreen声明的App组件，你写的Stack导航逻辑完全没有生效
• 跳转写法错误：你没有给Stack导航器命名为BootcampStack，所以navigation.navigate("BootcampStack",...)的写法找不到对应导航器

1. 删除BootcampWeeksScreen内部的NavigationContainer标签，仅保留Tab.Navigator部分
2. 修改根导出为App组件，让包含CoursesPlaylistScreen的Stack导航作为根导航生效
3. 直接使用navigation.navigate("CoursesPlaylistScreen")跳转即可，不需要嵌套路由写法

修正后完整代码 #

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
import Courses from "./BootcampAdditionalScreens/Courses";
import Tests from "./BootcampAdditionalScreens/Test";
import Roadmap from "./BootcampAdditionalScreens/Roadmap";
import CoursesPlaylistScreen from "../screens/BootcampAdditionalScreens/CoursesPlaylistScreen.js";
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();
const Tab = createMaterialTopTabNavigator();

// 移除内部多余的NavigationContainer
const BootcampWeeksScreen=()=>{
  return (
    <Tab.Navigator tabBarOptions={{ scrollEnabled: true }}>
      <Tab.Screen name="Course" component={Courses} />
      <Tab.Screen name="Tests" component={Tests} />
      <Tab.Screen name="Roadmap" component={Roadmap} />
    </Tab.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name="BootcampWeeksScreen" component={BootcampWeeksScreen} />
        <Stack.Screen name="CoursesPlaylistScreen" component={CoursesPlaylistScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

// 导出App作为根组件
export default App;

跳转写法修正 #

在Courses页面的跳转逻辑直接写：

onPress={() => navigation.navigate("CoursesPlaylistScreen")}

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