react-native - 点击 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;