如何从堆栈导航器访问navigation.thoggDrawer()

Question

当我控制台.log(｛navigation｝(时，我的堆栈标头中有一个可触摸的图标

Object {
"navigation": Object {
"accessibilityLabel": undefined,
"allowFontScaling": undefined,
"backImage": undefined,
"canGoBack": false,
"label": undefined,
"labelStyle": Array [
undefined,
undefined,
],
"labelVisible": undefined,
"onLabelLayout": [Function handleLeftLabelLayout],
"onPress": undefined,
"pressColorAndroid": undefined,
"screenLayout": Object {
"height": 667.2941284179688,
"width": 338.8235168457031,
},
"tintColor": "#F5EDED",
"titleLayout": Object {
"height": 29.647058486938477,
"width": 250.8235321044922,
},
"truncatedLabel": undefined,
},
}

我在下面包含了我的导航代码，从抽屉导航开始。

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs";
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
import HomeScreen from "../screens/HomeScreen";
import BodyPartsScreen from "../screens/BodyPartsScreen";
import PreMadeScreen from "../screens/PreMadeScreen";
import WorkoutDiaryScreen from "../screens/WorkoutDiaryScreen";
import StatsScreen from "../screens/StatsScreen";
import HistoryScreen from "../screens/HistoryScreen";
import ChestListScreen from "../screens/ChestListScreen";
import ExerciseSelectedScreen from "../screens/ExerciseSelectedScreen";
import StartWorkoutScreen from "../screens/StartWorkoutScreen";
import ContactSupportScreen from "../screens/ContactSupportScreen";
import FeatureRequestScreen from "../screens/FeatureRequestScreen";
import MeasurementsScreen from "../screens/MeasurementsScreen";
import MembershipScreen from "../screens/MembershipScreen";
import SettingsScreen from "../screens/SettingsScreen";
import DrawerContent from "../screens/DrawerContent";
import ProfileScreen from "../screens/ProfileScreen";

/////////////////////// Drawer //////////////////////////////////////////
const Drawer = createDrawerNavigator();
export const DrawerNavigator = (props, navigation) => {
return (
<Drawer.Navigator
initialRouteName="Home"
drawerContent={(props) => <DrawerContent {...props} />}
>
<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="Profile"
component={ProfileScreen}
options={{
title: "profile",
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>
);
};

选项卡导航。

////////////////// Tabs /////////////////////////////
const Tab = createMaterialBottomTabNavigator();
export function TabNavigator({ navigation }) {
return (
<Tab.Navigator
initialRouteName="Home"
activeColor="#D72323"
barStyle={{ backgroundColor: "#000000" }}
>
<Tab.Screen
name="Home"
component={DrawerNavigator}
options={{
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="home" color={color} size={26} />
),
}}
/>
<Tab.Screen
name="Workout"
component={StartWorkoutScreen}
options={{
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons
name="weight-lifter"
color={color}
size={26}
/>
),
}}
/>
<Tab.Screen
name="Settings"
component={SettingsScreen}
options={{
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons
name="cog-outline"
color={color}
size={26}
/>
),
}}
/>
</Tab.Navigator>
);
}

堆栈导航。

////////////////////////// Stack /////////////////////////////////////
const Stack = createStackNavigator();
export function StackNavigator(props, navigation) {
return (
<Stack.Navigator
initialRouteName="Home"
screenOptions={{
headerStyle: {
backgroundColor: "#000000",
},
headerTintColor: "#F5EDED",
headerTitleStyle: {
fontWeight: "bold",
},
}}
>
<Stack.Screen
name="HomeScreen"
component={TabNavigator}
options={({ navigation }) => ({
headerLeft: () => (
<MaterialCommunityIcons
onPress={() => navigation.toggleDrawer()}
name="forwardburger"
color="#F5EDED"
size={26}
/>
),
})}
/>
<Stack.Screen
name="Drawer"
component={DrawerContent}
options={{
title: "Drawer",
}}
/>
<Stack.Screen
name="Body"
component={BodyPartsScreen}
options={{
title: "Body Parts",
}}
/>
<Stack.Screen
name="Diary"
component={WorkoutDiaryScreen}
options={{
title: "Workout Diary",
}}
/>
<Stack.Screen
name="PreMade"
component={PreMadeScreen}
options={{
title: "Pre Made Workouts",
}}
/>
<Stack.Screen
name="Stats"
component={StatsScreen}
options={{
title: "Your Workout Stats",
}}
/>
<Stack.Screen
name="History"
component={HistoryScreen}
options={{
title: "Your Workout History",
}}
/>
<Stack.Screen
name="Chest"
component={ChestListScreen}
options={{
title: "Champion Chest",
}}
/>
<Stack.Screen
name="ExerciseSelected"
component={ExerciseSelectedScreen}
options={{
title: "Customise Your Exercise",
}}
/>
</Stack.Navigator>
);
}

我需要访问navigation.toggleDrawer((或navigation.openDrawer(，这怎么可能？我在我的stackNavigator中设置了图标，而不是在我想使用的屏幕上，但它显示在那里。

Answer 1

在设置图标的屏幕中执行以下操作：

const StackNav = () => {
return (
<Stack.Navigator>
<Stack.Screen
name="Screen Name"
component={ScreenComponent}
options={({navigation}) => ({
headerLeft: () => (
<TouchableOpacity onPress={() => navigation.toggleDrawer()}>
<Icon name="menu" />
</TouchableOpacity>
),
})}
/>
...
</Stack.Navigator>
);
};

请注意，StackNav组件必须是DrawerNavigator的直接子级。

编辑

在分析了您的代码后，我制作了一个可工作的Snack，演示了如何正确使用DrawerNavigator。

请注意，我对您想要实现的目标做了一些假设，但这是我们设置导航的常见方式。这里有一个演示链接：Snack。