如果你是一名前端开发者，你一定听说过 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 命令行工具：
npm install -g react-native-cli
创建一个新的 React-Native 项目
使用 React-Native 命令行工具创建一个新的项目：
react-native init react-native-redux-tutorial
这个命令将创建一个基础的 React-Native 项目，并安装了一些必要的依赖。
添加 Redux
React-Native 使用 React 作为视图层，并提供了一个名为 Flux 的架构来管理应用程序中的数据流。而 Redux 则是 Flux 架构的一个更加简单和可预测的实现方式。
Redux 的核心概念是存储在一个单一的 JavaScript 对象中的状态树。每当用户执行一个操作并改变了状态树时，Redux 会触发一个 action。然后，Redux 中的 reducer 纯函数会根据这个 action 更新状态树。最后，更新的状态将自动传递给视图层，从而更新界面。
以下是添加 Redux 的详细步骤：
安装 Redux 和 React-Redux
使用 npm 命令安装 Redux 和 React-Redux：
npm install --save redux react-redux
创建 Redux store
在 src 目录下创建一个名为 store.js 的文件，并使用 Redux 创建一个 store：
import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);
export default store;这个 store 将使用 rootReducer 来处理 action，并生成应用程序的状态树。
创建 action
在 src/actions 目录下创建一个名为 index.js 的文件，并定义一个名为 addTransaction 的 action：
export function addTransaction(description, amount) {
return { type: 'ADD_TRANSACTION', description, amount };
}这个 action 有两个参数：描述和金额，并包含了一个 type 属性，它告诉 reducer 该执行哪个操作。
创建 reducer
在 src/reducers 目录下创建一个名为 transactions.js 的文件，并编写一个名为 transactions 的 reducer：
export default function transactions(state = [], action) {
switch (action.type) {
case 'ADD_TRANSACTION':
return [...state, { description: action.description, amount: action.amount }];
default:
return state;
}
}这个 reducer 接受一个名为 state 的当前状态和一个 action，并根据 action 的 type 属性更新状态树。在这个例子中，我们只有一个 ADD_TRANSACTION 类型的 action，它将添加一次新的交易到数组中。
创建 Redux 的根 reducer
在 src/reducers 目录下创建一个名为 index.js 的文件，并使用 Redux 的 combineReducers 函数将所有 reducer 组合在一起：
import { combineReducers } from 'redux';
import transactions from './transactions';
export default combineReducers({
transactions,
});使用 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 的屏幕：
import React from 'react';
import Home from '../containers/Home';
const HomeScreen = () => {
return <Home />;
};
export default HomeScreen;这个屏幕只是一个简单的包装器，用于容纳 Home 组件。
编写样式表
在 src/styles 目录下创建一个名为 global.js 的文件，并编写一个名为 global 的样式表：
export default {
container: {
flex: 1,
backgroundColor: '#fff',
},
};添加一个 AppNavigator
在 src/navigation 目录下创建一个名为 AppNavigator.js 的文件，并编写一个名为 AppNavigator 的导航器：
-- -------------------- ---- -------
------ - -------------------- - ---- --------------------------
------ - -- ----- ---- --------
------ ---------- ---- ------------------------
------ ------ ---- -------------------
----- ----- - -----------------------
-------- -------------- -
------ -
-----------------
-------------
-----------
----------------------
----------
------ ---------------
------------ -
---------------- ----------
--
---------------- -------
----------------- -
----------- -------
--
--
--
------------------
--
-
------ ------- -------------这个导航器将 HomeScreen 组件作为默认的屏幕，并在顶部显示一个标题。
创建根导航器
在 src/navigation 目录下创建一个名为 RootNavigator.js 的文件，其中包含一个名为 RootNavigator 的导航器：
-- -------------------- ---- -------
------ -------------------------------
------ - -- ----- ---- --------
------ - ------------------- - ---- ---------------------------
------ ------------ ---- -----------------
-------- --------------- -
------ -
---------------------
------------- --
----------------------
--
-
------ ------- --------------这个根导航器使用 React-Navigation 的 NavigationContainer 组件包装了 AppNavigator。
创建一个 App.js
在根目录下创建一个名为 App.js 的文件，其中包含一个名为 App 的组件：
-- -------------------- ---- -------
------ - -- ----- ---- --------
------ - --------- - ---- ------------------
------ ------------- ---- ---------------------------------
------ ------- -------- ----- -
------ -
--
---------- ------------ --
-------------- --
---
--
-这个组件只是包装了 RootNavigator，以便在根级别上设置状态栏。
运行应用程序
现在，我们准备好运行记账应用程序了。使用以下命令启动应用程序：
react-native run-ios
或者
react-native run-android
这将会打开一个新的模拟器窗口，并在其中启动应用程序。你应该看到显示所有已添加的交易的交易列表。使用文本框和按钮添加一些交易，然后观察它们的显示方式。
结论
在本文中，我们介绍了如何使用 React-Native 和 Redux 快速构建一款记账应用程序。我们讨论了 Redux 的基本原理和如何将其集成到 React-Native 项目中。我们还演示了如何创建组件、屏幕、样式和导航器，并将它们连接到 Redux store。
这个示例应用程序只是一个简单的例子，但它包含了一些最佳实践，可用于帮助您构建更复杂的应用程序。希望本文能对你有所启发！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671893fead1e889fe22c9164