最低要求：react-native版本： react-native >= 0.63.0
React Navigation由一些核心工具组成，这些工具会被导航器用来创建你应用中的导航结构。
为了预先加载安装工作，让我们也安装和配置大多数导航器使用的依赖项。
安装
yarn add @react-navigation/native
我们现在要安装的库是react-native-screens和react-native-safe-area-context。
yarn add react-native-screens react-native-safe-area-context
react-native-screens包需要一个额外的配置步骤才能在Android设备上正常工作。编辑MainActivity.java文件，它位于android/app/src/main/java/<你的包名>/MainActivity.java。
// Add the following code to the body of MainActivity class:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(null);
}
// and make sure to add an import statement at the top of this file:
import android.os.Bundle;
使用
现在，我们需要将整个应用程序包装在NavigationContainer中。通常你会在你的入口文件中这样做，比如index.js或App.js。
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
export default function App() {
return (
<NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
);
}
安装栈导航器
到目前为止，我们安装的库是导航器的构建块和共享基础，React Navigation中的每个导航器都有自己的库。要使用本地堆栈导航器，我们需要安装@react-navigation/native-stack:
yarn add @react-navigation/native-stack
createNativeStackNavigator是一个函数，它返回一个包含两个属性的对象:Screen和Navigator。它们都是用于配置导航器的React组件。Navigator应该包含Screen元素作为它的子元素来定义路由的配置。
NavigationContainer是一个组件，它管理我们的导航树并包含导航状态。该组件必须包装所有导航器结构。通常，我们会在应用的根目录下渲染这个组件，它通常是从app .js导出的组
// 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.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
