react-native入门实战小结

本文原创：fengyiyijavascript

唠叨两句

在公司提效的大背景下，今年6月初，部门的国际化新项目咱们经过多方面的对比，技术选型采用react-native为最终的方案，之因此没有采用目前比较火的Flutter。其中的缘由我会在如下小节有个简要的说明。项目初版已接近尾声，到了最后的细节调整阶段。正好借此机会记录下这段时间入坑RN的一些心得体会。css

心得体会

入坑3月有余，幸而有咱们前端同窗的加持，使咱们在第一次使用新技术栈的同时开发如此大规模的项目，得以保证开发进度的顺利进行。html

在整个项目中使用到的语言包括TypeScript/JavaScript/Ojbective-C/Java，项目管理、打包、构建工具包括npm/cocoapods/gradle/webpack，至于开发工具方面我更喜欢WebStorm+AndroidStudio+AppCode组合，能够保证开发体验高度一致，开发速度会更快，固然Xcode必不可少。而前端同窗更喜欢VSCode，都是能够的。前端

react-native来实现项目中全部的业务逻辑，开发速度天然快了许多，使我这个同时开发过iOS和Android项目的人深深体会到了跨平台的好处，不再会出现一样的功能在iOS侧和Android侧实现两遍并且实现思路还不同的尴尬场面，在维护时的痛苦不言而喻。java

因为项目中会用到前端及移动端等须要不一样路线的、独立的技术栈，有幸咱们小组同时具备各自领域擅长的同窗，得以在整个开发过程当中都能hold住各个模块，为了让前端同窗在不须要了解移动端不少知识的前提下能够正常、稳定的运行、调试项目，咱们在项目初期编写了大量的npm脚本命令来实现一键自动化功能，好比启动react-native服务，运行、构建、打包、安装iOS和Android App等命令。使前端同窗能够快速地专一于开发、调试。打包提测速度也有很大的改善。node

技术选型

都9102年了，为何还选react-native？当时五、6月份作选型的时候，也作了不少方面的对比。固然，最后对比主要仍是关注在react-native和Flutter的选择上。因为项目大，人员又比较少，因此想经过跨平台的技术来提效是一个大前提，不少能达到跨平台效果的框架咱们都作了总体的调研，好比ionic、weex、hybrid等等，不过为了追求原生般的用户体验，这些方案都被pass掉了。至于react-native和Flutter的选择，前端之巅公众号在8月中旬发布这篇文章《为何Flutter还不是最成熟的跨端框架》里面的观点很入个人法眼。react

重点关注如下几点：android

开发语言：JS or Dart？因为本次项目比较急，排期又是倒排，为了保证项目的进度，选择团队中熟悉的技术语言JS会更可靠。
成熟度：很明显react-native的生态要比Flutter要好得多、成熟得多，单从issue来看，框架自己react-native也要稳定不少，并且第三方库也要多不少。
热更新支持：目前Flutter官方仍是不支持热更新，并且也没有相关的计划表。
WEB平台支持：Flutter在5月初的1.5版本刚支持到WEB平台，还不够成熟，没法在生产环境中使用。

以上几点是保证项目能顺利上线的优先考虑点，至于Flutter的优点、趋势及将来发展倒不是本次选型的关键和重点。webpack

环境搭建

官方的环境搭建文档已经有详细的说明，这里再也不重复。你们能够看下我本地的环境配置版本，目前整个项目运行稳定，能够借鉴。git

$ react-native info
info 
  React Native Environment Info:
    System:
      OS: macOS 10.14.6
      CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
      Memory: 259.21 MB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 8.11.1 - /usr/local/bin/node
      Yarn: 1.12.3 - /usr/local/bin/yarn
      npm: 6.10.3 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
      Android SDK:
        API Levels: 22, 23, 24, 25, 26, 27, 28
        Build Tools: 19.1.0, 20.0.0, 21.1.2, 22.0.1, 23.0.1, 23.0.2, 23.0.3, 24.0.0, 24.0.1, 24.0.2, 24.0.3, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.0, 26.0.1, 26.0.2, 26.0.3, 27.0.0, 27.0.1, 27.0.2, 27.0.3, 28.0.0, 28.0.0, 28.0.2, 28.0.3
        System Images: android-28 | Google Play Intel x86 Atom
    IDEs:
      Android Studio: 3.4 AI-183.6156.11.34.5692245
      Xcode: 10.3/10G8 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3 
      react-native: 0.59.10 => 0.59.10 
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7
复制代码

值得一说的是，react-native库使用的是0.59.10，0.59的最后一个版本，相信0.60版本后Android侧引入的新JS引擎，对App的性能有更多的提高。咱们后续在适当的机会也会作相应的升级。还有，每一个开发的cocoapods包管理工具最好也要保持一致，目前咱们统一使用1.7.2版本，不然，每次pod install都会引发Podfile.lock文件的变化，容易代码冲突。

另外，本项目采用的开发语言为TypeScript，并无采用JavaScript。TypeScript中增长了静态类型、类、模块、接口和类型注解等等，对咱们移动开发者经常使用的面向对象语言OC/Java都很友好，上手更加容易、更易理解，并且其面向对象编程语言的结构保持了代码的清洁、一致和简单的调试，在应对大型开发项目时，使用TypeScript更加合适。

经常使用组件&第三方库

经常使用的官方组件我这里不一一介绍，你们能够直接看官方文档，官方文档永远是最新最可靠的。

如下所列是咱们项目中目前使用到的第三方库，能帮助咱们更好、更快地开发和构建项目。有兴趣的同窗能够点开了解一下，相信有不少库都是大多数项目中离不开的，好比导航库react-navigation、状态管理库mobx/redux等等。

代码规范

这点比较有意思的是，咱们前端同窗之前更多了解的是JS，而咱们此次选用的开发语言是TS，其实仍是有不少不一样的。好比最简单的类型定义，习惯了OC/Java的同窗天然是对JS那种无类型的语言深恶痛绝，而JS那种无类型的写法也不是TS的最佳实践，因此坦白来说，咱们小组基本没有什么经验来规范TS如何写才是最优雅的。

此次选用TS的一个核心诉求也是为了其静态类型化功能，能帮助咱们编写更健壮的代码、更好的协做。既然本身没有经验，不如拿来主义，如下两个是比较官方的两例。以为不错，能够先试用之。

react-native项目中须要掌握的技术栈

如下的知识点是我我的从移动端开发到react-native开发，入门时学过和参考过的一些文档和资料。供你们入坑参考。

iOS/Android - Objective-C/Swift/Java/Kotlin
- 原生开发基础，涉及太多知识，这里暂不列举
JS/TS - ES2015/ES6
React - JavaScript/JSX语法/HTML/CSS
ReactNative - React
【进阶】MobX/Redux - 状态管理、组件间的通讯
Node/NPM - 项目、包管理
- 暂无
热更新
- CodePush
其余

小结

从目前来看，react-native的成熟、稳定彻底能够支撑起一个商业型的项目，开发期间虽然经历了各类各样的坑和奇怪的问题，可是在官方文档、stackoverflow以及对具体问题的分析，最后都能获得可行的解决方案。借用公众号那句话，目前阶段，react-native才是业内最成熟的跨端框架。欢迎你们一块儿入坑学习~