点击 DrawerNavigator 标题按钮时打开抽屉

Question

我正在尝试从 DrawerNavigation 的标头调用 openDrawer 选项，但导航道具不包含 openDrawer 函数。

    import React from 'react';
    import {View, TouchableOpacity} from 'react-native';
    import {createDrawerNavigator} from '@react-navigation/drawer';
    import Icon from 'react-native-vector-icons/Ionicons';
    import {dimensions} from '../../constants/utils';
    
    import CustomDrawerContent from './components/CustomDrawerContent';
    
    const Drawer = createDrawerNavigator();
    
    const DrawerNavigator = () => {
      screenOptionsProps = {
        screenOptions: {
          headerLeft: props => (
            <View>
              <TouchableOpacity onPress={() => navigation.openDrawer()}>
              <Icon
                name="reorder-three-sharp"
                size={dimensions.width * 0.08}
                {...props}
              />
              </TouchableOpacity>
              
            </View>
          ),
        },
      };
      return (
        <Drawer.Navigator
          {...screenOptionsProps}
          drawerContent={props => <CustomDrawerContent {...props} />}>
          <Drawer.Screen name="Dashboard" component={Dashboard} />
        </Drawer.Navigator>
      );
    };
    
    export default DrawerNavigator;

当图标被点击时，抽屉应该被打开，但导航道具没有收到任何东西，并且在安慰导航道具未定义为值时。 DrawerContent 中传入的 props 里面有 openDrawer() 方法，但是如何在 screenOptions 中使用它。

Answer 1

你可以试试“props.navigation.openDrawer()”或者“props.navigation.toggleDrawer()”

headerLeft: props => (
            <View>
              <TouchableOpacity onPress={() => 
                     props.navigation.openDrawer()}>
              <Icon
                name="reorder-three-sharp"
                size={dimensions.width * 0.08}
                {...props}
              />
              </TouchableOpacity>
              
            </View>
          ),

Answer 2

为了打开抽屉导航，最后我在导航道具参考https://reactnavigation.org/docs/navigation-prop/中找到了解决方案。对于遇到类似问题的任何人，这可能会有所帮助。

所以对于上述问题，我使用了来自 @react-navigation/native 的 useNavigation 钩子，它提供了可以进一步用于调用 openDrawer() 方法的导航对象。

import React from 'react';
import {View, TouchableOpacity} from 'react-native';
import {createDrawerNavigator} from '@react-navigation/drawer';
import Icon from 'react-native-vector-icons/Ionicons';
import {dimensions} from '../../constants/utils';
import { DrawerActions, useNavigation } from "@react-navigation/native";
import CustomDrawerContent from './components/CustomDrawerContent';
    
    const Drawer = createDrawerNavigator();
    
    const DrawerNavigator = () => {
      const navigation = useNavigation();
      screenOptionsProps = {
        screenOptions: {
          headerLeft: props => (
            <View>
              <TouchableOpacity onPress={() => navigation.dispatch(DrawerActions.openDrawer())}>
              <Icon
                name="reorder-three-sharp"
                size={dimensions.width * 0.08}
                {...props}
              />
              </TouchableOpacity>
              
            </View>
          ),
        },
      };
      return (
        <Drawer.Navigator
          {...screenOptionsProps}
          drawerContent={props => <CustomDrawerContent {...props} />}>
          <Drawer.Screen name="Dashboard" component={Dashboard} />
        </Drawer.Navigator>
      );
    };
    
    export default DrawerNavigator;