可以在导航选项中使用navigation.toggleDrawer() [英] Is is possible to use navigation.toggleDrawer() in navigation options

问题描述

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

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()? 是否可以消除此问题?

解决方案

如果您查看React Navigation文档，您需要使抽屉导航器成为任何应在其UI顶部呈现抽屉的导航器的父级."

反应导航文档参考

要回答您的问题:是的，有可能.

在这里，您有一个可行的示例:

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

In my navigation file , when I want to toggle drawer , get the following error :

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

This is my drawer:

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

And this is my container navigation :

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

Why I can not use navigation.toggleDrawer() in navigation options? Is is possible to remove this problem ?

解决方案

If you check the React Navigation docs, "You will need to make the drawer navigator the parent of any navigator where the drawer should be rendered on top of its UI."

React Navigation docs reference

To answer your question : Yes , it is possible.

And here you have a working example:

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

这篇关于可以在导航选项中使用navigation.toggleDrawer()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！