关于React Native

先说点闲话：

ReactNative是一个让人又爱又恨的东西，它的语法我很喜欢，它的简单粗暴我很喜欢，它什么都能做，但好多事情都需要我们自己做；但这不重要，谁还不是为了自己热爱的东西活着呢。

关于这篇笔记

React Native很有趣，我在开发和学习的过程中积攒了很多东西，我想把它记录下来；

关于Expo

Expo很重要，起初我用它是因为它配置简单，cli安装好之后，只需要一个expo init然后按照提示完成命令，即可创建完成一个项目。后来发现它用起来效率也很不错，我不用每次都等待xcodebuild命令编译iOS项目，它运行在Expo Go App中，不用编译原生代码。

借助于Expo或者是Snack，你的项目可以说是直接运行在云端了，Expo是你项目的展示窗口，非常方便；

而且Expo提供了很多框架，非常方便我们使用，比如@expo/vector-icons，使用Iconfont自定义图标也很方便，使用这个框架配合expo-font，很方便的加载自定义字体。我在刚开始研究自定义字体的时候，差点都被react-native-vector-icons搞晕了，我想不通为什么一个自定义图标可以这么麻烦。

但是弊端也是有的，说是不用编译原生代码，其实也是不能编译。因为Expo项目是运行在Expo Go客户端中的，原生代码的部分已经被“硬编码”了。

但好在最近Expo做了一个大更新，出了一个叫做custom-dev-client的东西，它可以脱离Expo Go客户端，把任何一个项目编译成一个“类Expo Go”，只需要在第一次运行的时候使用expo run:ios或者expo run:android命令，编译出一个独立的App，以后的每次启动即可使用expo start --dev-client，不需要再次编译原生代码；

Expo（目前）的弊端

说完了好处该说坏处了。网上说的什么Api有限制之类的坏处都是假的，只需要切换到bare workflow就行了，真正的问题在与下面这几个，Expo目前被我发现这么几个短板：

• 没有提供react-native-windows以及react-native-macos 的支持

  • 本来我以为bare workflow没有问题，但是真正跑macOS的时候发现跑不了。想一想才发现，程序入口都是expo的，可是expo不支持这两个平台；

关于Expo Workflow

Expo本身有一个工作流的概念，分为”Managed”和“Bare”，前者在创建后不会生成Android和iOS的项目文件夹，所有的配置都在app.json里面进行，其实也挺方便，但缺点就是无法后来修改原生项目的代码。后者与直接创建的RN项目并无两样，主要是可以使用Expo的所有功能；

Managed Workflow可以随时通过expo eject命令生成ios和android两个项目文件夹，退回到bare workflow，所以我觉得项目刚创建的时候使用managed，后面有需求了在eject也是挺好的。后来我发现，其实expo run的时候也会eject，也会直接生成ios和android两个项目文件夹；

expo可以随时根据你app.json里面的配置，来为你配置原生项目，哪怕你已经是bare workflow了，你也可以通过expo prebuild来重新生成原生项目；

包括像是上面说的custom-dev-client，在bare项目里面配置还挺麻烦的，需要去原生项目里面改代码。但是如果先创建的是managed workflow，使用expo run之后，它会根据配置自动生成代码。

关于第三方库

RN想在致力于精简React Core。它现在把很多框架都从自带框架里面剔除了。所以使用第三方库是RN里面一个日常工作。我自己也仿照Flutter和SwiftUI写了很多小组件，包括不限于<Spacer />, <Row /> <SizedBox />等。其他常用的第三方库以及其发挥的作用，我记录在下面：

• 导航器，底部Tab，顶部Tab，Stack，以及抽屉导航等

  • 现在主要在用React Navigation
  • 另一个同样强大的框架，React Native Navigation，这个框架讲道理用起来感觉有一点点奇怪，我没有过多研究，不过它有一点比上面那个做得好，就是自带了Hero动画的支持，只需要很简单的配置，我已经给上面的框架写了Feature Request，希望能早早支持吧。

• 底部弹窗，Bottom Sheet

  • 这个框架好曲折，一开始，我就发现了这个React Native Bottom Sheet带有backdrop（背景蒙版），其他的都要自己实现，用了一段时间，我渐渐发现了很多问题，比如没有Web支持，更别提macOS和Windows支持了。后来又发现它对键盘的支持也一般，会出现奇奇怪怪的问题。

  • 后来发现还是这个Modalize好用，键盘支持完美，轻松自定义。

• UI组件库

  • Paper，没得说，这个库遵循Material标准，算是比较优雅，其中用的最多的应该是Modal和Button组件，都还算不错。
  • Expo官方介绍的UI组件库列表，包括不限于UI Kitten，以及RN UI Lib等
  • Expo官方提供的各种框架：https://docs.expo.io/versions/latest/，包含了创建一个App几乎所有可能会用到的Api和框架；

关于开发工具

很多开发者都喜欢使用VSCode来开发，我还理解不了这种行为，我目前使用VSCode有两个场景，第一是临时打开代码文件，第二是JetBrains系列太卡了，我才会去使用。

VSCode在开发的时候，它会修改我项目的入口，来用作调试，这一点让我很烦。

相比之下WebStorm功能强大，再加上我自定义了tsx模板文件以及各种快捷键，用起来真的不错。唯一的问题就是debugger偶尔会连接不上，无法调试，好在目前debug的场景还不是很多。