在前端开发中，导航是一个非常重要的组件。stack-navigator 是一个方便而强大的 npm 包，可以帮助我们轻松地管理页面之间的导航。本文将会介绍如何使用这个包来实现跨页面的导航。
安装
要使用 stack-navigator，我们首先需要在项目中安装它。使用以下命令：
npm install stack-navigator
创建导航器
要使用 stack-navigator，我们需要先创建一个导航器。导航器是一个对象，它包含了我们应用程序的已添加进入堆栈中的屏幕。以下是一个简单的示例：
-- -------------------- ---- -------
------ - --------------- - ---- ------------------
----- --------- - -----------------
-------- -
----- -
---------- -----------
--
-------- -
---------- --------------
--
--------- -
---------- ---------------
--
--
---在上面的代码中，我们使用 createNavigator 函数来创建一个名为 navigator 的导航器。该导航器包含了三个屏幕：Home、Profile 和 Settings。这些屏幕都是 React 组件，分别对应 HomeScreen、ProfileScreen 和 SettingsScreen。
显示屏幕
我们需要在我们的应用程序中显示导航器中的屏幕。为此，我们需要在我们的应用程序代码中创建一个根堆栈，并将导航器添加为其一个屏幕。以下是一个样例代码：
-- -------------------- ---- -------
------ - -------------------- - ---- ------------------
------ - ------------------- - ---- ---------------------------
----- ----- - -----------------------
-------- ----- -
------ -
---------------------
-----------------
------------- ---------------- --------------------- --
------------------
----------------------
--
-在上面的代码中，我们使用 createStackNavigator 函数创建了一个名为 Stack 的根堆栈。然后，我们将根堆栈包装在 NavigationContainer 中，这是必需的一步。最后，我们将我们的导航器 navigator 添加为一个屏幕。
导航到屏幕
要导航到屏幕，我们需要调用 navigate 方法并传递屏幕名称。以下是一个示例：
-- -------------------- ---- -------
-------- ------------ ---------- -- -
------ -
------
-------
--------- -- ------- -------
----------- -- -------------------------------
--
-------
--
-上面的代码显示了一个名为 HomeScreen 的屏幕，它包含一个按钮。当用户点击该按钮时，我们将调用 navigate 方法并告诉它要导航到 Profile 屏幕。
传递参数
我们可以通过第二个参数向屏幕传递参数。以下是一个示例：
-- -------------------- ---- -------
-------- ------------ ---------- -- -
------ -
------
-------
--------- -- ------- -------
----------- -- ------------------------------ - ----- ------ ---
--
-------
--
-
-------- --------------- ----- -- -
------ ----------- ----------------------------
-在上面的代码中，我们向 Profile 屏幕传递了一个名为 name 的参数。在 ProfileScreen 中，我们可以通过 route.params 来访问该参数。
替换屏幕
要替换屏幕，我们可以调用 replace 方法。以下是一个示例：
-- -------------------- ---- -------
-------- ------------ ---------- -- -
------ -
------
-------
--------- -- ------- -------
----------- -- ------------------------------
--
-------
--
-在上面的示例中，我们将会使用 replace 方法导航到 Profile 屏幕，并将其替换为当前屏幕。
返回到前一个屏幕
我们可以使用 goBack 方法返回到前一个屏幕。以下是一个示例：
function ProfileScreen({ navigation }) {
return (
<View>
<Button title="Go back" onPress={() => navigation.goBack()} />
</View>
);
}该示例显示了一个名为 ProfileScreen 的屏幕，它包含一个按钮。当用户点击该按钮时，我们将调用 goBack 方法。
结论
通过使用 stack-navigator，我们可以轻松地实现页面之间的导航。在本文中，我们介绍了 stack-navigator 的基本用法和示例代码。希望这篇文章可以帮助你更好地了解和使用这个 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055f2b81e8991b448dcbf6