簡(jiǎn)言

移動(dòng)應(yīng)用基本不會(huì)只由一個(gè)頁(yè)面組成。管理多個(gè)頁(yè)面的呈現(xiàn)、跳轉(zhuǎn)的組件就是我們通常所說(shuō)的導(dǎo)航器（navigator）。
React Navigation 提供了簡(jiǎn)單易用的跨平臺(tái)導(dǎo)航方案，在 iOS 和 Android 上都可以進(jìn)行翻頁(yè)式、tab 選項(xiàng)卡式和抽屜式的導(dǎo)航布局。
React Navigation 中的視圖是原生組件，同時(shí)用到了運(yùn)行在原生線程上的Animated動(dòng)畫(huà)庫(kù)，因而性能表現(xiàn)十分流暢。此外其動(dòng)畫(huà)形式和手勢(shì)都非常便于定制。

要想詳細(xì)了解 React Navigation 的具體用法，請(qǐng)?jiān)L問(wèn)其React Navigation官網(wǎng)。

本篇是在window系統(tǒng)android環(huán)境下使用，mac系統(tǒng)請(qǐng)查看官網(wǎng)。

React Navigation

安裝

官網(wǎng)安裝指南Doc
核心包安裝命令：

yarn add @react-navigation/native

除此之外，還要安裝：

yarn add react-native-screens react-native-safe-area-context

react-native-screens 軟件包需要一個(gè)額外的配置步驟才能在安卓設(shè)備上正常運(yùn)行。編輯位于 android/app/src/main/java// 下的 MainActivity.kt 或 MainActivity.java 文件：
kotlin 類型

class MainActivity: ReactActivity() {// ...override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(null)}// ...
}

或者java類型

public class MainActivity extends ReactActivity {// ...@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(null);}// ...
}

添加好后，在頂部添加新依賴包語(yǔ)句聲明：

import android.os.Bundle;

需要做出這一更改，以避免因視圖狀態(tài)無(wú)法在活動(dòng)重啟時(shí)持續(xù)保持而導(dǎo)致崩潰。

使用

我們需要用 NavigationContainer 封裝整個(gè)應(yīng)用程序。通常，您會(huì)在入口文件（如 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>);
}

現(xiàn)在就可以正常運(yùn)行了。

navigator

導(dǎo)航器 ，上面我們只是安裝了React Navigation基礎(chǔ)，并沒(méi)有真正使用導(dǎo)航功能。
實(shí)現(xiàn)導(dǎo)航功能需要安裝對(duì)應(yīng)的navigator 才可以。
6.x版本的navigator 有以下幾種：

Stack Navigator 堆棧導(dǎo)航器

堆棧導(dǎo)航器為您的應(yīng)用程序提供了一種在屏幕間轉(zhuǎn)換的方法，每個(gè)新屏幕都被放置在堆棧的頂部。
這種導(dǎo)航器和web的history stack比較相像。

雖然 @react-navigation/stack 可定制性極強(qiáng)，但它是用 JavaScript 實(shí)現(xiàn)的。雖然它可以使用本機(jī)運(yùn)行動(dòng)畫(huà)和手勢(shì)，但性能可能不如本機(jī)實(shí)現(xiàn)的快。

安裝：

yarn add @react-navigation/stack

然后，需要安裝和配置堆棧導(dǎo)航器所需的庫(kù)：

yarn add react-native-gesture-handler

要最終完成 react-native-gesture-handler 的安裝，請(qǐng)?jiān)谌肟谖募?#xff08;如 index.js 或 App.js）的頂部添加以下內(nèi)容（確保它位于頂部，且之前沒(méi)有其他內(nèi)容）

import 'react-native-gesture-handler';

例子：

import { createStackNavigator } from '@react-navigation/stack';
import {Text,
} from 'react-native';
function Feed() {return <Text>top內(nèi)容Feed</Text>;
}
function Settings() {return <Text>top內(nèi)容Settings</Text>;
}
function Profile() {return <Text>top內(nèi)容Profile</Text>;
}
const Stack = createStackNavigator();function MyStack() {return (<Stack.NavigatorinitialRouteName="Home"screenOptions={{headerMode: 'screen',headerTintColor: 'white',headerStyle: { backgroundColor: 'tomato' },}}><Stack.Screenname="Home"component={Home}options={{title: 'Awesome app',}}/><Stack.Screenname="Profile"component={Profile}options={{title: 'My profile',}}/><Stack.Screenname="Settings"component={Settings}options={{gestureEnabled: false,}}/></Stack.Navigator>);
}

Native Stack Navigator 原生堆棧導(dǎo)航器

導(dǎo)航器使用 iOS 上的 UINavigationController 和 Android 上的 Fragment 原生 API，因此使用 createNativeStackNavigator 構(gòu)建的導(dǎo)航器將與基于這些 API 構(gòu)建的應(yīng)用程序具有完全相同的行為和性能特征。它還使用 react-native-web 提供基本的 Web 支持。

雖然 @react-navigation/native-stack 提供了原生性能并暴露了原生功能，如 iOS 上的大標(biāo)題等，但它可能不如 @react-navigation/stack 可定制，這取決于您的需求。

安裝：

yarn add @react-navigation/native-stack

例子：

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import {Text,
} from 'react-native';
function Feed() {return <Text>top內(nèi)容Feed</Text>;
}
function Settings() {return <Text>top內(nèi)容Settings</Text>;
}
function Profile() {return <Text>top內(nèi)容Profile</Text>;
}
const Stack = createNativeStackNavigator();function MyStack() {return (<Stack.NavigatorinitialRouteName="Home"screenOptions={{headerTintColor: 'white',headerStyle: { backgroundColor: 'tomato' },}}><Stack.Screenname="Home"component={Home}options={{title: 'Awesome app',}}/><Stack.Screenname="Profile"component={Profile}options={{title: 'My profile',}}/><Stack.Screenname="Settings"component={Settings}options={{gestureEnabled: false,}}/></Stack.Navigator>);
}

Drawer Navigator 抽屜導(dǎo)航器

抽屜導(dǎo)航器在屏幕一側(cè)顯示一個(gè)導(dǎo)航抽屜，可通過(guò)手勢(shì)打開(kāi)或關(guān)閉。

安裝：

yarn add @react-navigation/drawer
yarn add react-native-gesture-handler react-native-reanimated

要最終完成 react-native-gesture-handler 的安裝，請(qǐng)?jiān)谌肟谖募?#xff08;如 index.js 或 App.js）的頂部（確保位于頂部，且之前沒(méi)有其他內(nèi)容）添加以下內(nèi)容

import 'react-native-gesture-handler';

react-native-reanimated安裝后，也要在babel.config.js上加下配置：

module.exports = {plugins: ['react-native-reanimated/plugin'],
};

不加在編譯時(shí)會(huì)報(bào)react-native-reanimated相關(guān)的錯(cuò)誤。

例子：

import { createDrawerNavigator } from '@react-navigation/drawer';
import {Text,
} from 'react-native';
function Feed() {return <Text>top內(nèi)容Feed</Text>;
}
function Notifications() {return <Text>top內(nèi)容Notifications</Text>;
}
function Profile() {return <Text>top內(nèi)容Profile</Text>;
}
const Drawer = createDrawerNavigator();function MyDrawer() {return (<Drawer.Navigator initialRouteName="Feed"><Drawer.Screenname="Feed"component={Feed}options={{ drawerLabel: 'Home' }}/><Drawer.Screenname="Notifications"component={Notifications}options={{ drawerLabel: 'Updates' }}/><Drawer.Screenname="Profile"component={Profile}options={{ drawerLabel: 'Profile' }}/></Drawer.Navigator>);
}

Bottom Tabs Navigator 底部Tab導(dǎo)航器

屏幕底部有一個(gè)簡(jiǎn)單的標(biāo)簽欄，讓你能在不同路線之間切換。路由是懶散初始化的，只有在首次聚焦時(shí)才會(huì)安裝其屏幕組件。
安裝：

yarn add @react-navigation/bottom-tabs

例子：

例子使用了react-native-vector-icons 圖標(biāo)庫(kù)，使用前記得下載安裝安裝參考

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import {Text,
} from 'react-native';
function Feed() {return <Text>top內(nèi)容Feed</Text>;
}
function Notifications() {return <Text>top內(nèi)容Notifications</Text>;
}
function Profile() {return <Text>top內(nèi)容Profile</Text>;
}
const Tab = createBottomTabNavigator();function MyTabs() {return (<Tab.NavigatorinitialRouteName="Feed"screenOptions={{tabBarActiveTintColor: '#e91e63',}}><Tab.Screenname="Feed"component={Feed}options={{tabBarLabel: 'Home',tabBarIcon: ({ color, size }) => (<MaterialCommunityIcons name="home" color={color} size={size} />),}}/><Tab.Screenname="Notifications"component={Notifications}options={{tabBarLabel: 'Updates',tabBarIcon: ({ color, size }) => (<MaterialCommunityIcons name="bell" color={color} size={size} />),tabBarBadge: 3,}}/><Tab.Screenname="Profile"component={Profile}options={{tabBarLabel: 'Profile',tabBarIcon: ({ color, size }) => (<MaterialCommunityIcons name="account" color={color} size={size} />),}}/></Tab.Navigator>);
}

Material Bottom Tabs Navigator

Material風(fēng)格的底部標(biāo)簽導(dǎo)航器。
官網(wǎng)參考指南

Material Top Tabs Navigator

頂部標(biāo)簽導(dǎo)航器
安裝：

yarn add @react-navigation/material-top-tabs react-native-tab-view
yarn add react-native-pager-view

例子：

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import {Text,
} from 'react-native';
function Feed() {return <Text>top內(nèi)容Feed</Text>;
}
function Notifications() {return <Text>top內(nèi)容Notifications</Text>;
}
function Profile() {return <Text>top內(nèi)容Profile</Text>;
}
const Tab = createMaterialTopTabNavigator();function MyTabs() {return (<Tab.NavigatorinitialRouteName="Feed"screenOptions={{tabBarActiveTintColor: '#e91e63',tabBarLabelStyle: { fontSize: 12 },tabBarStyle: { backgroundColor: 'powderblue' },}}><Tab.Screenname="Feed"component={Feed}options={{ tabBarLabel: 'Home' }}/><Tab.Screenname="Notifications"component={Notifications}options={{ tabBarLabel: 'Updates' }}/><Tab.Screenname="Profile"component={Profile}options={{ tabBarLabel: 'Profile' }}/></Tab.Navigator>);
}

效果

結(jié)語(yǔ)

這幾種navigator 可以隨意嵌套使用，具體使用方法請(qǐng)到官方網(wǎng)站閱覽。