From Navigator to React Navigation: A Comprehensive Guide

Web Technologies
1

From Navigator to React Navigation: A Comprehensive Guide

Introduction

React Navigation has become the go-to navigation library for React Native applications. It has replaced the old Navigator and offers a more scalable and user-friendly navigation component. In this article, we will delve into the world of React Navigation and explore its features, including the navigator, screen navigation prop, navigation actions, and more.

What is the Navigator?

A navigator can be seen as an ordinary React component. You can define your navigation structure by using the navigator component, App.Navigator. It can also render common elements, such as the title bar and the tab bar.

Types of Navigation

There are three types of navigation in React Navigation:

  1. StackNavigator: Similar to the old Navigator, it features a navigation bar above the screen.
  2. TabNavigator: Similar to the iOS tab bar inside TabBarController, it features a tab bar at the bottom of the screen.
  3. DrawerNavigator: It features a drawer effect, where you can slide out a side menu.

You can create your navigator app by combining these three types, which can be mixed and matched according to your specific application scenario.

Screen Navigation Prop

Before diving into the navigator, it’s essential to understand two concepts:

  1. Screen Navigation Prop: It allows scheduling operations to be completed between screens, such as opening another screen.
  2. Screen Navigation Options: It allows customizing the navigator display screen, including the title bar and tab labels.

Navigator Supports Props

The navigator supports several props, including:

  • screenProps: Transmits additional data to the sub-screen, which can be acquired through this.props.screenProps.
  • ref: Can be used to acquire the navigation property.
  • onNavigationStateChange: A callback method that is triggered when the navigator state changes.

Screen Navigation Prop

When the navigator screen is opened, it receives a navigation prop, which is a part of the entire navigation key. This prop contains several navigation functions, including:

  • navigate: Jumps to another interface.
  • state: The current state of the screen.
  • setParams: Changes the route params.
  • goBack: Closes the current screen.
  • dispatch: Sends a route to the action.

Using Navigate

To jump between interfaces, you can use the navigate function, which accepts the following parameters:

  • routeName: The name of the route to jump to.
  • params: Parameters to be passed to the screen.
  • action: If the interface is a navigator, it will run the sub-action.

Using Params

You can obtain the params state by using this.props.state.params or navigation.navigate().

Using SetParams

To change the route params, you can use the setParams function, which accepts the following parameters:

  • params: The new params to be set.
  • key: The key of the page to modify.

Using GoBack

To return to the previous page or a specific page, you can use the goBack function, which accepts an optional parameter:

  • key: The key of the page to return to.

Using Dispatch

To send a route to the action, you can use the dispatch function, which accepts an action creator.

Navigation Actions

React Navigation provides several navigation actions, including:

  • navigate: Navigates to another page.
  • reset: Resets the current state to a new state.
  • back: Returns to the previous page.
  • setParams: Sets the params of a specific page.
  • init: Initializes the state if it’s undefined.

Usage Scenarios

There are several scenarios where you can use React Navigation, including:

  • Using NavigationActions.reset to reset the route after entering the home page.
  • Using NavigationActions.back to return to the previous page.
  • Using NavigationActions.setParams to modify the params of a specific page.

Using Ref Navigator

Sometimes, you need to jump between screens that are not defined in the navigator. In this case, you can use the ref property to acquire the navigation property.

Conclusion

React Navigation has become the go-to navigation library for React Native applications. It offers a more scalable and user-friendly navigation component compared to the old Navigator. In this article, we have explored the features of React Navigation, including the navigator, screen navigation prop, navigation actions, and more. We have also discussed several usage scenarios where you can use React Navigation.