現(xiàn)在，我們已經(jīng)熟悉了如何使用 TypeScript 設(shè)置 React 本機(jī)移動(dòng)應(yīng)用程序?qū)Ш?。讓我們通過(guò)設(shè)置具有完整類(lèi)型檢查的嵌套導(dǎo)航來(lái)進(jìn)一步了解它。

　　讓我們?cè)诓煌膶?dǎo)航器中用另一個(gè)名為“源”的屏幕擴(kuò)展 3 個(gè)屏幕(“主頁(yè)”、“配置文件”、“設(shè)置”)。在我們繼續(xù)之前，我對(duì)上一個(gè)系列的源代碼進(jìn)行了一些更改，我從堆棧導(dǎo)航切換到底部選項(xiàng)卡導(dǎo)航。除了以下幾點(diǎn)之外，沒(méi)有太大的區(qū)別：

　　以下是我們將在本文中實(shí)現(xiàn)的導(dǎo)航結(jié)構(gòu)。我們將了解如何使用以下結(jié)構(gòu)對(duì)嵌套導(dǎo)航進(jìn)行類(lèi)型檢查。底部選項(xiàng)卡導(dǎo)航將嵌套到堆棧導(dǎo)航中。

　　我們的根導(dǎo)航將是一個(gè)堆棧導(dǎo)航，其中一個(gè)堆棧導(dǎo)航屏幕(主導(dǎo)航)將包含一個(gè)底部選項(xiàng)卡導(dǎo)航。讓我們開(kāi)始吧！

　　請(qǐng)記住涉及的兩 (2) 個(gè)步驟：類(lèi)型檢查導(dǎo)航器和類(lèi)型檢查各個(gè)屏幕：

　　1.類(lèi)型檢查導(dǎo)航器

　　鈮： 您可以通過(guò)傳遞嵌套屏幕的 和 屬性來(lái)導(dǎo)航到嵌套導(dǎo)航器中的屏幕，如下所示：screen params

　　現(xiàn)在，讓我們看看如何對(duì)此進(jìn)行類(lèi)型檢查。

　　由于我們的根導(dǎo)航將僅包含2個(gè)屏幕，因此讓我們根據(jù)需要調(diào)整根堆棧參數(shù)列表。

　　我們還將創(chuàng)建另一個(gè)對(duì)象來(lái)定義底部選項(xiàng)卡屏幕的屏幕(我們稱(chēng)之為底部選項(xiàng)卡參數(shù)列表)。

　　我們執(zhí)行以下操作將底部選項(xiàng)卡屏幕聲明為根堆棧中 MainNav 屏幕的子屏幕。

　　以下是正在發(fā)生的事情：我們需要提取底部選項(xiàng)卡屏幕的參數(shù)(主頁(yè)，配置文件和設(shè)置)，并將其指定為MainNav路由的參數(shù)。這可以使用具有底部選項(xiàng)卡參數(shù)列表作為參數(shù)的實(shí)用程序來(lái)完成。NavigatorScreenParams

　　僅通過(guò)執(zhí)行此操作，源屏幕就能夠?qū)Ш降?MainNav 路由內(nèi)的嵌套屏幕。見(jiàn)下圖：

　　當(dāng) MainNav： 未定義時(shí)，源屏幕將無(wú)法訪(fǎng)問(wèn)嵌套的導(dǎo)航屏幕。

現(xiàn)在，當(dāng) MainNav： 導(dǎo)航器屏幕參數(shù)<底部選項(xiàng)卡參數(shù)列表>時(shí)，源屏幕可以訪(fǎng)問(wèn)嵌套的導(dǎo)航屏幕。

　　2. 對(duì)各個(gè)屏幕進(jìn)行類(lèi)型檢查

　　最初，我們了解到 React Navigation 中的導(dǎo)航器包導(dǎo)出一個(gè)泛型類(lèi)型，以定義相應(yīng)導(dǎo)航器中和 props 的類(lèi)型。navigationroute

　　例如，您可以用于本機(jī)堆棧導(dǎo)航器 ()、堆棧導(dǎo)航器 ()、抽屜導(dǎo)航器 ( )、底部選項(xiàng)卡導(dǎo)航器 () 等。NativeStackScreenProps @react-navigation/nativeStackScreenProps@react-navigation/stackDrawerScreenProps@react-navigation/drawerBottomTabScreenProps@react-navigation/bottom-tabs

　　嵌套導(dǎo)航器時(shí)，屏幕的導(dǎo)航 prop 是多個(gè)導(dǎo)航屬性的組合。例如，如果我們?cè)诙褩Ｖ杏幸粋€(gè)選項(xiàng)卡(就像我們的示例一樣)，則 prop 將同時(shí)具有(來(lái)自選項(xiàng)卡導(dǎo)航器)和(來(lái)自堆棧導(dǎo)航器)。若要更輕松地合并來(lái)自多個(gè)導(dǎo)航器的類(lèi)型，可以使用該類(lèi)型。navigationjumpTopushCompositeScreenProps

　　以下是主屏幕的 prop 類(lèi)型應(yīng)如下所示：

　　讓我們了解一下該實(shí)用程序。CompositeScreenProps

　　該類(lèi)型采用 2 個(gè)參數(shù)，第一個(gè)參數(shù)是主導(dǎo)航的 props 類(lèi)型(類(lèi)型為擁有此屏幕的導(dǎo)航器，在我們的例子中為包含屏幕的“底部選項(xiàng)卡”導(dǎo)航器)，第二個(gè)參數(shù)是輔助導(dǎo)航的 props 類(lèi)型(父導(dǎo)航器的類(lèi)型，在本例中為本機(jī)堆棧導(dǎo)航器)。主要類(lèi)型應(yīng)始終將屏幕的路由名稱(chēng)作為其第二個(gè)參數(shù)。CompositeScreenPropsHome

　　構(gòu)圖2個(gè)屏幕道具的主要重要性是什么？

　　通過(guò)上述操作，我們的底部選項(xiàng)卡屏幕中的導(dǎo)航道具可以直接導(dǎo)航到FeedScreen。

　　默認(rèn)情況下，底部選項(xiàng)卡導(dǎo)航器中的導(dǎo)航道具只能在其導(dǎo)航器中導(dǎo)航到屏幕/路由。請(qǐng)參閱下面的示例：

　　源路由不可用于導(dǎo)航功能

　　讓我們看看當(dāng)我們使用實(shí)用程序組成屏幕道具時(shí)它的外觀(guān)。CompositeScreenProps

　　源路由可用于導(dǎo)航功能