需要 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 {// ...@Overrideprotected 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;