安装

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

iOS 还需要运行pod install
Android需要一些额外的配置才能正常使用，在MainActivity类添加代码：

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(null);
}

并且保证导入头文件

import android.os.Bundle;

进行了上述操作后，可以使用NavigationContainer来包裹真个app

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
  );
}

createNativeStackNavigator

最常用的导航控制器，首先要安装stack navigator库

npm install @react-navigation/native-stack

createNativeStackNavigator是一个函数，它返回一个包含了Screen和Navigator这两个属性的一个对象。它们俩是React的组件用来配置导航器.Navigator应该包裹Screen作为其子元素用来定义路由的一些配置。
NavigationContainer是用来管理我们导航树并且包含了导航状态的组件。这个控件必须包括所有的导航控制器构造。通常，在我们app的最顶端去渲染这个组件。

// 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.Navigator>
    </NavigationContainer>
  );
}

export default App;