React Native报错：_navigationactions2.default.reset未定义，求全局访问Drawer方法

Hey there! Let's fix that error and get your Drawer navigation working smoothly from any screen in your app. Here's what's going on and how to resolve it:

First, Let's Diagnose the Error #

The undefined is not a function(evaluating '_navigationactions2.default.reset') error usually pops up for two key reasons:

1. You're either importing NavigationActions incorrectly, or using the reset method with invalid syntax.
2. Your navigation structure is backwards — if your StackNavigator is set as the root and DrawerNavigator is nested inside it, screens in the stack won't have access to the Drawer's navigation context.

Step 1: Fix Your Navigation Hierarchy (Critical!) #

The correct approach is to have DrawerNavigator as your root navigator, with your StackNavigator as one of its screens. This way, every screen in the stack inherits the Drawer's navigation context. Here's how to adjust your App.js:

import React, { Component } from 'react';
import { createDrawerNavigator, createStackNavigator } from 'react-navigation';
// Import your actual screens here
import HomeScreen from './screens/HomeScreen';
import SecondStackScreen from './screens/SecondStackScreen';
import CustomDrawerContent from './screens/CustomDrawerContent';

// 1. Create your Stack Navigator first
const AppStack = createStackNavigator({
  Home: { screen: HomeScreen },
  SecondPage: { screen: SecondStackScreen }
});

// 2. Make Drawer the root navigator, nest the Stack inside it
const RootDrawer = createDrawerNavigator({
  MainApp: { screen: AppStack }
}, {
  // Optional: Add custom drawer content if needed
  contentComponent: CustomDrawerContent
});

export default class App extends Component {
  render() {
    return <RootDrawer />;
  }
}

Step 2: Access Drawer Navigation from Any Stack Screen #

Once your hierarchy is fixed, you can easily open/close the Drawer from any screen in the stack — you don't need reset (that's for resetting navigation stacks, not opening drawers):

For Class Components:

// Inside your SecondStackScreen.js
class SecondStackScreen extends Component {
  openDrawer = () => {
    // This works directly now!
    this.props.navigation.openDrawer();
  };

  render() {
    return (
      <Button 
        title="Open Drawer" 
        onPress={this.openDrawer} 
      />
    );
  }
}

If You Do Need to Use NavigationActions.reset (For Stack Resets):

If you were trying to reset the stack and then open the drawer, make sure you import NavigationActions correctly and use proper syntax:

import { NavigationActions } from 'react-navigation';

// Inside your screen component
resetAndOpenDrawer = () => {
  // First reset the stack back to Home
  const resetAction = NavigationActions.reset({
    index: 0,
    actions: [
      NavigationActions.navigate({ routeName: 'Home' })
    ]
  });
  this.props.navigation.dispatch(resetAction);
  
  // Then open the drawer with a small delay to ensure the stack resets first
  setTimeout(() => {
    this.props.navigation.openDrawer();
  }, 100);
};

Step 3: Access Drawer from Non-Screen Components #

If you need to trigger the Drawer from a custom component (like a header button or reusable UI element), use the withNavigation Higher-Order Component to inject the navigation prop:

import { withNavigation } from 'react-navigation';

class CustomButton extends Component {
  render() {
    return (
      <Button
        title="Open Drawer"
        onPress={() => this.props.navigation.openDrawer()}
      />
    );
  }
}

// Wrap the component with withNavigation to get access to navigation
export default withNavigation(CustomButton);

Quick Fix for Your Original Error #

Chances are you were misusing reset to try opening the Drawer, which is unnecessary. Once your navigation hierarchy is set up correctly, using openDrawer()/closeDrawer() directly should eliminate that error entirely.

内容的提问来源于stack exchange，提问作者Kurt Z