返回到 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