導覽狀態參考
導覽狀態是指 React Navigation 儲存應用程式導覽架構與歷程記錄的狀態。如果您需要執行進階操作(如 重設狀態、提供自訂初始狀態 等),了解導覽狀態的架構會很有用。
它是一個類似於以下的 JavaScript 物件
const state = {
type: 'stack',
key: 'stack-1',
routeNames: ['Home', 'Profile', 'Settings'],
routes: [
{ key: 'home-1', name: 'Home', params: { sortBy: 'latest' } },
{ key: 'settings-1', name: 'Settings' },
],
index: 1,
stale: false,
};
每個導覽狀態物件都存在幾個屬性
type
- 狀態所屬導覽器的類型,例如stack
、tab
、drawer
。key
- 識別導覽器的唯一金鑰。routeNames
- 導覽器中定義的畫面名稱。這是一個包含各個畫面字串的唯一陣列。routes
- 導覽器中呈現的路由物件(畫面)清單。它也代表堆疊導覽器中的歷程記錄。此陣列中至少應有一個項目。index
-routes
陣列中目前焦點路由物件的索引。history
- 已瀏覽項目清單。這是個選用屬性,並非出現在所有導覽器中。例如,它只出現在核心中的標籤與抽屜導覽器中。history
陣列中項目的形狀會依導覽器而異。此陣列中至少應有一個項目。stale
- 除非將stale
屬性明確設定為false
,否則導覽狀態會假設為過時。這表示狀態物件需要「重新整理」。
routes
陣列中的每個路徑物件可能包含以下屬性
key
- 螢幕的唯一金鑰。在導覽至該螢幕時自動建立或新增。name
- 螢幕的名稱。在導覽元件階層中定義。params
- 包含參數的選擇性物件,參數在導覽時定義,例如navigate('Home', { sortBy: 'latest' })
。state
- 包含嵌套在此螢幕中的子導覽器的導覽狀態的選擇性物件。
例如,包含嵌套在其首頁螢幕中的標籤導覽器的堆疊導覽器可能具有類似的導覽狀態物件
const state = {
type: 'stack',
key: 'stack-1',
routeNames: ['Home', 'Profile', 'Settings'],
routes: [
{
key: 'home-1',
name: 'Home',
state: {
key: 'tab-1',
routeNames: ['Feed', 'Library', 'Favorites'],
routes: [
{ key: 'feed-1', name: 'Feed', params: { sortBy: 'latest' } },
{ key: 'library-1', name: 'Library' },
{ key: 'favorites-1', name: 'Favorites' },
],
index: 0,
},
},
{ key: 'settings-1', name: 'Settings' },
],
index: 1,
};
要注意的是,即使有嵌套導覽器,state
屬性也不會在導覽發生前加到 route
物件上,因此不保證它的存在。
部分狀態物件
前面有提到導覽狀態中的 stale
屬性。過時的導覽狀態表示狀態物件需要重新整理或修正,例如在使用前加入缺少的金鑰、移除無效螢幕等。身為使用者,你不用擔心這件事,除非 stale
設定為 false
,否則 React 導覽器會自動修正狀態物件中的任何問題。如果你正在撰寫自訂導覽器,getRehydratedState
方法可以讓你撰寫自訂重新整理邏輯來修正狀態物件。
這也適用於 index
屬性:index
應該是堆疊中的最後一個路徑,如果指定了不同的值,React 導覽器會修正它。例如,如果你想要將應用程式的導覽狀態重設為顯示 個人資料
路徑,並在回溯時顯示 首頁
路徑,並執行如下操作:
navigation.reset({
index: 0,
routes: [{ name: 'Home' }, { name: 'Profile' }],
});
React 導覽器會將 index
修正為 1,並按預期顯示路徑和執行導覽。
在執行重設、提供初始狀態等操作時,此功能會派上用場,因為你可以安全地從導覽狀態物件中省略許多屬性,並依賴 React 導覽器為你新增這些屬性,讓你的程式碼更簡潔。例如,你只能提供不含任何金鑰的 routes
陣列,而 React 導覽器會自動新增所有需要讓它運作的項目。例如,它看起來會像這樣
const state = {
routes: [{ name: 'Home' }, { name: 'Profile' }],
};
在重新整理後,它看起來會像這樣
const state = {
type: 'stack',
key: 'stack-1',
routeNames: ['Home', 'Profile', 'Settings'],
routes: [
{ key: 'home-1', name: 'Home' },
{ key: 'settings-1', name: 'Settings' },
],
index: 1,
stale: false,
};
在這裡,React 導覽器填滿了缺少的部分,例如金鑰、路徑名稱、索引等。
也可以提供不存在的螢幕等無效資料,而它將自動修復。雖然建議不要使用無效狀態物件寫入程式碼,但如果你想執行狀態維持等操作,如此時可能在更新後已變更設定的螢幕,如果 React Navigation 未自動修正狀態物件,將可能造成問題。
如果您希望 React Navigation 修復無效狀態,您需要確定狀態物件中沒有stale: false
。有stale: false
的狀態物件會被假定為有效的狀態物件,React Navigation 就不會嘗試修正它們。
當你在initialState
提供狀態物件時,React Navigation 將永遠假設它是一個陳舊的狀態物件,這確保諸如狀態維持之類的事情可以在沒有額外操作狀態物件的情況下順利運作。