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 中搜索一下，有详细解释。