React Navigation 开发准备

需要 React Native 使用 React Navigation 的话，我们需要首先安装如下几个包：

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

开发之前做一些处理

• 如果您使用的是 Mac 并针对 iOS 进行开发，则需要安装 pod（通过 Cocoapods）来完成链接。

npx pod-install ios

• react-native-screens 软件包需要一个额外的配置步骤才能在 Android 设备上正常工作。编辑 MainActivity.java 位于 android/app/src/main/java/<项目名称>/MainActivity.java。添加如下内容：

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

并确保在此文件顶部的包声明下方添加以下导入声明：

import android.os.Bundle;

NavigationContainer 使用

现在，我们需要将整个应用程序包装在NavigationContainer。具体实例如下：

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;