在 React Native 中，我们经常需要在页面之间进行跳转，常见的方式是使用导航器（Navigator）。但是在实际开发中，我们可能需要在跳转时传递一些参数，比如一个商品的 ID，或者一个用户的信息等等。本文将介绍如何在 React Native 中使用导航器实现页面跳转时带参数的功能。
导航器
在 React Native 中，我们可以使用多种导航器，比如官方推荐的 react-navigation，或者第三方的 react-native-router-flux 等。本文将以 react-navigation 为例进行讲解。
react-navigation 是一个基于 React Native 的导航库，它可以帮助我们实现多种导航场景，比如 Stack（堆栈）、Tab（标签页）等等。在使用 react-navigation 时，我们需要安装它的依赖：
npm install @react-navigation/native
然后安装 Stack Navigator：
npm install @react-navigation/stack
页面跳转
在 react-navigation 中，我们使用 Stack Navigator 来实现页面跳转。在 Stack Navigator 中，我们可以使用 navigate 方法来进行页面跳转：
navigation.navigate('PageName');其中，'PageName' 是我们要跳转的页面的名称。如果要在跳转时传递参数，我们可以在 navigate 方法中添加一个参数对象：
navigation.navigate('PageName', {param1: value1, param2: value2});其中，param1、param2 是我们要传递的参数名，value1、value2 是对应的参数值。
页面接收参数
在跳转后的页面中，我们可以使用 navigation.getParam 方法来获取传递过来的参数：
const param1 = navigation.getParam('param1', defaultValue);其中，'param1' 是我们要获取的参数名，defaultValue 是一个可选的默认值，如果获取不到参数值，则返回默认值。
示例代码
下面是一个简单的示例代码，演示了如何在页面跳转时传递参数，以及在跳转后的页面中获取参数：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ----- ------- ---- ---------------
------ ---------------------- ---- --------------------------
----- ----- - -----------------------
-------- ------------------------ -
----- ------- - -- -- -
----------------------------- -------- -- --------- --------
--
------ -
----- ------------- -- ----------- --------- --------------- -----------
---------- -------------
------- --------- -- ------- ----------------- --
-------
--
-
-------- -------------------------- -
----- ------ - ----------------------------- ----
----- -------- - ------------------------------- --------
------ -
----- ------------- -- ----------- --------- --------------- -----------
------------ -------------
-------- ------------------
----------------------------
-------
--
-
-------- ----- -
------ -
-----------------
------------- ----------- ---------------------- --
------------- ------------- ------------------------ --
------------------
--
-
------ ------- ----在这个示例中，我们定义了两个页面：HomeScreen 和 DetailScreen。在 HomeScreen 中，我们定义了一个按钮，点击该按钮会跳转到 DetailScreen，并传递了两个参数：itemId 和 itemName。在 DetailScreen 中，我们使用 navigation.getParam 方法获取这两个参数的值，并展示在页面上。
总结
在 React Native 中，我们可以使用导航器（Navigator）实现页面跳转。在跳转时，我们可以通过传递参数的方式将数据传递到下一个页面，并在下一个页面中使用 navigation.getParam 方法获取这些参数的值。本文介绍了如何使用 react-navigation 实现页面跳转时带参数的功能，并提供了一个简单的示例代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657dded7d2f5e1655d8b237b