如何在React Navigation 5中调用toggleDrawer

Question

我有一个使用手势工作的React-Navigation 5抽屉菜单，但我也想在标题的右侧添加一个图标以切换抽屉菜单。

我在App.js中具有这样的导航设置：

import {NavigationContainer, DrawerActions} from '@react-navigation/native';
//....... other imports

const HomeStack = createStackNavigator();
const HomeStackScreens = () => (
  <HomeStack.Navigator
    screenOptions={{
      headerStyle: {
        backgroundColor: '#5C6BC0',
      },
      headerTintColor: '#fff',
      headerRight: () => {
        return (
          <TouchableOpacity
            onPress={() => DrawerActions.toggleDrawer()}>
            <Icon name="bars" color="#FFF" size={18} />
          </TouchableOpacity>
        );
      },
    }}>
    <HomeStack.Screen 
      name="Home"
      component={HomeScreen}
      options={{
        header:({scene, previous, navigation}) => {
          return (
            <TouchableOpacity onPress={() => navigation.toggleDrawer()}>
               <Icon name="bars" color="#FFF" size={18} />
            </TouchableOpacity>
          );
        }
      }}
    />
    <HomeStack.Screen name="Login" component={Login} />
    <HomeStack.Screen name="Register" component={Register} />
  </HomeStack.Navigator>
 );

 const ProfileStack = createStackNavigator();
 const ProfileStackScreens = () => (
   <ProfileStack.Navigator>
     <ProfileStack.Screen name="Profile" component={Profile} />
   </ProfileStack.Navigator>
 );

 const SettingStack = createStackNavigator();
 const SettingStackScreens = () => (
   <SettingStack.Navigator>
     <SettingStack.Screen name="Profile" component={Profile} />
   </SettingStack.Navigator>
 );

 const Drawer = createDrawerNavigator();
 const DrawerScreens = () => (
   <Drawer.Navigator>
      <Drawer.Screen name="Home" component={HomeStackScreens} />
      <Drawer.Screen name="Profile" component={ProfileStackScreens} />
      <Drawer.Screen name="Settings" component={SetttingStackScreens} />
   </Drawer.Navigator>
 );

 class MyApp extends React.Component {
   render() {
     return (
       <NavigationContainer>
         <DrawerScreens />
       </NavigationContainer>
     );
   }
 }

 export default MyApp;

我所有其他屏幕均采用“导出默认类ScreenName扩展React.Component”的形式。它们被导入App.js中以设置导航。初始屏幕为主页。图标正确显示在标题的右侧。直接调用“ DrawerActions.toggleDrawer（）”不会执行任何操作。

我尝试了“ this.props.navigation.toggleDrawer（）”，由于未定义“ this.props”，因此会引发错误。

如何使用这样的导航设置调用toggleDrawer（）？非常感谢您的帮助！

Answer 1

这是我想出的最终解决方案，只需对原始代码进行最少的更改。关键是要在screenOptions或options中接收“导航”，然后可以在screenOptions / options的子级中调用导航方法。

<HomeStack.Navigator
  screenOptions={({navigation}) => ({
  headerStyle: {
    backgroundColor: '#5C6BC0',
  },
  headerTintColor: '#fff',
  headerRight: () => {
    return (
      <TouchableOpacity
        style={{paddingRight: 8}}
        onPress={() => navigation.toggleDrawer()}>
        <Icon name="bars" color="#FFF" size={18} />
      </TouchableOpacity>
    );
  },
})}>