React Native升级React Navigation v4到v5，NavigationActions替代方案是什么？

Hey there! Great question—when upgrading from React Navigation v4 to v5, the NavigationActions API was replaced with a more intuitive, hook-friendly system. Most common navigation operations are now directly accessible via the navigation prop (or useNavigation hook for function components), and complex actions are handled via CommonActions. Let’s break down the equivalents for key use cases:

Navigate to a Screen #

v4 (using NavigationActions) #

import { NavigationActions } from 'react-navigation';

const navigateAction = NavigationActions.navigate({
  routeName: 'Profile',
  params: { userId: 123 },
});

this.props.navigation.dispatch(navigateAction);

v5 Equivalent #

You can call navigate directly on the navigation object—no need for dispatch for this basic action:

// Function component (using hook)
import { useNavigation } from '@react-navigation/native';

const navigation = useNavigation();
navigation.navigate('Profile', { userId: 123 });

// Class component
this.props.navigation.navigate('Profile', { userId: 123 });

Reset the Navigation Stack #

v4 (using StackActions.reset + NavigationActions) #

import { NavigationActions, StackActions } from 'react-navigation';

const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: 'Home' })],
});

this.props.navigation.dispatch(resetAction);

v5 Equivalent #

Use CommonActions.reset with dispatch to achieve the same result:

import { CommonActions } from '@react-navigation/native';

// Function component
navigation.dispatch(
  CommonActions.reset({
    index: 0,
    routes: [{ name: 'Home' }],
  })
);

// Class component
this.props.navigation.dispatch(
  CommonActions.reset({
    index: 0,
    routes: [{ name: 'Home' }],
  })
);

Go Back to the Previous Screen #

v4 (using NavigationActions.back) #

const backAction = NavigationActions.back();
this.props.navigation.dispatch(backAction);

v5 Equivalent #

Simply call goBack() directly:

// Function or class component
navigation.goBack();

// Optional: Specify a target screen to go back to
navigation.goBack('PreviousScreenName');

Update Params for the Current Screen #

v4 (using NavigationActions.setParams) #

const setParamsAction = NavigationActions.setParams({
  params: { newParam: 'updatedValue' },
  key: 'current-screen-key',
});

this.props.navigation.dispatch(setParamsAction);

v5 Equivalent #

Use the setParams method directly:

// Function or class component
navigation.setParams({ newParam: 'updatedValue' });

Bonus: Other Common Actions #

v5 also includes direct methods for other frequent operations that previously required NavigationActions or StackActions:

• Push a new screen: navigation.push('ScreenName', { params })
• Replace the current screen: navigation.replace('ScreenName', { params })
• Pop to the first screen in the stack: navigation.popToTop()

The key takeaway is that v5 simplifies most navigation actions by making them direct methods on the navigation object, while CommonActions handles more complex, custom navigation scenarios.

内容的提问来源于stack exchange，提问作者Kamal Hossain