React-Native+Redux 快速开发教程

如果你是一名前端开发者,你一定听说过 React 和 Redux。它们是目前全球领先的前端框架和状态管理库。随着移动端的兴起,React-Native 提供了一种基于 React 的开发方式,可以快速构建高质量的移动应用程序。

在本文中,我们将介绍如何使用 React-Native 和 Redux 快速开发一款简单的记账应用程序。这个示例应用程序将帮助你理解 React-Native 和 Redux 的基本概念,并给出一些最佳实践。

准备工作

在开始前,我们需要先安装一些工具和依赖。

安装 Node.js 和 npm

在官网上下载并安装最新版本的 Node.js 和 npm。Node.js 包含了一些常用的命令行工具,例如 npm。

安装 React-Native 命令行工具

使用 npm 命令安装 React-Native 命令行工具:

--- ------- -- ----------------

创建一个新的 React-Native 项目

使用 React-Native 命令行工具创建一个新的项目:

------------ ---- ---------------------------

这个命令将创建一个基础的 React-Native 项目,并安装了一些必要的依赖。

添加 Redux

React-Native 使用 React 作为视图层,并提供了一个名为 Flux 的架构来管理应用程序中的数据流。而 Redux 则是 Flux 架构的一个更加简单和可预测的实现方式。

Redux 的核心概念是存储在一个单一的 JavaScript 对象中的状态树。每当用户执行一个操作并改变了状态树时,Redux 会触发一个 action。然后,Redux 中的 reducer 纯函数会根据这个 action 更新状态树。最后,更新的状态将自动传递给视图层,从而更新界面。

以下是添加 Redux 的详细步骤:

安装 Redux 和 React-Redux

使用 npm 命令安装 Redux 和 React-Redux:

--- ------- ------ ----- -----------

创建 Redux store

在 src 目录下创建一个名为 store.js 的文件,并使用 Redux 创建一个 store:

------ - ----------- - ---- --------
------ ----------- ---- -------------

----- ----- - -------------------------

------ ------- ------

这个 store 将使用 rootReducer 来处理 action,并生成应用程序的状态树。

创建 action

在 src/actions 目录下创建一个名为 index.js 的文件,并定义一个名为 addTransaction 的 action:

------ -------- --------------------------- ------- -
  ------ - ----- ------------------ ------------ ------ --
-

这个 action 有两个参数:描述和金额,并包含了一个 type 属性,它告诉 reducer 该执行哪个操作。

创建 reducer

在 src/reducers 目录下创建一个名为 transactions.js 的文件,并编写一个名为 transactions 的 reducer:

------ ------- -------- ------------------ - --- ------- -
  ------ ------------- -
    ---- ------------------
      ------ ---------- - ------------ ------------------- ------- ------------- ---
    --------
      ------ ------
  -
-

这个 reducer 接受一个名为 state 的当前状态和一个 action,并根据 action 的 type 属性更新状态树。在这个例子中,我们只有一个 ADD_TRANSACTION 类型的 action,它将添加一次新的交易到数组中。

创建 Redux 的根 reducer

在 src/reducers 目录下创建一个名为 index.js 的文件,并使用 Redux 的 combineReducers 函数将所有 reducer 组合在一起:

------ - --------------- - ---- --------
------ ------------ ---- -----------------

------ ------- -----------------
  -------------
---

使用 React-Redux 连接视图层

在 App.js 文件中,使用 React-Redux 的 Provider 和 connect 函数将组件与 Redux store 连接:

------ ----- ---- --------
------ - -------- - ---- --------------
------ ----- ---- --------------
------ ---------- ---- ---------------------------

------ ------- -------- ----- -
  ------ -
    --------- --------------
      ----------- --
    -----------
  --
-

在 HomeScreen.js 文件中,使用 connect 函数将组件与 Redux store 中的数据和 action 创建函数进行连接:

------ - ------- - ---- --------------
------ - -------------- - ---- -------------
------ ---- ---- ---------------------

----- --------------- - ------- -- -
  ------ -
    ------------- -------------------
  --
--

----- ------------------ - ---------- -- -
  ------ -
    --------------- ------------- ------- -- ------------------------------------ ---------
  --
--

------ ------- ------------------------ --------------------------

构建记账应用程序

现在,在我们添加 Redux 之后,可以开始编写我们的记账应用程序了。

添加一个 Home 组件

在 src/components 目录下创建一个名为 Home.js 的文件,并编写一个名为 Home 的组件:

------ ------ - -------- - ---- --------
------ - ----- ---------- ------- --------- ---- - ---- ---------------

----- ---- - -- ------------- -------------- -- -- -
  ----- ------------- --------------- - -------------
  ----- -------- ---------- - -------------

  ----- -------------------- - -- -- -
    -- ------------ -- ------- -
      --------------------------- --------
      -------------------
      --------------
    -
  --

  ----- ---------- - -- ---- -- -- -
    ----- -------- -------------- ------ --------------- ---------------- -------- -- ---
      -------------------------------
      --------------------------
    -------
  --

  ------ -
    ----- -------- -------- -- ---
      ----- -------- -------------- ----- ---
        ----------
          -------------------------
          -------------------
          -----------------------------
          -------- ----- -- ------------ -- --
        --
        ----------
          --------------------
          --------------
          ------------------------
          ----------------------
          -------- ----- - --
        --
      -------
      ------- ---------- ------------ ------------------------------ --
      --------- ------------------- ----------------------- --
    -------
  --
--

------ ------- -----

这个组件包含一个文本框和一个按钮,用于添加一次新的交易。它还包含一个 FlatList,用于显示所有的交易记录。

添加一个 HomeScreen 的屏幕

在 src/screens 目录下创建一个名为 HomeScreen.js 的文件,并编写一个名为 HomeScreen 的屏幕:

------ ----- ---- --------
------ ---- ---- ---------------------

----- ---------- - -- -- -
  ------ ----- ---
--

------ ------- -----------

这个屏幕只是一个简单的包装器,用于容纳 Home 组件。

编写样式表

在 src/styles 目录下创建一个名为 global.js 的文件,并编写一个名为 global 的样式表:

------ ------- -
  ---------- -
    ----- --
    ---------------- -------
  --
--

添加一个 AppNavigator

在 src/navigation 目录下创建一个名为 AppNavigator.js 的文件,并编写一个名为 AppNavigator 的导航器:

------ - -------------------- - ---- --------------------------
------ - -- ----- ---- --------
------ ---------- ---- ------------------------
------ ------ ---- -------------------

----- ----- - -----------------------

-------- -------------- -
  ------ -
    -----------------
      -------------
        -----------
        ----------------------
        ----------
          ------ ---------------
          ------------ -
            ---------------- ----------
          --
          ---------------- -------
          ----------------- -
            ----------- -------
          --
        --
      --
    ------------------
  --
-

------ ------- -------------

这个导航器将 HomeScreen 组件作为默认的屏幕,并在顶部显示一个标题。

创建根导航器

在 src/navigation 目录下创建一个名为 RootNavigator.js 的文件,其中包含一个名为 RootNavigator 的导航器:

------ -------------------------------
------ - -- ----- ---- --------
------ - ------------------- - ---- ---------------------------
------ ------------ ---- -----------------

-------- --------------- -
  ------ -
    ---------------------
      ------------- --
    ----------------------
  --
-

------ ------- --------------

这个根导航器使用 React-Navigation 的 NavigationContainer 组件包装了 AppNavigator。

创建一个 App.js

在根目录下创建一个名为 App.js 的文件,其中包含一个名为 App 的组件:

------ - -- ----- ---- --------
------ - --------- - ---- ------------------
------ ------------- ---- ---------------------------------

------ ------- -------- ----- -
  ------ -
    --
      ---------- ------------ --
      -------------- --
    ---
  --
-

这个组件只是包装了 RootNavigator,以便在根级别上设置状态栏。

运行应用程序

现在,我们准备好运行记账应用程序了。使用以下命令启动应用程序:

------------ -------

或者

------------ -----------

这将会打开一个新的模拟器窗口,并在其中启动应用程序。你应该看到显示所有已添加的交易的交易列表。使用文本框和按钮添加一些交易,然后观察它们的显示方式。

结论

在本文中,我们介绍了如何使用 React-Native 和 Redux 快速构建一款记账应用程序。我们讨论了 Redux 的基本原理和如何将其集成到 React-Native 项目中。我们还演示了如何创建组件、屏幕、样式和导航器,并将它们连接到 Redux store。

这个示例应用程序只是一个简单的例子,但它包含了一些最佳实践,可用于帮助您构建更复杂的应用程序。希望本文能对你有所启发!

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/671893fead1e889fe22c9164