React Navigation

安装

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 (
    {/* Rest of your app code */}
  );
}

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 (
    
      Home Screen
    
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    
      
        
      
    
  );
}

export default App;