mobx在react中应用_借助React Native Elements，Jest和MobX MST可以轻松实现现实世界中的ReactNative应用...

mobx在react中应用

by Qaiser Abbas

由Qaiser Abbas

借助React Native Elements，Jest和MobX MST可以轻松实现现实世界中的ReactNative应用 (Real-world ReactNative apps made easy with React Native Elements, Jest, and MobX MST)

In this post, we’ll build a real-world mobile application in ReactNative. We’ll also explore some of the development practices and libraries, including the following:

在本文中，我们将在ReactNative中构建一个现实世界的移动应用程序。 我们还将探索一些开发实践和库，包括以下内容：

• directory structure
  目录结构
• state management (in Mobx)
  状态管理(在Mobx中)

• code styling and linting tools (Prettier, ESLint, and Arirbnb style guide)

  代码的造型和掉毛工具( 更漂亮 ， ESLint和Arirbnb风格指南 )

• screen navigation using react-navigation

  使用React导航进行屏幕导航

• user interface using React Native Elements

  使用React Native Elements的用户界面

• and an important, but often ignored part: unit-testing your application (via Jest and Enzyme).

  还有一个重要但经常被忽略的部分：对应用程序进行单元测试(通过Jest和Enzyme )。

So let’s get started!

因此，让我们开始吧！

React中的状态管理 (State management in React)

React and ReactNative have made building Single Page Applications and Mobile Applications fun and easy, but they only cover the view of the applications. State Management and UI design can still be a painful part of building the app.

React和ReactNative使构建单页应用程序和移动应用程序变得轻松有趣，但是它们仅涵盖了应用程序的视图。 状态管理和UI设计仍然可能是构建应用程序的痛苦部分。

There are several popular State Management libraries available for React. I’ve used Redux, Mobx, and RxJS. While all three of them are good in their own ways, I’ve enjoyed MobX the most because of its simplicity, elegance, and powerful state management.

有几种流行的状态管理库可用于React。 我用过Redux，Mobx和RxJS。 他们三个人各有千秋，但MobX的简单性，优雅性和强大的状态管理使其成为我最喜欢的。

Redux, based primarily on the concepts of functional programming and pure functions, tries to solve the complexity of state management by imposing some restrictions on when updates are possible. These restrictions are reflected in three basic principles: a single source of truth, read-only state, and pure functions. You can read more about these principles in the Redux documentation.

Redux主要基于函数式编程和纯函数的概念，试图通过对何时可以更新施加一些限制来解决状态管理的复杂性。 这些限制反映在三个基本原则中：真相的单一来源，只读状态和纯函数。 您可以在Redux文档中阅读有关这些原则的更多信息。

While I’m a fan of functional programming, I’ve experienced that you have to deal with a lot of unnecessary boilerplate code when working with Redux. You also have to write code for dispatching actions and transforming state yourself.

虽然我是函数式编程的爱好者，但我已经体验到在使用Redux时必须处理很多不必要的样板代码。 您还必须编写代码来自己调度动作和转换状态。

Mobx, on the other hand, does this job for you, making it easier to maintain and more fun to work with. You need the right amount of code and restrictions in MobX to achieve superior state management and a good developer experience.

另一方面，Mobx会为您完成这项工作，从而使维护更轻松，并且使用起来更有趣。 您需要在MobX中使用适当数量的代码和限制，才能实现出色的状态管理和良好的开发人员体验。

In Redux, you also have to spend a substantial amount of time normalizing and de-normalizing your data. In MobX, you don’t need to normalize the data, and MobX automatically tracks the relations between state and derivations. We’ll go into this later.

在Redux中，您还必须花费大量时间对数据进行规范化和反规范化。 在MobX中，您无需对数据进行规范化，MobX会自动跟踪状态与派生之间的关系。 我们稍后再讨论。

RxJS is a reactive programming library for JavaScript. It is different from MobX in that RxJS allows you to react to events while in MobX. You observe the values (or state) and it helps you react to changes in state.

RxJS是JavaScript的React式编程库。 它与MobX的不同之处在于RxJS允许您在MobX中对事件做出React。 您观察值(或状态)，并有助于您对状态变化做出React。

Although both RxJS and MobX provide the ability to perform reactive programming, they are quite different in their approaches.

尽管RxJS和MobX都提供执行React式编程的能力，但是它们的方法却大不相同。

关于我们的应用 (About our app)

The application we’ll be building is for a Book Store. It will mainly consist of two simple views: the Books View and the Authors View.

我们将构建的应用程序用于书店。 它主要包含两个简单的视图：“书籍”视图和“作者”视图。

The app will contain a navigation drawer with two menu options, allowing the user to switch between the two views. The first option will be for navigating to the Books View, and the other option will navigate to the Authors View.

该应用程序将包含一个带有两个菜单选项的导航抽屉，允许用户在两​​个视图之间切换。 第一个选项将导航到“书籍”视图，另一个选项将导航到“作者”视图。

The Books View will contain the list of books, as well as a tab allowing the user to switch between Fiction and Non-Fiction books. The Authors View will containing the list of authors.

图书视图将包含图书列表，以及允许用户在小说和非小说书籍之间切换的选项卡。 作者视图将包含作者列表。

We’ll be installing everything on a Mac OS. Most of the commands will be the same when you have Node installed, but if you face any issues, let me know, (or just google it).

我们将在Mac OS上安装所有内容。 当您安装Node时，大多数命令将是相同的，但是如果遇到任何问题，请告诉我(或只是用Google搜索)。

涵盖的主题 (Topics Covered)

We’ll cover different topics and the various libraries necessary to create and test a full blown React Native application:

我们将介绍不同的主题以及创建和测试完整的React Native应用程序所需的各种库：

1. We’ll install create-react-native-app, and use it to bootstrap our Book Store application

   我们将安装create-react-native-app ，并使用它来引导我们的Book Store应用程序

2. Setup Prettier, ESLint, and the Airbnb style guide for our project
   为我们的项目设置更漂亮，ESLint和Airbnb样式指南
3. Add Drawer and Tabs Navigation using react-navigation
   使用react-navigation添加抽屉和标签导航
4. Test our React components with Jest and Enzyme
   用Jest和Enzyme测试我们的React组件
5. Manage the state of our app using MobX (mobx-state-tree). It will also involve some UI changes and more navigation. We’ll sort and filter the books by genre, and allow the user to see the Book detail screen when the user taps on a book.
   使用MobX(mobx-state-tree)管理应用程序的状态。 它还将涉及一些UI更改和更多导航。 我们将按流派对书籍进行排序和过滤，并允许用户在点击书籍时看到“书籍详细信息”屏幕。

Here’s a demo of the Bookstore app we’re going to build:

这是我们将要构建的Bookstore应用程序的演示：

我们不会涵盖的内容 (What we won’t cover)

There are a few things we won’t cover in this article, which you may want to consider in your project:

我们将在本文中介绍一些内容，您可能需要在项目中考虑这些内容：

1. Tools for adding static type system in JavaScript, like flow and TypeScript

   用于在JavaScript中添加静态类型系统的工具，例如flow和TypeScript

2. Although we will add some styling to our app, we won’t go into details concerning the different options available for adding styles in a ReactNative application. The styled-components library is one of the most popular for both React and ReactNative applications.

   尽管我们将在我们的应用程序中添加一些样式，但是我们不会详细介绍可用于在ReactNative应用程序中添加样式的不同选项。 样式化组件库是React和ReactNative应用程序中最受欢迎的组件之一。

3. We won’t build a separate backend for our application. We will go through integration with the Google Books API, but we’ll use mock data for the most part.
   我们不会为我们的应用程序构建单独的后端。 我们将与Google Books API进行集成，但大部分将使用模拟数据。

使用create-react-native-app CLI(CRNA)创建React Native应用程序 (Create a React Native application using create-react-native-app CLI (CRNA))

Create React Native App is a tool created by Facebook and the Expo team that makes it a breeze to get started with a React Native project. We’ll initialize our ReactNative app using CRNA CLI. So let’s get started!

创建React Native应用程序是Facebook和Expo团队创建的工具，轻松启动React Native项目变得轻而易举。 我们将使用初始化我们ReactNative应用CRNA CLI。 因此，让我们开始吧！

Assuming that you have Node already installed, , we need to install create-react-native-app globally, so that we can initialize a new React Native project for our Book Store.

假设您已经安装了Node ，那么我们需要全局安装create-react-native-app ，以便我们可以为Book Store初始化一个新的React Native项目。

npm install -g create-react-native-app

Now, we can use the create-react-native-app CLI to create our new React Native project. Let’s name it bookstore-app:

现在，我们可以使用create-react-native-app CLI创建新的React Native项目。 让我们将其命名为bookstore-app ：

create-react-native-app bookstore-app

Once CRNA is done bootstrapping our React Native application, it will show some helpful commands. Let’s change the directory to the newly created CRNA app, and start it.

一旦完成CRNA引导我们的React Native应用程序的启动，它将显示一些有用的命令。 让我们将目录更改为新创建的CRNA应用程序，然后启动它。

cd bookstore-app npm start

This will start the packager, giving the option to launch the iOS or Android simulator, or open the app on a real device.

这将启动打包程序，并提供启动iOS或Android模拟器或在真实设备上打开应用程序的选项。

If you face any issues, please refer to either the React Native’s getting started guide or Create React Native app (CRNA) guide.

如果您遇到任何问题，请参考React Native的入门指南或Create React Native应用程序(CRNA)指南 。

通过Expo在真实设备上打开CRNA应用 (Opening the CRNA app on a real device via Expo)

When the app is started via npm start, a QR code will be displayed in your terminal. The easiest way to look at our bootstrapped app is using the Expo app. To do that:

通过npm start应用npm start ，QR码将显示在您的终端中。 查看我们的自举应用程序的最简单方法是使用Expo应用程序。 要做到这一点：

1. Install the Expo client app on your iOS or Android device.

   在iOS或Android设备上安装Expo客户端应用。

2. Make sure that you are connected to the same wireless network as your computer.
   确保您已将计算机连接到同一无线网络。
3. Using the Expo app, scan the QR code from your terminal to open your project.
   使用Expo应用程序，从终端扫描QR码以打开您的项目。

在模拟器中打开CRNA应用 (Opening the CRNA app in a simulator)

To run the app on iOS Simulator, you’ll need to install Xcode. To run the app on an Android Virtual Device, you need to setup the Android development environment. Look at the react-native getting started guide for both the setups.

要在iOS Simulator上运行该应用，您需要安装Xcode。 要在Android虚拟设备上运行该应用，您需要设置Android开发环境。 请参阅这两种设置的本机入门指南。

设置更漂亮，ESLint和Airbnb样式指南 (Setup Prettier, ESLint, and an Airbnb style guide)

In this section, we’ll setup Prettier, ESLint, and Airbnb style guide to make sure our code not only looks pretty, but also runs code linting.

在本节中，我们将设置Prettier，ESLint和Airbnb样式指南，以确保我们的代码不仅看起来漂亮，而且还运行代码linting。

为什么要使用起绒工具？ (Why use a linting tool?)

JavaScript is a dynamic language, and doesn’t have a static type system like languages such as C++ and Java. Because of this dynamic nature, JavaScript lacks the kind of tools available for static analysis that many other languages offer.

JavaScript是一种动态语言，没有像C ++和Java这样的静态类型系统。 由于这种动态特性，JavaScript缺乏许多其他语言提供的可用于静态分析的工具。

This results in hard-to-find bugs related to data types, and requires more effort in debugging and troubleshooting these issues, especially for inexperienced JavaScript developers.

这导致与数据类型相关的难以发现的错误，并且需要更多的精力来调试和解决这些问题，特别是对于没有经验JavaScript开发人员而言。

Since it’s not a compiled language, error are discovered when the JavaScript code is executed at runtime. There are tools like TypeScript and flow that help catch these kind of errors by adding a static type system to JavaScript, but we won’t be going into either of these tools in this tutorial.

由于它不是编译语言，因此在运行时执行JavaScript代码时会发现错误。 通过在JavaScript中添加静态类型系统，可以使用诸如TypeScript和Flow之类的工具来帮助捕获此类错误，但是在本教程中，我们不会涉及这两种工具。

On the other hand, there are linting tools like ESLint available that perform static analysis of the JavaScript code based on configurable rules. They highlight problems in the code that may be potential bugs, which helps developers discover problems in their code before it is executed.

另一方面，还有诸如ESLint之类的整理工具可以基于可配置的规则对JavaScript代码进行静态分析。 它们突出了代码中可能是潜在错误的问题，这有助于开发人员在代码执行之前发现问题。

安装和设置ESLint (Install and Setup ESLint)

A good linting tool is extremely important to ensure that quality is baked in from the beginning and errors are found early. ESLint also helps you implement style guidelines.

良好的起绒工具对于确保从一开始就引入质量并及早发现错误至关重要。 ESLint还可以帮助您实施样式准则。

To make sure we write high quality code and have the right tools from the very beginning of our Bookstore project, we’ll start our tutorial by first implementing linting tools. You can learn more about ESLint on their website.

为确保我们编写高质量的代码并从Bookstore项目的一开始就拥有正确的工具，我们将首先实施linting工具来开始本教程。 您可以在他们的网站上了解有关ESLint的更多信息。

ESLint is fully configurable and customizable. You can set your rules according to your preferences. However, different linting rules configurations have have been provided by the community. One of the popular ones is the Airbnb style guide, and this is the one we’ll use. This will include Airbnb’s ESLint rules, including ECMAScript 6+ and React.

ESLint是完全可配置和可定制的。 您可以根据自己的喜好设置规则。 但是，社区已提供了不同的掉毛规则配置。 最受欢迎的一种是Airbnb样式指南，这就是我们将要使用的指南。 这将包括Airbnb的ESLint规则，包括ECMAScript 6+和React。

First, we’ll install ESLint by running this command in the terminal:

首先，我们将在终端中运行以下命令来安装ESLint：

We’ll use Airbnb’s eslint-config-airbnb, which contains Airbnb’s ESLint rules, including ECMAScript 6+ and React. It requires specific versions of ESLint, eslint-plugin-import, eslint-plugin-react, and eslint-plugin-jsx-a11y. To list the peer dependencies and versions, run this command:

我们将使用Airbnb的eslint-config-airbnb ，其中包含Airbnb的ESLint规则，包括ECMAScript 6+和React。 它需要特定版本的ESLint，eslint-plugin-import，eslint-plugin-react和eslint-plugin-jsx-a11y。 要列出对等方依赖性和版本，请运行以下命令：

npm info "eslint-config-airbnb@latest" peerDependencies

At the time of this writing, these are the versions shown in the output from the above command:

在撰写本文时，这些是上述命令输出中显示的版本：

{ eslint: '^4.9.0',  'eslint-plugin-import': '^2.7.0',  'eslint-plugin-jsx-a11y': '^6.0.2',  'eslint-plugin-react': '^7.4.0' }

So let’s install these specific dependency versions by running this command:

因此，让我们通过运行以下命令来安装这些特定的依赖版本：

npm install -D eslint@^4.9.0 eslint-plugin-import@^2.7.0 eslint-plugin-jsx-a11y@^6.0.2 eslint-plugin-react@^7.4.0

This will install the necessary dependencies and generate the .eslintrc.js file in the project root directory. The .eslintrc.js file should have the following configurations:

这将安装必要的依赖项，并在项目根目录中生成.eslintrc.js文件。 .eslintrc.js文件应具有以下配置：

module.exports = {  "extends": "airbnb"};

代码样式 (Code styling)

While we have the linting covered with ESLint and the Airbnb style guide, a big part of code quality is consistent code styling. When you’re working on a team, you want to make sure that the code formatting and indentation is consistent throughout the team. Prettier is just the tool for that. It ensures that all the code conforms to a consistent style.

虽然我们在ESLint和Airbnb样式指南中介绍了棉绒，但是代码质量的很大一部分是一致的代码样式。 在团队中工作时，您要确保整个团队中的代码格式和缩进都是一致的。 漂亮只是工具。 它确保所有代码都符合一致的样式。

We’ll also add the ESLint plugin for Prettier, which will add Prettier as an ESLint rule and report differences as individual ESLint issues.

我们还将为Prettier添加ESLint插件 ，该插件会将Prettier添加为ESLint规则，并报告差异作为单个ESLint问题。

Now, there may be conflicts between the ESLint rules and the code formatting done by Prettier. Fortunately, there is a plugin available called eslint-config-prettier that turns off all rules that are unnecessary or might conflict with Prettier.

现在，ESLint规则与Prettier完成的代码格式之间可能存在冲突。 幸运的是，有一个名为eslint-config-prettier的插件可以关闭所有不必要的或可能与Prettier冲突的规则。

使用ESLint安装和设置更漂亮 (Install and Setup Prettier with ESLint)

Let’s install all the necessary packages, Prettier, and eslint-plugin-prettier. We’ll also need to install eslint-config-airbnb for this:

让我们安装所有必需的软件包，Prettier和eslint-plugin-prettier。 我们还需要为此安装eslint-config-airbnb：

npm install -D prettier prettier-eslint eslint-plugin-prettier eslint-config-prettier eslint-config-airbnb

NOTE: If ESLint is installed globally, then make sure eslint-plugin-prettier is also installed globally. A globally-installed ESLint cannot find a locally-installed plugin.

注意：如果ESLint是全局安装的，请确保eslint-plugin-prettier也已全局安装。 全局安装的ESLint无法找到本地安装的插件。

To enable eslint-plugin-prettier plugin, update your .eslintrc.js file to add the “prettier” plugin. And to show linting error on Prettier formatting rules, add the “rule” to show error on “prettier/prettier”. Here’s our updated .eslintrc.js:

要启用eslint-plugin-prettier插件，请更新您的.eslintrc.js文件以添加“ prettier”插件。 要显示漂亮的格式规则上的毛发错误，请添加“规则”以在“漂亮/漂亮”上显示错误。 这是我们更新的.eslintrc.js：

module.exports = {  "extends": [    "airbnb",    "prettier"  ],  rules: {    "prettier/prettier": "error",  },}

eslint-config-prettier also ships with a CLI tool to help you check if your configuration contains any rules that are unnecessary or conflict with Prettier. Let’s be proactive and do that.

eslint-config-prettier还附带一个CLI工具，可帮助您检查配置中是否包含不必要的规则或与Prettier冲突的规则。 让我们积极主动地做到这一点。

First, add a script for it to package.json:

首先，将脚本添加到package.json中：

{  "scripts": {    "eslint-check": "eslint --print-config .eslintrc.js | eslint-config-prettier-check"  }}

Now, run the “eslint-check” command to see ESLint and Prettier’s conflicting rules:

现在，运行“ eslint-check”命令以查看ESLint和Prettier的冲突规则：

npm run eslint-check

This will list the conflicting rules in the terminal. Let’s turn off the conflicting rules by updating the .eslintrc.js file. I also prefer singleQuote and trailingComma, so I’ll configure those rules as well. This is what our .eslintrc.js file looks like now:

这将在终端中列出冲突的规则。 让我们通过更新.eslintrc.js文件来关闭冲突规则。 我也更喜欢singleQuote和TrailingComma，因此我还将配置这些规则。 这是我们的.eslintrc.js文件现在的样子：

module.exports = {  "parser": "babel-eslint",  "extends": [    "airbnb",    "prettier"  ],  "plugins": [    "prettier"  ],  "rules": {    "prettier/prettier": "error",    "react/jsx-closing-bracket-location": "off",    "react/jsx-closing-tag-location": "off",    "react/jsx-curly-spacing": "off",    "react/jsx-equals-spacing": "off",    "react/jsx-first-prop-new-line": "off",    "react/jsx-indent": "off",    "react/jsx-indent-props": "off",    "react/jsx-max-props-per-line": "off",    "react/jsx-tag-spacing": "off",    "react/jsx-wrap-multilines": "off"  }}

If you now run eslint with the --fix flag, the code will be automatically formatted according to the Prettier styles.

如果现在使用--fix标志运行eslint ，则代码将根据Prettier样式自动设置格式。

配置VS Code以在保存时运行ESLint (Configure VS Code to run ESLint on save)

We can configure any IDE to automatically run ESLint on Save or as we type. Since we have also configured Prettier along with ESLint, our code will automatically be pretiffied. VS Code is an IDE popular in the JavaScript community, so I’ll show how to setup ESLint’s auto-fix on save using VS Code, but the steps would be similar in any IDE.

我们可以将任何IDE配置为在“保存”或键入时自动运行ESLint。 由于我们还与ESLint一起配置了Prettier，因此将自动美化我们的代码。 VS Code是JavaScript社区中流行的IDE，因此，我将向您展示如何使用VS Code在保存时设置ESLint的自动修复功能，但是步骤在任何IDE中都是相似的。

To configure VS Code to automatically run ESLint on Save, we first need to install the ESLint extension. Go to Extensions, search for the “ESLint” extension, and install it. Once the ESLint extension is installed, go to Preferences > User Settings, and set “eslint.autoFixOnSave” to true. Also make sure that “files.autoSave” is either set to “off”, “onFocusChange” or “onWindowChange”.

要将VS Code配置为在保存时自动运行ESLint，我们首先需要安装ESLint扩展。 转到扩展，搜索“ ESLint”扩展，然后安装它。 一旦安装了ESLint扩展，请转到Preferences > User Setti设置”，并将“ eslint.autoFixOnSave”设置为true。 还要确保将“ files.autoSave”设置为“ off”，“ onFocusChange”或“ onWindowChange”。

Now, open the file App.js. If the ESLint is configured correctly, you should see some linting error, like the “react/prefer-stateless-function”, “react/jsx-filename-extension”, and “no-use-before-define” errors. Let’s turn those “off” in the .eslintrc.js file. I also prefer singleQuote and trailingComma as I mentioned above, so I’ll configure those rules as well.

现在，打开文件App.js。 如果正确配置了ESLint，则应该看到一些掉毛错误，例如“ react / prefer-stateless-function”，“ react / jsx-filename-extension”和“ no-use-before-define”错误。 让我们在.eslintrc.js文件中将其“关闭”。 我也更喜欢如上所述的singleQuote和TrailingComma，因此我还将配置这些规则。

Here is the updated .eslintrc.js file.

这是更新的.eslintrc.js文件。

module.exports = {  "parser": "babel-eslint",  "extends": [    "airbnb",    "prettier"  ],  "plugins": [    "prettier"  ],  "rules": {    "prettier/prettier": [      "error",      {        "singleQuote": true,        "trailingComma": "all",      }    ],    "react/prefer-stateless-function": "off",    "react/jsx-filename-extension": "off",    "no-use-before-define": "off",    "react/jsx-closing-bracket-location": "off",    "react/jsx-curly-spacing": "off",    "react/jsx-equals-spacing": "off",    "react/jsx-first-prop-new-line": "off",    "react/jsx-indent": "off",    "react/jsx-indent-props": "off",    "react/jsx-max-props-per-line": "off",    "react/jsx-tag-spacing": "off",    "react/jsx-wrap-multilines": "off"  }}

I know this was a lot of work, considering that we haven’t even started working on our app yet! But trust me, this setup will be very beneficial for your projects in the long run, even if you’re a one person team. When you’re working with other developers, linting and programming standards will go a long way in reducing code defects and ensuring consistency in code style.

考虑到我们甚至还没有开始开发我们的应用程序，我知道这是很多工作！ 但是请相信我，从长远来看，即使您是一个人的团队，这种设置对您的项目也将非常有益。 当您与其他开发人员一起工作时，整理和编程标准将在减少代码缺陷和确保代码样式的一致性方面大有帮助。

You can find the changes made in this section in this branch of the tutorial repository.

您可以在教程资料库的此分支中找到本节中所做的更改。

使用React导航的抽屉和标签导航 (Drawer and Tabs Navigation using react-navigation)

In this section, we’ll add the Drawer and Tabs Navigation using react-navigation.

在本节中，我们将使用react-navigation添加“抽屉和标签导航”。

Our Bookstore app will contain a navigation drawer with two menu options. The first menu item for the AuthorsScreen, containing the list of authors. The second menu item for the BooksScreen, containing the list of books.

我们的Bookstore应用程序将包含一个带有两个菜单选项的导航抽屉。 AuthorsScreen的第一个菜单项，包含作者列表。 BooksScreen的第二个菜单项，包含书单。

Tapping on a book will take the user to the BookDetail Screen. For navigation between the different views, we’ll use React Navigation to add navigation to our app. So let’s install it first:

轻按书籍会将用户带到“书籍详细信息”屏幕。 为了在不同视图之间导航，我们将使用React Navigation将导航添加到我们的应用程序。 因此，让我们先安装它：

npm install --save react-navigation

createStackNavigator (createStackNavigator)

Our ReactNative app will contain two modules:

我们的ReactNative应用程序将包含两个模块：

• an Author module allowing the users to browse list of authors
  作者模块，允许用户浏览作者列表
• a Books module, containing the list of books.
  书籍模块，其中包含书籍列表。

The Author and Book modules will be implemented using the StackNavigator from React Navigation. Think of StackNavigator as the history stack in a web browser. When the user clicks on a link, the URL is pushed to the browser history stack, and removed from the top of the history stack when the user presses the back button.

Author和Book模块将使用React Navigation中的StackNavigator实现。 将StackNavigator视为Web浏览器中的历史记录堆栈。 当用户单击链接时，URL被推送到浏览器历史记录堆栈，并在用户按下“后退”按钮时从历史记录堆栈的顶部删除。

export const BookStack = createStackNavigator({  Books: {    screen: BooksScreen,  },})

export const AuthorStack = createStackNavigator({  Authors: {    screen: AuthorsScreen,  },})

For BooksScreen and AuthorsScreen, we’ll simply add two stateless react components for now, with some buttons to test our screen navigation and drawer functionality:

对于BooksScreen和AuthorsScreen，我们现在仅添加两个无状态的react组件 ，并使用一些按钮来测试我们的屏幕导航和抽屉功能：

const BooksScreen = ({ navigation }) => (       navigation.navigate('Authors')}      title="Go to Authors"    />     navigation.openDrawer()} title="Open Drawer" />  )

const AuthorsScreen = ({ navigation }) => (   navigation.navigate('Books')}    title="Go back to Books"  />)

navigation.openDrawer() will trigger the drawer to open. navigation.navigate() allows the app to navigate to different screens.

navigation.openDrawer()将触发抽屉打开。 navigation.navigate()允许应用导航到不同的屏幕。

In our application, we’ll add a Drawer which will maintain the menu for our Author and Book modules. We’ll implement the drawer using React Navigation’s createDrawerNavigator.

在我们的应用程序中，我们将添加一个Drawer，它将维护Author和Book模块的菜单。 我们将使用React Navigation的createDrawerNavigator实现抽屉。

The first menu in the drawer will be for the Author module, and the second for the Book module. Author and Book Stack Navigators will both be inside the main DrawerStack.

抽屉中的第一个菜单用于“作者”模块，第二个菜单用于“书籍”模块。 作者和书籍堆栈导航器都将位于主DrawerStack内部。

Here’s the code for the drawer implementation:

这是抽屉实现的代码：

const App = createDrawerNavigator({  Books: {    screen: BookStack,  },  Authors: {    screen: AuthorStack,  },})

Here’s a diff of our latest changes.

这与我们的最新变化有所不同 。

In the file App.js, we’ve made the following changes:

在文件App.js中，我们进行了以下更改：

1. We renamed the default export to App
   我们将默认导出重命名为App
2. We added two stateless components for our screens, BooksScreen and AuthorsScreen.
   我们为屏幕添加了两个无状态组件，BooksScreen和AuthorsScreen。

3. We added the StackNavigator from React Navigation to implement navigation for our app.

   我们从React Navigation中添加了StackNavigator，以实现我们应用程序的导航。

4. We used createDrawerNavigator() from react-navigation to implement the Drawer Navigation. This renders the Drawer content, along with the menu options for Books and Authors.

   我们使用了react-navigation中的createDrawerNavigator()来实现Drawer Navigation。 这将呈现“抽屉”内容以及“书籍”和“作者”的菜单选项。

And after making the above changes, here’s what our UI looks like when we click on the “Open Drawer” button and navigate between screens.

进行了上述更改之后，这就是我们单击“打开抽屉”按钮并在屏幕之间导航时的UI外观。

目录结构 (Directory Structure)

It’s important to think about your application and how you’ll structure of your files and resources in the beginning of the project. While there are several ways you could structure your application code, I prefer co-locating files and tests using a feature-based architecture. Co-locating files related to a particular feature or module has a number of benefits.

重要的是要考虑您的应用程序以及在项目开始时如何构造文件和资源。 尽管可以通过多种方式来构造应用程序代码，但我更喜欢使用基于功能的体系结构来共同定位文件和测试。 与特定功能或模块相关的文件共定位有很多好处。

Let’s create an src directory where we’ll keep all our source files. Inside it, create two directories: one for the book view, named “book”, and the other for the author view, named “author”.

让我们创建一个src目录，我们将保留所有源文件。 在其中创建两个目录：一个目录用于书本视图，名为“ book”，另一个目录用于作者视图，名为“ author”。

Create index.js files within each of the two directories we just added. These files will export the components for each of our views. Move the code from App.js for the BookView and AuthorView components into these files, and import them instead.

在我们刚刚添加的两个目录中的每个目录中创建index.js文件。 这些文件将导出我们每个视图的组件。 将App.js中BookView和AuthorView组件的代码移到这些文件中，然后导入它们。

It’s important to note that refactoring should be a big part of the development workflow. We should continuously refactor our code to prepare ourselves for future changes and challenges. This has a big impact on productivity and change management in the long run.

值得注意的是，重构应该是开发工作流的重要组成部分。 我们应该不断重构代码，为将来的变化和挑战做好准备。 从长远来看，这对生产力和变更管理有很大影响。

Our app should still work as it was before the refactor. Here’s the file diff of our recent changes.

我们的应用程序应该仍然可以像重构前一样正常工作。 这是我们最近更改的文件差异 。

Each of the screens will have a title, which means that we’ll be duplicating the same code along with the styles. To keep our code DRY, let’s move the title to a separate file src/components/Title.js, and reuse it where needed. We’ll also move the main views into a new parent directory src/views to keep them separate from other components.

每个屏幕都有一个标题，这意味着我们将复制相同的代码以及样式。 为了使我们的代码保持干燥，让我们将标题移动到单独的文件src/components/Title.js ，并在需要的地方重复使用。 我们还将主视图移动到新的父目录src/views以使其与其他组件分离。

标签导航 (Tab Navigation)

The business requirement for our app is to have three tabs in the books view, to show all books by default, and additional tabs to show filtered books for the fiction and non-fiction books. Let’s use the createBottomTabNavigator from react-navigation to implement the Tab Navigation.

我们应用程序的业务需求是在书籍视图中具有三个选项卡，以默认显示所有书籍，并具有其他选项卡以显示小说和非小说类书籍的过滤书籍。 让我们使用react-navigation中的createBottomTabNavigator来实现选项卡导航。

import { createBottomTabNavigator } from 'react-navigation'

import { AllBooksTab, FictionBooksTab, NonfictionBooksTab } from ' components/book-type-tabs'

export default createBottomTabNavigator({  'All Books': AllBooksTab,  Fiction: FictionBooksTab,  Nonfiction: NonfictionBooksTab,})

We should also add a title on every screen to identify the currently selected screen. Let’s create a separate directory src/components for all the common components, and create a file for our Title component inside this new directory.

我们还应该在每个屏幕上添加一个标题，以标识当前选择的屏幕。 让我们为所有常见组件创建一个单独的目录src/components ，并在此新目录内为Title组件创建一个文件。

// src/components/Title.jsimport React from 'react'import { StyleSheet, Text } from 'react-native'

const styles = StyleSheet.create({  header: {    textAlign: 'center',    padding: 20,    marginTop: 20,    fontSize: 20,    color: '#fff',    backgroundColor: '#434343',  },})

export default ({ text }) => {text}

Note that we’ve also added style to the xt> component, importing both StyleSheet and Text from react-native.

请注意，我们还为 xt>组件添加了style ， from react- native导入both Styl样式t an文本。

We’ll add the Title to each view component, providing the title text in the props. Also, since the Authors view just contains a list of authors, we don’t need a StackNavigator for it, so we’ll change it to a plain React component. Here’s what our src/views/author/index.js file looks like now:

我们将Title添加到每个视图组件，在道具中提供标题text 。 另外，由于Authors视图仅包含作者列表，因此我们不需要StackNavigator，因此将其更改为普通的React组件。 这是我们的src/views/author/index.js文件现在的样子：

// src/views/author/index.js

import Title from '../../components/Title'

export default ({ navigation }) => (