安装
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;
