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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　2. 對各個屏幕進(jìn)行類型檢查

　　最初，我們了解到 React Navigation 中的導(dǎo)航器包導(dǎo)出一個泛型類型，以定義相應(yīng)導(dǎo)航器中和 props 的類型。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)航器時，屏幕的導(dǎo)航 prop 是多個導(dǎo)航屬性的組合。例如，如果我們在堆棧中有一個選項(xiàng)卡(就像我們的示例一樣)，則 prop 將同時具有(來自選項(xiàng)卡導(dǎo)航器)和(來自堆棧導(dǎo)航器)。若要更輕松地合并來自多個導(dǎo)航器的類型，可以使用該類型。navigationjumpTopushCompositeScreenProps

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

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

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

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

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

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

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

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

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