Create a React Native project

Create a new React Native project by executing the following commands from a command line terminal:

npx react-native init react_navigation_demo

Install and configure React – Navigation dependencies

1. Install the React – Navigation core package

Install the React -Navigation core package dependencies in your React Native with the following command:

npm install react-navigation --save

2. Install the React – Navigation extension pack

After installing the React-Navigation core package, you also need to install the associated extensions. Install them with the following command:

npm install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view --save

3. Configure react-native-gesture-handler

Once installed, the React-Native Gesture-Handler extension needs to be configured to work properly on the Android device. Open the project in the react_navigation_demo/android/app/SRC/main/Java/com/react_navigation_demo MainActivity. Java file. Add the following code to the header of the file:

import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

Add the following code after the getMainComponentName method of the file:

@Override protected ReactActivityDelegate createReactActivityDelegate() { return new ReactActivityDelegate(this, getMainComponentName()) { @Override protected ReactRootView createRootView() { return new RNGestureHandlerEnabledRootView(MainActivity.this); }}; }

After adding the code, the contents of the file look like this:

4. Introduce react-native-gesture-handler

The header of the current React Native project entry file, such as index.js or app.js, introduces the React Native Gesture-Handler in the following way.

import 'react-native-gesture-handler';

Create React – Navigation profile and page

1. Create the React – Navigation profile

Create a React -Navigation profile in the root directory of your project, named Navigation.js. After the creation, the directory structure is as follows:

2. Create the page

Create a Pages folder in the root directory to save the pages. In the Pages directory, create the Home folder as the save directory for the Home page and the About folder as the save directory for the About pages. After the project is created, the project directory is shown in the figure below:

Add the following code to your pages /home/index.js, which you can copy and paste:

import React, {Component} from 'react'; import {View, Text} from 'react-native'; Export default class Index extends Component {render() {return <View> <Text> Home page </Text> </View>}}

Add the following code to pages/About/index.js, which you can copy and paste directly:

import React, {Component} from 'react'; import {View, Text} from 'react-native'; Export default class Index extends Component {render() {return <View> <Text> About page </Text> </View>}}

Add the following code in your navigation. Js file, which you can copy and paste directly:

import React from 'react'; import HomePage from './pages/Home'; import AboutPage from './pages/About'; import { createStackNavigator } from 'react-navigation-stack'; Const AppNavigator = CreateStackNavigator ({// Home: {screen: HomePage, // NavigationOptions: {title: HomePage, // {screen: aboutPage}}, // NavigationOptions: {screen: aboutPage}, // NavigationOptions: {title: "About ", // Set the page title}}}, {InitialRoutename: 'Home', // Set the default navigation page to go to the Home page when the application is opened}); export default AppNavigator;

Modify the app.js file and introduce the created navigation configuration file. Finally modify the app.js file as follows, which can be copied and pasted directly:

import React, {Component} from 'react'; import {createAppContainer} from 'react-navigation'; import AppNavigator from './navigation'; import 'react-native-gesture-handler'; const AppContainer = createAppContainer(AppNavigator); export default class App extends React.Component { render() { return <AppContainer />; }}

4. Switch pages through navigation

1, page jump logic

Introducing the Button in the page from the react – native components, through onPress () method, when click the Button to use this. Props. Navigation. Navigate () method to realize the page jump to switch. The navigate() method receives the name of the page navigation that was previously configured in Navigation.

After you add the navigation logic to your pages /home/index.js, you can copy and paste it over the original code:

import React, {Component} from 'react'; import {View, Text, Button} from 'react-native'; Export default class Index extends Component {render() {return <View> <Text> Home page </Text> <Button Title = {} "jump to the About page" onPress = {() = > this. Props, navigation, navigate (' About ')} / > < / View >}}

After adding the navigation logic to pages/About/index.js, you can copy and paste it over the original code:

import React, {Component} from 'react'; import {View, Text, Button} from 'react-native'; Export default class Index extends Component {render() {return <View> <Text> About page </Text> <Button Title = {} "jump to the Home page" onPress = {() = > this. Props, navigation, navigate (' Home ')} / > < / View >}}

Enter NPM run at the terminal to start the Android project, and the interface is as shown in the figure:

Click the button to jump to the About page: