React Native 是一个流行的跨平台移动应用开发框架，它允许开发者使用 JavaScript 和 React 语言来开发原生感觉的移动应用程序。在 React Native 中，页面间参数传递是必不可少的组成部分。它可以使不同组件之间实现数据的共享和传递。在这篇文章中，我们将学习如何在 React Native 中实现页面间数据传递。
props
组件之间参数传递的最基本方式是通过 props 属性。在 React 官方文档中，props 被称为“只读组件属性”，因为它们被子组件继承并且只能从父组件传递。在 React Native 中，一个组件从它的父组件接收 props，然后可以使用这些 props 来展示数据或者触发一些事件。
以下是一个简单的父组件和子组件的示例：
------ ------ - --------- - ---- --------
------ - ----- ---- - ---- ---------------
----- --------------- ------- --------- -
-------- -
------ -
------
---------- -- - ------ -----------------
--------------- ---------------- --------- -- ----------- --
-------
--
-
-
----- -------------- ------- --------- -
-------- -
------ -
------
-----------------------------------
-------
--
-
-
------ ------- ----------------在上面的例子中，ParentComponent 将一个 childProp 传递给它的子组件 ChildComponent。这个 childProp 将被子组件渲染。
state
如果您希望在组件内部存储和使用数据，则需要使用另一种属性，即 state。在 React Native 中，state 是可变的，这意味着你可以通过修改数据来重新渲染组件中的任何内容，并且不需要刷新整个页面。
以下是一个使用 state 的简单示例：
------ ------ - --------- - ---- --------
------ - ----- ---- - ---- ---------------
----- -------- ------- --------- -
------------------ -
-------------
---------- - - ---------------- ----- -- ------- ------- --
-
-------- -
------ -
------
-----------------------------------------
-------
----------- --
--------------- ---------------- ----- -- ------- ------- --
-
------------- ------
--
-------
--
-
-
------ ------- ---------在上述示例中，AppState 组件初始化了一个 appStateMessage 的 state。当用户点击 "Update State" 按钮时，该 state 变为 "This is updated state."状态。
路由参数传递
路由参数传递是 React Native 应用中更高级的数据共享方式。它适用于传递较大的数据，例如从一个页面到另一个页面的整个数据集、用户身份信息等。
在实现路由参数传递之前，您需要先安装 react-navigation 库，它是 React Native 中的一个流行的第三方导航库。您可以通过运行以下命令来安装它：
--- ------- ------------------------
下面是一个简单的示例，演示了如何将参数从一个屏幕传递到另一个屏幕。
------ ------ - --------- - ---- --------
------ - ------- ----- ---- - ---- ---------------
------ - -------------------- - ---- --------------------------
------ - ------------------- - ---- ---------------------------
----- ----- - -----------------------
-------- ----------- ---------- -- -
------ -
------
---------- -- ------ ----------
-------
--------- -- ------ ----
----------- --
-------------------------------- - ----------------- -------- --
-
--
-------
--
-
-------- ----------- ------ ---------- -- -
----- - ---------------- - - -------------
------ -
------
------------ -- ------ ---- ------- -------- ----------------------------
------- --------- ----- ----------- -- -------------------- --
-------
--
-
----- --- ------- --------- -
-------- -
------ -
---------------------
-----------------
------------- ---------------- --------------------- --
------------- ---------------- --------------------- --
------------------
----------------------
--
-
-
------ ------- ----在上述示例中，我们创建了两个屏幕组件 ScreenOne 和 ScreenTwo，并且使用 Stack.Navigator 对它们进行了层级导航。在 ScreenOne 组件中，我们通过调用 navigation.navigate('ScreenTwo', { screenTwoMessage: 'Hello!' }) 这个语句传递了参数 { screenTwoMessage: 'Hello!' } 到 ScreenTwo 组件。在 ScreenTwo 组件中，我们通过 const { screenTwoMessage } = route.params; 这个语句接收了从 ScreenOne 传递过来的参数，然后将该参数展示在了组件中。
总结
在 React Native 中，我们可以使用 props、state、和路由参数等方式来实现页面间参数传递。每种方式都有其特定的用途和限制。选择正确的方式来传递和处理数据可以提高应用程序的可维护性和性能。通过本文，我们希望您可以更好地理解这些传递数据的方式，并且能够在您的代码中正确地应用它们。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64c53b41d20074f47a45ebf1