微信公众号：前端呼啦圈（Love-FED）
我的博客：劳卜的博客
知乎专栏：前端呼啦圈
前言随着 React 的盛行，其移动开发框架 React Native 也收到了广大开发者的青睐，以下简称 RN。通过 RN 我们能够使用 JavaScript 语言来实现跨平台移动应用的开发，打开了前端工程师通往移动平台的大门。用 RN 官方的介绍来概括它的特点就是：Learn once, write anywhere。
如果你了解 React，那么学习 RN 的话应该会非常轻松。因为 RN 和 React 使用了相同的开发语言 JavaScript 和相同的设计理念 React，在 React 的基础上添加了原生平台的底层支持。这样，不同平台的适配就交由 RN 去处理，而开发者只需要关注 RN 平台应用开发本身。
本文将从 RN 混合开发（与 iOS、Android 平台交互）的原理和实现进行介绍，结合流程图的方式让大家进一步的了解 RN 开发的思想和底层逻辑。
原理与实现 1. 从 Hello world 开始先来看一个使用 RN 实现的简单的 Hello world 展示：
上方我们不难看到一些很熟悉的 React 语法，但除此之外我们还能看到其引入了 react-native 库中的 AppRegistry API 和 Text (文本)组件，这便是 RN 提供给我们用于调用原生平台的 APIs 和 组件，其能够在不同移动设备上实现一致的功能和逻辑。最后展示在 APP 中的便是 Hello world 文本，而至于 AppRegistry API 后面会做相应介绍。
2. 解刨 React Native 应用的结构那么看完 Hello world 示例后，我们应该大致知道了 RN 应用的一个结构，我们用图例的方式进行解刨说明，如下图所示：
从图中可以看到，我们整个的 RN 应用可以分为两层展示：
JavaScript Code 层
Native Code 层
也可以理解为所谓的应用层和底层。应用层通过 JavaScript 桥接层 与底层平台进行交互，获取底层平台的原生 APIs、UI 组件及一些自定义组件等。比如 Hello world 示例中引入的 AppRegistry API 和 Text 组件便是很好的说明。
这样的分层能够使应用层的开发变得简单、高效和跨平台，对于应用的稳定性、运行时的性能来说将和原生平台保持接近。
大致了解完 React Native 应用的结构后，我们不妨再来认识下原生平台是如何调用 React Native 组件的。我们 RN 的代码要跑在原生 APP 中那必然需要原生 APP 加载运行对应的 RN 组件，以实现混合开发和交互的功能。这里就要来介绍下刚刚搁置的 AppRegistry API 了。
一般我们的 RN 项目都会有一个入口文件，比如 index.js（老版本会存在两个：index.ios.js 和 index.android.js）用于注册根组件并提供给原生平台运行。这里的注册根组件就要通过 AppRegistry API 来实现。
我们需要在根组件里调用 AppRegistry 中的 registerComponent 方法进行组件的注册。注册完之后原生平台便可以通过 runApplication 方法来运行注册过的根组件。需要注意的是注册和运行的组件名称两者必须保持一致，这样才能够实现加载对应的组件。比如 Hello world 示例中我们注册的根组件名为 HelloWorldApp，并且注入相应的组件模块。另外同时一个入口文件中，我们也可以注册多个根组件。
刚刚在介绍原生平台调用 RN 组件时提到了加载对应根组件的功能。那么是不是原生平台只有通过不断的调用运行 RN 注册的根组件才能实现不同页面的首次加载呢（这里的加载指原生打开 RN 页面）？答案是否定的。
除了上述通过调用不同的根组件来实现原生打开不同的 RN 界面外（图中第二点），我们还可以调用一个根组件来实现。唯一的区别在于我们需要调用时在 initialProperties 中添加区分不同界面的标识位来渲染不同的组件，就好比在 URL 上携带不同参数跳转到同一路由一样，根据路由上的参数在应用层进行对应组件的渲染。
在 RN 根组件中我们可以通过 this.props 获取原生平台携带过来的参数对象，如示例中的 viewName，再根据 viewName 实现 RN 内部组件的渲染，当然也可以结合 react-navigation 来实现路由模块的切换。至于最终选择哪种方式加载，决定权还是要看业务的划分和功能的定义。相比较而言第一种可能更加灵活和便捷。
5. React Native 与原生平台通信原理