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

Irakli Tchigladze 2023年1月30日 2022年5月18日
  1. 如何使用 react-navigation 庫導航 React 應用程式
  2. 在 React Native 中使用 goBack() 方法返回一個螢幕
  3. 在 React Native 中使用 goBack() 方法返回到導航堆疊中的特定螢幕
返回到 React-Navigation 庫中的特定螢幕

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 值用於指定你應該返回的元件。

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn

相關文章 - React Native