This is the 21st day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

preface

Today I found that all the code potholes encountered are related to React Navigation. Learning is done.

This article is an introduction to Navigator

React Navigation portal

The React Navigation profile

Analogous to the browser. When the user clicks link, the URL is pushed into the browser’s history stack. When the user presses the back button, the browser pops up the top element of the history stack, so the next page after the back button is the previous visited page.

React Native has nothing like a browser history stack, so it has React Navigation.

React Navigation’s Native Stack Navigator provides a native way for mobile apps to move between screens and manage Navigation history.

If your application uses only one stack, it’s just like the browser’s history stack.

The core feature of Navigation is that native Stack Navigator provides gestures and animations that are required on Android and apple devices

createNativeStackNavigator

the most common navigator

CreateNativeStackNavigator is a function that returns a Screen and the Navigator object attributes. Both of these properties are used by the React component to configure navigation. The Navigator should contain the Screen element to define the routing configuration.

NavigationContainer is a component that manages our navigation tree and contains navigation state. NavigationContainer must contain all navigation structures.

Usually we load NavigationContainer at the root of our app, which is usually exposed in app.js.

The navigation state is similar to this JS object

const state = {
  type: 'stack',
  key: 'stack-1',
  routeNames: ['Home', 'Profile', 'Settings'],
  routes: [
    { key: 'home-1', name: 'Home', params: { sortBy: 'latest' } },
    { key: 'settings-1', name: 'Settings' },
  ],
  index: 1,
  stale: false,
};
Copy the code

Simple createNativeStackNavigator example

// In App.js in a new project

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;
Copy the code

Configure the navigator

function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
Copy the code

The Navigator has two routes, one is Home route and the other is Details Route.

The route initially loaded is Home, as determined by the initialRouteName field

options

<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={{ title: 'Overview' }}
/>
Copy the code

props

<Stack.Screen name="Home"> {props => <HomeScreen {... props} extraData={someData} />} </Stack.Screen>Copy the code

summary

  • React Native has no history stack. React Navigation offers similar functionality, with the addition of gestures for IOS and Android and for animations to switch between Screens

  • Stack.Navigator is a component that has the routing configuration as its child component and has additional props to configure and load in our content

  • Each stack.screen component has a name attribute, which passes the name of the route. The component attribute specifies which component is to render for the route. These are two mandatory attributes

  • InitialRouteName Specifies the initial route

  • The Options object specifies more detailed configuration. We can pass screenOptions to stack. Navigator to specify the same options