返回到 React-Navigation 庫中的特定螢幕

1. 如何使用 react-navigation 庫導航 React 應用程式
2. 在 React Native 中使用 goBack() 方法返回一個螢幕
3. 在 React Native 中使用 goBack() 方法返回到導航堆疊中的特定螢幕

React Native 是一個 JavaScript 庫，允許你使用 JavaScript 編寫移動應用程式。它是基於元件的，節省了大量編寫重複程式碼的時間。

它有自己的模板語言 JSX，易於學習，並允許你以宣告方式定義和呼叫元素。

React Native 不包含內建導航功能，因此開發人員必須使用外部庫從一個頁面導航到另一個頁面。react-navigation 是在 React Native 中實現導航功能的最受歡迎的庫之一。

本文探討開發人員如何使用 react-navigation 返回上一頁或導航堆疊中的特定頁面。

如何使用 react-navigation 庫導航 React 應用程式

React Native 應用程式中的導航與典型的網站略有不同。從技術上講，整個應用程式已經載入完畢，因此使用者可以通過更改 URL 一次檢視一個螢幕。

移動應用程式中沒有內建的後退和前進按鈕，就像你在網路瀏覽器中找到的那樣。但是，在 React Native 中，有一種更好的方法可以讓使用者後退（或前進）一屏。

你可以實現按鈕，當單擊該按鈕時，將使用者返回到特定螢幕。在 react-navigation 中，你可以使用 goBack() 方法來做到這一點。

在 React Native 中使用 goBack() 方法返回一個螢幕

goBack() 方法是 react-navigation 庫中最重要的方法之一。它允許你返回導航堆疊中的先前螢幕之一。

如果你不提供任何引數，它將執行預設操作並讓你在導航堆疊中後退一步。讓我們看一個例子。

function DetailsScreen({ navigation: { goBack } }) {
  return (
    <View>
      <Button onPress={() => goBack()} title="Return to the previous screen from the Details component" />
    </View>
  );
}

單擊此按鈕將帶你回到你在 DetailsScreen 元件之前檢視的螢幕。

在 React Native 中使用 goBack() 方法返回到導航堆疊中的特定螢幕

重要的是要了解，要使用 goBack 方法返回導航堆疊中的特定螢幕，你必須從要返回的元件中呼叫它。

如果要返回多個螢幕，則必須為 goBack() 方法提供一個引數：你要返回的螢幕的字串值 key。如果這聽起來令人困惑，請多讀幾遍，但也讓我們看一下實際示例。

假設我們在導航堆疊中有四個螢幕：主頁 > 類別 >​​ 帖子 > 詳細資訊。如果你當前在 Details 螢幕並想返回主頁，你應該在 Homepage 之後傳遞螢幕的 key 值，即 Category。

之後，當你從 Details 呼叫 goBack() 方法時，你必須將 Category 螢幕的 key 值作為引數傳遞，如下所示。

<Button onPress={() => goBack(key)} title="Return to multiple steps to Homepage screen" />

簡而言之，你提供給 goBack() 方法的 key 值用於指定你應該返回的元件。