旧金山聚会回顾
上周我有机会参加了在 Zynga 旧金山办公室举办的 React Native 聚会。大约有 200 人参加，这是一个与我附近也对 React Native 感兴趣的其他开发者见面的好地方。
我特别有兴趣了解更多关于 React 和 React Native 在 Zynga、Netflix 和 Airbnb 等公司的应用情况。当晚的议程如下
- React 中的快速原型开发
- 为 React Native 设计 API
- 弥合差距：在现有代码库中使用 React Native
但首先，活动以一个快速介绍和近期新闻的简要回顾开始
- 您知道 React Native 现在是 GitHub 上最受欢迎的 Java 仓库吗？
- rnpm 现在是 React Native 核心的一部分！您现在可以使用
react-native link代替rnpm link来 安装带有原生依赖的库。 - React Native 聚会社区正在快速增长！现在全球各地各种 React Native 聚会小组共有超过 4,800 名开发者。
如果 这些聚会之一 在您附近举行，我强烈建议您参加！
Zynga 的 React 快速原型开发
第一轮新闻之后，是当晚的主办方 Zynga 的快速介绍。Abhishek Chadha 谈到了他们如何使用 React 在移动端快速原型开发新体验，演示了一个类似“你画我猜”应用的快速原型。他们使用了类似于 React Native 的方法，通过桥梁提供对原生 API 的访问。Abhishek 使用设备摄像头拍摄了观众的照片，然后在某人的头上画了一顶帽子，这演示了这一点。
Netflix 的 React Native API 设计
接下来是当晚的第一个专题演讲。Netflix 的高级软件工程师 Clarence Leung 发表了关于“为 React Native 设计 API”的演讲。他首先指出了人们可能开发的两种主要类型的库：组件，例如选项卡栏和日期选择器；以及提供对原生服务访问的库，例如相机胶卷或应用内支付。在为 React Native 构建库时，有两种方法可以采用
- 提供平台特定的组件
- 一个跨平台库，为 Android 和 iOS 提供类似的 API
每种方法都有其自身的考虑因素，您需要根据自己的需求确定哪种方法最适合。
方法 #1
作为平台特定组件的示例，Clarence 谈到了来自 React Native 核心的 DatePickerIOS 和 DatePickerAndroid。在 iOS 上，日期选择器作为 UI 的一部分呈现，可以轻松嵌入到现有视图中，而 Android 上的日期选择器以模态方式呈现。在这种情况下，提供单独的组件是有意义的。
方法 #2
另一方面，照片选择器在 Android 和 iOS 上的处理方式类似。有一些细微的差异 —— 例如，Android 不像 iOS 那样将照片分组到文件夹中（例如“自拍”文件夹）—— 但这些差异可以使用 if 语句和 Platform 组件轻松处理。
无论您选择哪种方法，最好都尽量减少 API 表面积，并构建特定于应用的库。例如，iOS 的应用内购买框架支持一次性消费品购买以及可续订订阅。如果您的应用只需要支持消费品购买，您可以在跨平台库中放弃对订阅的支持。
在 Clarence 的演讲结束后，有一个简短的问答环节。其中一个有趣的细节是，在 Netflix 为这些库编写的 React Native 代码中，大约 80% 是在 Android 和 iOS 之间共享的。
弥合差距，在现有代码库中使用 React Native
当晚的最后一场演讲来自 Airbnb 的 Leland Richardson。演讲的重点是在现有代码库中使用 React Native。我已经知道使用 React Native 从头开始编写新应用有多么容易，所以我非常想了解 Airbnb 在其现有原生应用中采用 React Native 的经验。
Leland 首先谈到了绿地应用与棕地应用。绿地意味着开始一个项目时无需考虑任何先前的工作。这与棕地项目形成对比，在棕地项目中，您需要考虑现有项目的需求、开发流程以及所有团队的各种需求。
当您在开发绿地应用时，React Native CLI 会为 Android 和 iOS 设置一个单一的代码仓库，一切都能正常运行。Airbnb 使用 React Native 的第一个挑战是 Android 和 iOS 应用各有自己的代码仓库。多代码仓库公司在采用 React Native 之前需要克服一些障碍。
为了解决这个问题，Airbnb 首先为 React Native 代码库设置了一个新的代码仓库。他们使用持续集成服务器将 Android 和 iOS 代码仓库镜像到这个新的代码仓库中。在运行测试并构建 bundle 后，构建产物会被同步回 Android 和 iOS 代码仓库。这使得移动工程师可以在不改变其开发环境的情况下处理原生代码。移动工程师不需要安装 npm、运行 packager 或记住构建 JavaScript bundle。编写实际 React Native 代码的工程师不必担心在 Android 和 iOS 之间同步他们的代码，因为他们直接在 React Native 代码仓库上工作。
这确实带来了一些缺点，主要是他们无法发布原子更新。需要原生和 JavaScript 代码组合的更改将需要三个单独的 pull request，所有这些都必须仔细地合并。为了避免冲突，如果 master 在构建开始后发生了更改，CI 将无法将更改合并回 Android 和 iOS 代码仓库。这会在提交频率高的日子（例如发布新版本时）导致长时间的延迟。
Airbnb 后来转向了单代码仓库方法。幸运的是，这已经在考虑之中，一旦 Android 和 iOS 团队开始适应使用 React Native，他们很乐意加速向单代码仓库的转变。
这解决了他们在使用拆分代码仓库方法时遇到的大部分问题。Leland 确实指出，这确实会对版本控制服务器造成更大的压力，这对于较小的公司来说可能是一个问题。
导航问题
Leland 演讲的后半部分集中在我非常关心的一个话题上：React Native 中的导航问题。他谈到了 React Native 中导航库的丰富性，包括第一方和第三方库。NavigationExperimental 被认为是一个很有前景的库，但最终并不适合他们的用例。
事实上，现有的导航库似乎都不太适合棕地应用。棕地应用要求导航状态完全由原生应用拥有。例如，如果用户会话在呈现 React Native 视图时过期，原生应用应该能够接管并根据需要呈现登录屏幕。
Airbnb 也希望避免在过渡期间用 JavaScript 版本替换原生导航栏，因为效果可能会很突兀。最初，他们将自己限制在模态呈现的视图中，但这显然在更广泛地在其应用中采用 React Native 时带来了问题。
他们决定他们需要自己的库。该库名为 airbnb-navigation。该库尚未开源，因为它与 Airbnb 的代码库紧密相连，但他们希望在年底前发布它。
我不会详细介绍该库的 API，但以下是一些关键要点
- 必须提前预注册场景
- 每个场景都显示在自己的
RCTRootView中。它们在每个平台上以原生方式呈现（例如，iOS 上使用UINavigationController）。 - 场景中的主
ScrollView应包装在ScrollScene组件中。这样做可以让您利用原生行为，例如在 iOS 上点击状态栏滚动到顶部。 - 场景之间的过渡以原生方式处理，无需担心性能。
- 自动支持 Android 返回按钮。
- 他们可以通过 Navigator.Config 无 UI 组件来利用基于 View Controller 的导航栏样式。
还有一些注意事项需要牢记
- 导航栏在 JavaScript 中不易自定义，因为它是一个原生组件。这是故意的，因为使用原生导航栏是此类库的硬性要求。
- ScreenProps 必须在每次通过桥接发送时进行序列化/反序列化，因此如果在此处发送过多数据，则必须小心。
- 导航状态由原生应用拥有（也是该库的硬性要求），因此像 Redux 这样的东西无法操作导航状态。
Leland 的演讲之后也进行了问答环节。总的来说，Airbnb 对 React Native 感到满意。他们有兴趣使用 Code Push 来修复任何问题，而无需通过 App Store，并且他们的工程师喜欢 Live Reload，因为他们不必在每次小改动后都等待原生应用重建。
结束语
活动在一些额外的 React Native 新闻中结束
- Deco 宣布了他们的 React Native 案例展示，并邀请所有人将其应用添加到列表中。
- 最近的 文档全面更新 获得了赞扬！
- Deco IDE 的创建者之一 Devin Abbott 将教授一个 React Native 入门课程。
聚会提供了一个与社区中其他开发者见面和学习的好机会。我期待着将来参加更多的 React Native 聚会。如果您参加了这些聚会，请留意我，并告诉我我们如何才能使 React Native 为您更好地工作！