Question

我正在主屏幕上渲染堆栈导航器，但我需要抽屉导航器和选项卡导航器。我发现 Doc 根本没有帮助。我知道我可以嵌套它们，但无法使其正常工作。

我之前确实设法在主屏幕上设置了堆栈和抽屉导航器。我试图让堆栈导航器的标题保持不变，同时导航到抽屉中的各个屏幕，但我最终破坏了所有进度。

所以我不得不重新开始，我不知道如何回到那里。有谁知道我如何嵌套它们并使用 onPress 访问抽屉导航器，因为我在控制台中不断收到警告说：未定义不是对象（评估'navigation.openDrawer'）

这是我的代码：


import React from "react";

import { createStackNavigator } from "@react-navigation/stack";
import { createDrawerNavigator } from "@react-navigation/drawer";

import Icon from "react-native-vector-icons/MaterialCommunityIcons";



const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

export const StackNavigator = ({ navigation }) => {
  return (
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          title: "HomeScreen",
          headerStyle: {
            backgroundColor: "#000000",
          },
          headerLeft: () => (
            <Icon.Button
              name="menu"
              size={25}
              backgroundColor="bold"
              onPress={() => navigation.openDrawer()}
            ></Icon.Button>
          ),
          headerTintColor: "#F5EDED",
          headerTitleStyle: {
            fontWeight: "bold",
          },
        }}
      />
      <Stack.Screen
        name="Body"
        component={BodyPartsScreen}
        options={{
          title: "Body Parts",
          headerStyle: {
            backgroundColor: "#000000",
          },
          headerTintColor: "#F5EDED",
          headerTitleStyle: {
            fontWeight: "bold",
          },
        }}
      />
      <Stack.Screen
        name="Diary"
        component={WorkoutDiaryScreen}
        options={{
          title: "Workout Diary",
          headerStyle: {
            backgroundColor: "#000000",
          },
          headerTintColor: "#F5EDED",
          headerTitleStyle: {
            fontWeight: "bold",
          },
        }}
      />
      <Stack.Screen
        name="PreMade"
        component={PreMadeScreen}
        options={{
          title: "Pre Made Beast Workouts",
          headerStyle: {
            backgroundColor: "#000000",
          },
          headerTintColor: "#F5EDED",
          headerTitleStyle: {
            fontWeight: "bold",
          },
        }}
      />
      <Stack.Screen
        name="Stats"
        component={StatsScreen}
        options={{
          title: "Your Workout Stats",
          headerStyle: {
            backgroundColor: "#000000",
          },
          headerTintColor: "#F5EDED",
          headerTitleStyle: {
            fontWeight: "bold",
          },
        }}
      />
      <Stack.Screen
        name="History"
        component={HistoryScreen}
        options={{
          title: "Your Workout History",
          headerStyle: {
            backgroundColor: "#000000",
          },
          headerTintColor: "#F5EDED",
          headerTitleStyle: {
            fontWeight: "bold",
          },
        }}
      />
      <Stack.Screen
        name="Chest"
        component={ChestListScreen}
        options={{
          title: "Champion Chest",
          headerStyle: {
            backgroundColor: "#000000",
          },
          headerTintColor: "#F5EDED",
          headerTitleStyle: {
            fontWeight: "bold",
          },
        }}
      />
      <Stack.Screen
        name="Back"
        component={BackListScreen}
        options={{
          title: "Beastie Back",
          headerStyle: {
            backgroundColor: "#000000",
          },
          headerTintColor: "#F5EDED",
          headerTitleStyle: {
            fontWeight: "bold",
          },
        }}
      />
      <Stack.Screen
        name="Shoulders"
        component={ShoulderListScreen}
        options={{
          title: "Shredded Shoulders",
          headerStyle: {
            backgroundColor: "#000000",
          },
          headerTintColor: "#F5EDED",
          headerTitleStyle: {
            fontWeight: "bold",
          },
        }}
      />
      <Stack.Screen
        name="Biceps"
        component={BicepListScreen}
        options={{
          title: "Ballistic Biceps",
          headerStyle: {
            backgroundColor: "#000000",
          },
          headerTintColor: "#F5EDED",
          headerTitleStyle: {
            fontWeight: "bold",
          },
        }}
      />
      <Stack.Screen
        name="Triceps"
        component={TricepListScreen}
        options={{
          title: "Trojan Triceps",
          headerStyle: {
            backgroundColor: "#000000",
          },
          headerTintColor: "#F5EDED",
          headerTitleStyle: {
            fontWeight: "bold",
          },
        }}
      />
            <Stack.Screen
        name="ExerciseSelected"
        component={ExerciseSelectedScreen}
        options={{
          title: "Customise Your Exercise",
          headerStyle: {
            backgroundColor: "#000000",
          },
          headerTintColor: "#F5EDED",
          headerTitleStyle: {
            fontWeight: "bold",
          },
        }}
      />
    </Stack.Navigator>
  );
};

export const DrawerNavigator = () => {
  return (
    <Drawer.Navigator initialRouteName="Home">
      <Drawer.Screen
        name="Home"
        component={HomeScreen}
        options={{
          title: "Back",
          headerStyle: {
            backgroundColor: "#000000",
          },
        }}
      />
      <Drawer.Screen
        name="Membership"
        component={MembershipScreen}
        options={{
          title: "Membership",
          headerStyle: {
            backgroundColor: "#000000",
          },
        }}
      />
      <Drawer.Screen
        name="Measurements"
        component={MeasurementsScreen}
        options={{
          title: "Measurements",
          headerStyle: {
            backgroundColor: "#000000",
          },
        }}
      />
      <Drawer.Screen
        name="Feature"
        component={FeatureRequestScreen}
        options={{
          title: "Feature Request",
          headerStyle: {
            backgroundColor: "#000000",
          },
        }}
      />
      <Drawer.Screen
        name="Contact"
        component={ContactSupportScreen}
        options={{
          title: "Contact",
          headerStyle: {
            backgroundColor: "#000000",
          },
        }}
      />
    </Drawer.Navigator>
  );
};

Answer 1

我找到了解决方案。我将 DrawerNavigator 嵌套在 TabNavigator 中，然后将 TabNavigator 嵌套在 StackNavigator 中。现在可以从主屏幕访问所有内容。

我在嵌套 3 个导航器时遇到问题

1 个答案: