React Native 工程基础建设

0. 前言

本文总结工程层面的基础建设，包括很多工具选用、规范制定、技术方案选择。对于将要新启 RN 项目的同学们，本文可以作为你的一部分参考。

文中将用 「RN」 代表 「React Native」。

1. 团队目标

作为新技术使用的开拓者，我们团队的用户是 Account 的所有开发者。我们目标是构建技术平台，搭建脚手架，制定标准，给其他开发人员铺平道路。

2. 工程结构

我们采用 Hybrid 模式，进行逐步迁移，从 Android 工程开始。也就是给现有的 Android 工程集成 RN 框架，逐步用 RN 替换现有功能和界面。

所以我们要考虑：

• Native 和 RN 的结构关系；
• Native 和 RN 的数据交互；
• Native 和 RN 的页面导航。

2.1 结构关系

以单独的 RN Activity 作为 RN 界面的容器，根据不同的参数来决定显示不同的 RN 界面。

图 1

2.2 数据交互

RN 和 Native 通过 RN 提供的一个 Bridge 进行交互，有标准接口。这里就不展开讲解了。

图 2

2.3 导航

我们需要考虑如下几种情况：

• Native page -> RN page
• RN 页面之间的导航
• Native page1 → RN page1 → RN page2 → RN page1 → Native page1
• Native page1 → RN page1 → RN page2 → Native page1
• Native page1 → RN page1 → RN page2 → Native page2

篇幅有限，不展开讲。

3. 技术方案选择

3.1 JS or TS?

JS 灵活易用，TS 可以使工程更稳定。我们选择 TS。

3.2 代码规范

用工具约束代码质量：

eslint + prettier + react-native-community/eslint-config

3.3 状态控制

备选方案：a. RN 自带的 setState，b. React-Hook 的 useState，c. Redux

我们选用 useState. 可以结合 Functional Component 使用。

为什么不用 Redux？ Redux 是一个状态机，适合处理复杂的状态控制，它可以使复杂的状态管理变得简单。但我们的项目没有那么复杂的状态管理需求，引入它会使代码可读性变差，使原本简单的状态控制变得复杂。

3.4 Functional Components or Class Components

当然是 Functional Components 啦。React.js 16.8 推出了 React-Hook，极大的支持了函数式控件。相关讨论很多，不在此赘述了。

3.5 样式

StyleSheet or Styled-Components？

Styled-Component 在前端开发中很流行。他很好地提高了代码的复用性和可移植性。

但是在 RN 开发中，StyleSheet 才是标配。考虑到开发者对 StyleSheet 的接受度和熟练度远高于 Styled-Components, 最终我们选择 StyleSheet。

3.6 测试工具

• Unit Test: Jest
• Component Test: React Native Testing Library (RNTL)
• E2E Test: Detox / Appium

RN e2e 测试一般首选 Detox，后来因为工程中的一些特殊原因，我们被迫选用了 Appium. 都是优秀的测试框架。

3.7 网络请求库

由于我们工程中需要支持 Gateway 验证 + 重试机制，我们需要找到一个类似于 iOS 网络请求库 AFNetwoking / Alamofire 中 Interceptor 机制的实现方案。

axios + axios-auth-refresh 可以实现。

3.8 基础 UI 控件库

我们熟知的知名 UI 控件库有：react-native-paper, react-native-elements, native-base

选择过程中我们进行了详细讨论，从多个维度分析验证，最终确立 react-native-paper。

图 3

3.9 Icon 库

react-native-elements 默认支持 react-native-vector-icons，它包含了很多免费的 Icon 库。就它了。

3.10 Design System

通常我们不应该在页面或控件中硬编码颜色值，为了便于管理主题颜色，保持风格统一，很多项目会把颜色值存储在一个文件中，在页面中使用颜色名。这样做当然可以，只是需要手动管理，后续容易失控。

我们实现并打通了一整套自动化”Design System“，这样我们就不需要手动管理颜色值和字号排版了。

图 4

4. 工具推荐

4.1 编辑器

VSCode

4.2 Debug 工具

Chrome or Flipper

RN 默认支持 Chrome 调试。

Flipper 更厉害一些。

4.3 VSCode 插件

• Auto Import
• Code Spell Checker
• Color Highlight
• Jest Snippets
• Prettier - Code formatter
• React Native Tools
• React-Native/React/Redux snippets for es6/es7

这里就不详细解释了，在 VSCode 中搜索一下，有详细解释。