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

Question

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

TypeError：navigation.openDrawer 不是函数。（在 'navigation.openDrawer()', 'navigation.openDrawer' 未定义）

这是我的抽屉：

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>
  )
}

Answer 2

在options处构造navigation时，你指的是堆栈的navigation，什么不能执行绘制动作，尝试在header本身上构造它

---

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

---

https://github.com/react-navigation/react-navigation/issues/55