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