返回到 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 值用于指定你应该返回的组件。