react-native - 是否可以在导航选项中使用 navigation.toggleDrawer()

Question

在我的导航文件中，当我想要切换抽屉时，出现以下错误:

TypeError: navigation.openDrawer is not a function.(In 'navigation.openDrawer()', 'navigation.openDrawer' is undefined)

这是我的抽屉:

const DrawerNavigator = () => {
    return (
        <Drawer.Navigator
            initialRouteName="MYSHIFT"
        >
            <Drawer.Screen name="MYSHIFT" component={TopTabNavigator} />
        </Drawer.Navigator>
    )
}

这是我的容器导航:

const CareworkerNavigation = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator>

                <Stack.Screen
                    name="Login"
                    component={LoginScreen}
                    options={{ headerShown: false }} />

                <Stack.Screen
                    name="Main"
                    options={({ navigation }) => {
                        return {
                            headerLeft: () => <Button title="LEFT BUTTON" onPress={() => {
                                navigation.toggleDrawer(); // <--- this line throws an error 
                            }} />
                        }
                    }}
                    component={DrawerNavigator} />

            </Stack.Navigator>
        </NavigationContainer>
    )
}

export default CareworkerNavigation

为什么我不能在导航选项中使用 navigation.toggleDrawer()？有可能消除这个问题吗？

Answer 1

如果您查看 React Navigation 文档，“您需要将抽屉导航器设置为应在其 UI 上呈现抽屉的任何导航器的父级。”

React Navigation docs reference

回答你的问题:是的，有可能。

这里有一个工作示例:

import React from 'react'
import { Button, View } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createDrawerNavigator } from '@react-navigation/drawer'
import { createStackNavigator } from '@react-navigation/stack'

const Feed = () => <View />
const Notifications = () => <View />
const Profile = () => <View />

const FeedStack = createStackNavigator()

const Home = ({ navigation }) => (
    <FeedStack.Navigator>
        <FeedStack.Screen
            name="Feed"
            component={Feed}
            options={props => {
                const { toggleDrawer } = props.navigation // <-- drawer's navigation (not from stack)
                return {
                    headerLeft: () => <Button title="LEFT BUTTON" onPress={toggleDrawer} />
                }
            }}
        />
    </FeedStack.Navigator>
)

const Drawer = createDrawerNavigator()

export default props => {
  return (
    <NavigationContainer>
        <Drawer.Navigator initialRouteName="Feed">
          <Drawer.Screen
            name="Feed"
            component={Home}
            options={{ drawerLabel: 'Home' }}
          />
          <Drawer.Screen
            name="Notifications"
            component={Notifications}
            options={{ drawerLabel: 'Updates' }}
          />
          <Drawer.Screen
            name="Profile"
            component={Profile}
            options={{ drawerLabel: 'Profile' }}
          />
        </Drawer.Navigator>
    </NavigationContainer>
  )
}