React Navigation development preparation

If you need to use React Navigation with React Native, we need to install the following packages first:

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context

Do some processing before development

• If you are using a Mac and developing for iOS, you need to install pods (via Cocoapods) to complete the linking.

npx pod-install ios

• The react-native-screens package requires an additional configuration step to work properly on Android devices. Edit MainActivity.java located at android/app/src/main/java/<project name>/MainActivity.java. Add the following:

public class MainActivity extends ReactActivity {
    
    
  // ...
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    
    
    super.onCreate(null);
  }
  // ...
}

And make sure to add the following import declaration at the top of this file, below the package declaration:

import android.os.Bundle;

NavigationContainer uses

Now, we need to wrap the entire application in NavigationContainer. Specific examples are as follows:

import React from "react";
import Home from "./page/Home";
import {
    
     NavigationContainer } from "@react-navigation/native";

const App: React.FC = () => {
    
    
  return <NavigationContainer>{
    
    /* 程序 */}</NavigationContainer>;
};

export default App;