React Native 是一个流行的跨平台移动应用程序开发框架，它允许开发人员使用 JavaScript 和 React 来构建原生应用程序。Redux 是一个用于管理应用程序状态的 JavaScript 库，它可以与 React Native 集成。React Navigation 是一个用于处理导航的库，它也可以与 Redux 集成。在本文中，我们将探讨如何在 React Native 中使用 Redux 和 React Navigation。
安装 Redux 和 React Navigation
首先，我们需要安装 Redux 和 React Navigation。在终端中使用以下命令安装它们：
--- ------- ----- ----------- ---------------- ------
集成 Redux
Redux 允许我们在应用程序中管理状态。我们可以使用它来存储应用程序数据，例如用户信息、设置和其他重要数据。在 React Native 中使用 Redux，我们需要创建一个 Redux store 并将其与应用程序集成。
创建 Redux Store
我们可以使用 Redux 的 createStore 函数来创建一个 Redux store。在我们的应用程序中，我们需要将 store 存储在一个单独的文件中。在该文件中，我们将定义我们的 store 和 reducer，以及任何中间件。
------ - ------------ --------------- - ---- -------- ------ ----- ---- -------------- ------ ----------- ---- ------------- ----- ---------- - -------- ----- ----- - ------------ ------------ ------------------------------ -- ------ ------- ------
在上面的代码中，我们使用 applyMiddleware 函数将 Redux Thunk 中间件添加到我们的 store 中。Redux Thunk 允许我们在 Redux store 中进行异步操作。我们还使用 rootReducer 来定义我们的 reducer。
创建 Reducer
在 Redux 中，reducer 是一个纯函数，它将当前状态和 action 作为参数，并返回新的状态。我们将在 reducer 中定义我们的应用程序状态。在我们的应用程序中，我们需要将 reducer 存储在一个单独的文件中。
------ - --------------- - ---- -------- ------ - ----------------- - ---- ------------------- ------ - ------------ - ---- ----------------------------- ----- --------------- - -------------------------------------- ------------------------ -- -------- --------- - ---------------- ------- - ----- --------- - --------------------------------------------- ------- ------ --------- -- ------ - ----- ----------- - ----------------- --- --- ------ ------- ------------
在上面的代码中，我们使用 combineReducers 函数将我们的 reducer 组合在一起。我们还定义了一个名为 nav 的 reducer，该 reducer 处理我们的导航状态。
集成 Redux
要在 React Native 中使用 Redux，我们需要将 Redux Provider 包装器添加到我们的根组件中。Provider 组件将 store 传递给我们的应用程序，并使其在整个应用程序中可用。
------ ----- ---- --------
------ - -------- - ---- --------------
------ ----- ---- ----------
------ --- ---- --------
------ ------- ----- ---- ------- --------------- -
-------- -
------ -
--------- --------------
---- --
-----------
--
-
-在上面的代码中，我们将 store 传递给 Provider 组件，并将 App 组件包装在 Provider 中。现在，我们已经成功在我们的应用程序中集成了 Redux。
集成 React Navigation
React Navigation 是一个用于处理导航的库。它允许我们在应用程序中创建堆栈导航、标签导航和抽屉导航。在 React Native 中使用 React Navigation，我们需要创建一个导航器并将其与我们的应用程序集成。
创建导航器
我们可以使用 StackNavigator 函数来创建一个堆栈导航器。在我们的应用程序中，我们需要将导航器存储在一个单独的文件中。
------ - -------------- - ---- ------------------- ------ ---------- ---- ------------------------ ------ ------------- ---- --------------------------- ------ ----- ------------ - ---------------- ----- - ------- ---------- -- -------- - ------- ------------- - ---
在上面的代码中，我们使用 StackNavigator 函数创建了一个名为 AppNavigator 的导航器。我们还定义了两个屏幕：HomeScreen 和 DetailsScreen。
集成导航器
要在 React Native 中使用 React Navigation，我们需要将我们的导航器包装在一个 NavigationContainer 组件中。NavigationContainer 组件将导航器传递给我们的应用程序，并使其在整个应用程序中可用。
------ ----- ---- --------
------ - ------------------- - ---- -------------------
------ - ------------ - ---- ----------------------------
------ ------- ----- --- ------- --------------- -
-------- -
------ -
---------------------
------------- --
----------------------
--
-
-在上面的代码中，我们将 AppNavigator 组件包装在 NavigationContainer 中。现在，我们已经成功在我们的应用程序中集成了 React Navigation。
集成 Redux 和 React Navigation
现在，我们已经成功在我们的应用程序中集成了 Redux 和 React Navigation。要将它们结合起来，我们需要使用 react-navigation-redux-helpers 库。这个库允许我们将 React Navigation 和 Redux 集成在一起。
安装 react-navigation-redux-helpers
在终端中使用以下命令安装 react-navigation-redux-helpers 库：
--- ------- ------------------------------ ------
创建 Middleware
我们需要创建一个名为 navMiddleware 的 Redux 中间件，该中间件将处理我们的导航操作。
------ - ----------------- - ---- -------------------
------ - --------------------------- - ---- ---------------------------------
----- ----------- - ------------------------------------
----- ------------- - -- --------- -------- -- -- ---- -- ------ -- -
-- ------- ------ --- -------- -- ------ ----------- --- --------- -
----- - ----- ---------- - - -------
----- --------- - ---------------
----- --------------- - --------------------------------------- ----- ---------- -- -----------
-- ---------------- -- --------------- --- ---------- -
----------------------------------
------ --
-------- -----------------
----
-
-
------ -------------
--
------ ------- --------------在上面的代码中，我们使用 createReduxBoundAddListener 函数创建一个 addListener 函数。我们还定义了一个名为 navMiddleware 的 Redux 中间件，该中间件将监听导航操作并更新我们的导航状态。
集成 Middleware
我们需要将 navMiddleware 中间件添加到我们的 store 中。
------ - ------------ --------------- - ---- -------- ------ ----- ---- -------------- ------ ----------- ---- ------------- ------ ------------- ---- ------------------------------ ----- ---------- - ------- --------------- ----- ----- - ------------ ------------ ------------------------------ -- ------ ------- ------
在上面的代码中，我们将 navMiddleware 中间件添加到我们的 store 中。现在，我们已经成功将 Redux 和 React Navigation 集成在一起。
示例代码
在下面的代码中，我们将演示如何在 React Native 中使用 Redux 和 React Navigation。
App.js
------ ----- ---- --------
------ - -------- - ---- --------------
------ - ------------------- - ---- -------------------
------ - ------------ - ---- ----------------------------
------ ----- ---- ----------
------ ------- ----- --- ------- --------------- -
-------- -
------ -
--------- --------------
---------------------
------------- --
----------------------
-----------
--
-
-store.js
------ - ------------ --------------- - ---- -------- ------ ----- ---- -------------- ------ ----------- ---- ------------- ------ ------------- ---- ------------------------------ ----- ---------- - ------- --------------- ----- ----- - ------------ ------------ ------------------------------ -- ------ ------- ------
reducers/index.js
------ - --------------- - ---- -------- ------ - ----------------- - ---- ------------------- ------ - ------------ - ---- ----------------------------- ----- --------------- - -------------------------------------- ------------------------ -- -------- --------- - ---------------- ------- - ----- --------- - --------------------------------------------- ------- ------ --------- -- ------ - ----- ----------- - ----------------- --- --- ------ ------- ------------
navigators/AppNavigator.js
------ - -------------- - ---- ------------------- ------ ---------- ---- ------------------------ ------ ------------- ---- --------------------------- ------ ----- ------------ - ---------------- ----- - ------- ---------- -- -------- - ------- ------------- - ---
screens/HomeScreen.js
------ ----- ---- --------
------ - ----- ----- ------ - ---- ---------------
------ - ------- - ---- --------------
----- ---------- ------- --------------- -
------ ----------------- - -
------ ------
--
-------- -
----- - -------- - - ----------------------
------ -
----- -------- ----- -- ----------- --------- --------------- -------- ---
---------- -------------
-------
--------- -- --------
----------- -- --------------------
--
-------
--
-
-
------ ------- ----------------------screens/DetailsScreen.js
------ ----- ---- --------
------ - ----- ----- ------ - ---- ---------------
------ - ------- - ---- --------------
----- ------------- ------- --------------- -
------ ----------------- - -
------ ---------
--
-------- -
----- - -------- - - ----------------------
------ -
----- -------- ----- -- ----------- --------- --------------- -------- ---
------------- -------------
-------
--------- -----
----------- -- -----------------
--
-------
--
-
-
------ ------- -------------------------middlewares/navMiddleware.js
------ - ----------------- - ---- -------------------
------ - --------------------------- - ---- ---------------------------------
----- ----------- - ------------------------------------
----- ------------- - -- --------- -------- -- -- ---- -- ------ -- -
-- ------- ------ --- -------- -- ------ ----------- --- --------- -
----- - ----- ---------- - - -------
----- --------- - ---------------
----- --------------- - --------------------------------------- ----- ---------- -- -----------
-- ---------------- -- --------------- --- ---------- -
----------------------------------
------ --
-------- -----------------
----
-
-
------ -------------
--
------ ------- --------------结论
在本文中，我们探讨了如何在 React Native 中使用 Redux 和 React Navigation。我们介绍了如何创建一个 Redux store 和 reducer，以及如何创建一个 React Navigation 导航器。我们还演示了如何将 Redux 和 React Navigation 集成在一起，并提供了示例代码。希望这篇文章对您有所帮助，让您可以更轻松地在 React Native 中构建应用程序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673d55ebbdc541352e372c50