如果你想理解React Navigation 5.x的根本的概念，能够查看我之前的发的一篇文章：React Navigation 5.x详解
如果说形成视图元素的根本单位是组件，那么形成应用程序的根本单位就是页面。在前端利用中，页面又称为路由，是应用程序页面的抽象概念。因为单页面的利用是不存在的，那么对于领有多个页面的应用程序来说，如何从一个页面平滑地过渡到另一个页面，就是路由须要实现的事件。
在0.44版本之前。开发者能够间接应用官网提供的Navigator组件来实现页面的跳转，不过Navigator组件对于稍大的我的项目反对并不是很敌对，且代码的嵌套升高了代码的可读性。所以，官网举荐开发者应用react-navigation库来治理页面及其跳转。
目前，react-navigation反对三种导航性能，别离是Tab导航、Drawer导航和Stack导航，它们的含意如下。
- Tab Navigation：用于实现页面底部的Tab导航成果。
- Drawer Navigation：用于实现侧边栏抽屉导航成果。
- Stack Navigation：蕴含导航栏的页面导航组件，用于实现页面跳转。
其中，开发中应用的最多的还是Stack Navigation。和应用其余的第三方库一样，应用react-navigation库之前须要先装置依赖脚本，如下所示。
npm install @react-navigation/nativenpm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view下面的依赖库是必须装置的，它们是其它导航库的根底库，并且这些根底库装置实现之后，还须要在原生工程中链接原生插件。对于iOS环境来说，关上原生iOS工程目录，而后执行pod install命令来装置原生插件即可。
对于Android环境来说，因为最新的React Native应用到了很多的Androidx属性，所以应用react-navigation之前还须要在原生我的项目中增加Androidx属性的反对。应用Android Studio关上原生Android工程，而后在app/build.gradle文件中增加如下脚本代码。
android {… //省略其余脚本packagingOptions { pickFirst "lib/arm64-v8a/librealm-jni.so" }}configurations.all { resolutionStrategy { force "com.facebook.soloader:soloader:0.8.2" }}def useIntlJsc = falsedependencies { … //省略其余脚本 if (useIntlJsc) { implementation 'org.webkit:android-jsc-intl:+' } else { implementation 'org.webkit:android-jsc:+' }}从新编译我的项目，如果没有任何谬误则阐明胜利集成react-navigation，如果遇到其余问题，大家能够依据提醒进行批改。同时，因为Tab Navigation、Drawer Navigation和Stack Navigation属于不同的库，所以理论应用过程中还须要装置对应的性能库，如下所示。
npm install @react-navigation/stack //Stack导航npm install @react-navigation/bottom-tabs //Tab导航npm install @react-navigation/drawer //Drawer导航须要阐明是，下面的三个库是互相独立的，应用时须要依据需要状况来装置对应的性能库。
react-navigation库一个最根本的性能就是实现路由的治理，路由治理应用的是Stack Navigation。借助Stack Navigation，开发者能够很轻松的治理路由页面。和Android中的Activity栈治理一样，每次关上一个的新页面时，新页面都会被放到路由栈的顶部。
首先，新建HomePage和DetailPage两个页面，代码如下。
const HomePage=(navigation)=> { function jumpDetail() { navigation.navigate('Detail'); } return ( <View style={styles.ct}> <TouchableOpacity style={styles.touchableStyle} onPress={jumpDetail}> <Text style={styles.txtStyle}> 跳转详情页面 </Text> </TouchableOpacity> </View> );}const DetailPage=()=> { return ( <View style={styles.ct}> <Text style={{fontSize: 24}}>Detail Screen</Text> </View> );}接下来，应用createStackNavigator()函数创立一个路由堆栈导航器，记得应用export关键字导出文件，如下所示。
const Stack = createStackNavigator();const RootStack= () => { return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name='Home' component={HomePage}/> <Stack.Screen name='Detail' component={DetailPage}/> </Stack.Navigator> </NavigationContainer>);}export default RootStack;其中，createStackNavigator()函数蕴含两个属性，即导航器和路由，别离对应NavigationContainer和Stack.Navigator两个组件，而后再最外层应用导航状态组件NavigationContainer进行包裹即可。
最初，React Native利用的App.js入口文件中引入堆栈导航器RootStack即可，如下所示。
const App = () => { return ( <RootStack/> );};运行下面的代码，点击HomePage的跳转按钮即可跳转到DetailPage页面，成果下图所示。
如果路由跳转时须要传递参数，能够在页面跳转时应用花括号包裹须要传递的参数，如下所示。
navigation.navigate('Detail',{ itemId: 86, otherParam: 'anything you want here', });而后，在接管参数的页面应用route接管即可，如下所示。
const DetailPage=(router,navigation)=> { const { itemId } = route.params; const { otherParam } = route.params; … //省略其余代码}同时，Stack Navigation还提供了很多其余有用的属性，大家开发的时候依据须要来设置属性的值。能够发现，对于中大型项目来说，应用Stack Navigation进行路由治理时代码档次是十分清晰的，也有助于我的项目的前期扩大。
除了Stack Navigation外，另一个罕用的性能是Tab Navigation。Tab Navigation次要用在底部Tab导航开发中，应用前须要先装置bottom-tabs插件，装置的命令如下。
npm install @react-navigation/bottom-tabs创立Tab Navigation须要用到createBottomTabNavigator()函数，它蕴含两个属性，即导航器和路由，别离对应Tab.Navigator和Tab.Screen两个组件，最初再应用NavigationContainer组件包裹它们，如下所示。
import {NavigationContainer} from '@react-navigation/native';import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';const Tab = createBottomTabNavigator();const MainPage = () => { return (<NavigationContainer> <Tab.Navigator screenOptions={({route}) => ({ tabBarIcon: ({focused,size}) => { let sourceImg; if (route.name === 'Home') { sourceImg = focused ? require('./images/tab_home_p.png') : require('./images/tab_home_n.png'); } else if (route.name === 'Me') { sourceImg = focused ? require('./images/tab_me_p.png') :require('./images/tab_me_n.png'); } return <Image source={sourceImg}/>; }, })} tabBarOptions={{ activeTintColor: 'green', inactiveTintColor: 'gray', }}> <Tab.Screen name="Home" component={HomeScreen}/> <Tab.Screen name="Me" component={MeScreen}/> </Tab.Navigator> </NavigationContainer> );};export default MainPage;function HomeScreen() { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text style={{fontSize:28 }}>Home Page</Text> </View> );}function MeScreen() { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text style={{fontSize:28 }}>Me Page</Text> </View> );}同时，Tab.Navigator和Tab.Screen都提供了很多不错的属性，开发者能够依据开发须要来设置属性值。运行下面的代码，成果如下图所示。