需要 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);
}
// ...
}
并确保在此文件顶部的包声明下方添加以下导入声明:文章来源:https://www.toymoban.com/news/detail-674394.html
import android.os.Bundle;
NavigationContainer 使用
现在,我们需要将整个应用程序包装在NavigationContainer
。具体实例如下:文章来源地址https://www.toymoban.com/news/detail-674394.html
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;
到了这里,关于React Navigation 开发准备的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!