React Native 混合开发与实现

布满荆棘的人生 2023-08-17 17:28 41阅读 0赞

## 关于 ##

*  微信公众号：前端呼啦圈（Love-FED）
 *  我的博客：[劳卜的博客][Link 1]
 *  知乎专栏：[前端呼啦圈][Link 2]

## 前言 ##

随着 `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 展示：

![775838-20190811183611912-787853985.jpg][]

上方我们不难看到一些很熟悉的 React 语法，但除此之外我们还能看到其引入了 `react-native` 库中的 AppRegistry API 和 Text (文本)组件，这便是 RN 提供给我们用于调用原生平台的 APIs 和 组件，其能够在不同移动设备上实现一致的功能和逻辑。最后展示在 APP 中的便是 Hello world 文本，而至于 AppRegistry API 后面会做相应介绍。

### 2. 解刨 React Native 应用的结构 ###

那么看完 Hello world 示例后，我们应该大致知道了 RN 应用的一个结构，我们用图例的方式进行解刨说明，如下图所示：

![775838-20190811183636887-1167159897.png][]

从图中可以看到，我们整个的 RN 应用可以分为两层展示：

*  JavaScript Code 层
 *  Native Code 层

也可以理解为所谓的应用层和底层。应用层通过 `JavaScript 桥接层` 与底层平台进行交互，获取底层平台的原生 APIs、UI 组件及一些自定义组件等。比如 Hello world 示例中引入的 AppRegistry API 和 Text 组件便是很好的说明。  
这样的分层能够使应用层的开发变得简单、高效和跨平台，对于应用的稳定性、运行时的性能来说将和原生平台保持接近。

### 3. 原生平台调用 React Native 组件 ###

大致了解完 React Native 应用的结构后，我们不妨再来认识下原生平台是如何调用 React Native 组件的。我们 RN 的代码要跑在原生 APP 中那必然需要原生 APP 加载运行对应的 RN 组件，以实现混合开发和交互的功能。这里就要来介绍下刚刚搁置的 AppRegistry API 了。

![775838-20190811183719406-1031032277.png][]

一般我们的 RN 项目都会有一个入口文件，比如 index.js（老版本会存在两个：index.ios.js 和 index.android.js）用于注册根组件并提供给原生平台运行。这里的注册根组件就要通过 AppRegistry API 来实现。

我们需要在根组件里调用 AppRegistry 中的 `registerComponent` 方法进行组件的注册。注册完之后原生平台便可以通过 `runApplication` 方法来运行注册过的根组件。需要注意的是注册和运行的组件名称两者必须保持一致，这样才能够实现加载对应的组件。比如 Hello world 示例中我们注册的根组件名为 HelloWorldApp，并且注入相应的组件模块。另外同时一个入口文件中，我们也可以注册多个根组件。

### 4. 原生加载 React Native 界面 ###

刚刚在介绍原生平台调用 RN 组件时提到了加载对应根组件的功能。那么是不是原生平台只有通过不断的调用运行 RN 注册的根组件才能实现不同页面的首次加载呢（这里的加载指原生打开 RN 页面）？答案是否定的。

![775838-20190811183732389-156585251.png][]

除了上述通过调用不同的根组件来实现原生打开不同的 RN 界面外（图中第二点），我们还可以调用一个根组件来实现。唯一的区别在于我们需要调用时在 initialProperties 中添加区分不同界面的标识位来渲染不同的组件，就好比在 URL 上携带不同参数跳转到同一路由一样，根据路由上的参数在应用层进行对应组件的渲染。

在 RN 根组件中我们可以通过 `this.props` 获取原生平台携带过来的参数对象，如示例中的 viewName，再根据 viewName 实现 RN 内部组件的渲染，当然也可以结合 `react-navigation` 来实现路由模块的切换。至于最终选择哪种方式加载，决定权还是要看业务的划分和功能的定义。相比较而言第一种可能更加灵活和便捷。

### 5. React Native 与原生平台通信原理 ###

在混合开发模式下，我们不可避免的需要和原生平台进行数据的通信，那么在 RN 中，我们如何与原生平台进行通信呢？如何获取原生平台提供的数据或将数据传递给原生平台呢？下面这张图便介绍了这一流程。

![775838-20190811183744665-763357085.png][]

在 RN 中，我们可以引用 react-native 模块中的 `NativeModules` API 来进行数据通信，调用的方法是 NativeModules.模块名称.接口名称，而原生平台返回数据到 RN 平台是基于回调，代码如下：

import { NativeModules } from 'react-native';
    const userInfo = NativeModules.UserInfo; // 获取自定义用户信息模块
    console.log(userInfo.userName); // 打印用户名
    const router = NativeModules.Router; // 获取自定义路由模块
    // 调用原生路由跳转方法
    router.openHome('参数', (res) => {
        console.log(res); // 打印返回数据
    });

通过 NativeModules 我们可以灵活的获取或传递数据给原生平台，同时我们也可以根据业务需要编写不同的 `Bridge` 方法来实现数据通信模块的封装，比如用户信息模块、路由跳转模块及网络请求模块等。

### 6. Redux 架构 ###

在 RN 项目中，除了与原生平台通信和交互的功能外，RN 平台自身也需要实现一些数据状态的管理。这里我们还得认识下 Redux 架构。

![775838-20190811193611867-1708510242.png][]

Redux 是一个用于管理 React 应用状态的容器，在 RN 中也同样适用。其采用单一数据流的方式来实现数据的管理，唯一改变 state 的方法是提交 action 操作。这样的架构使得我们的 RN 项目数据易于维护或扩容，改变数据的流程容易追踪和捕获。需要了解的具体关键字如下：

![775838-20190811183806290-1788696971.png][]

具体文档可以参考：[http://cn.redux.js.org/][http_cn.redux.js.org]  
当然你也可以使用其他第三方库实现类似的架构，比如 mobx、dva 等。

### 7. CSS-in-JS ###

除了 Redux 架构，RN 中还加入了 `CSS in JS` 的概念，将原本关注点分离的理念转移到了关注点混合上，使得我们可以在 JS 中写 CSS 代码，但这并不违背之前关注点分离的理念。

![775838-20190811183817614-2125565518.png][]

> 现在随着组件化概念的流行，对从组件层面维护 CSS 样式的需求日益增大，CSS-in-JS 就是在组件内部使用 JavaScript 对 CSS 进行了抽象，可以对其声明和加以维护。这样不仅降低了编写 CSS 样式带来的风险，也让开发变得更加轻松。它和 CSS Modules 的区别是不再需要 CSS 样式文件。

结合 JSX 语法，在 RN 中书写和维护 CSS 变得更加便捷，也是 Web 组件化不断发展的必然产物。

### 8. React Native 中 的 Flex 布局 ###

另外，在开发 RN 项目时，官方推荐使用的布局方式是 `Flex` 布局，因为 Flexbox 可以在不同屏幕尺寸上提供一致的布局结构，这也解决了跨平台布局呈现的问题。

![775838-20190811183827635-404226368.png][]

相比我们客户端使用的 Flex 布局，RN 中的 Flex 布局有稍许的不同，比如 flexDirection 的默认值是 column 而不是 row，flex 也只能指定一个数字值等。关于 Flex 布局的介绍可以参考：[Flex 布局教程：语法篇][Flex]、[Flex 布局教程：实例篇][Flex 1]

### 9. React Native 的热部署 ###

最后我们介绍下 RN 中的热部署，这也是选择 RN 开发 APP 的一个重要原因之一。相比传统 APP 更新，大都需要第三方审核的流程，而这个流程可能会很慢或者不及时，遇到需要紧急修复的 bug 无法及时更新而导致直接的经济损失是很常见的问题，而 RN 的热部署可以一定程度上解决或减轻这一问题的影响。那么其实现原理是怎样的呢？

![775838-20190811183838915-821439535.png][]

上图左侧部分便展现了用户访问 RN 应用的热部署流程。首先用户访问 APP，APP 会向 RN 服务器请求资源包，如果资源包未更新则读取本地缓存资源，如果开发者为了解决 bug 重新更新了服务器上的资源包，那么 APP 拉去后会缓存起来，待用户下次进入后再进行更新。这便是 RN 热部署的流程。

在本地开发时，我们不难发现当我们在运行起来的 RN 项目中修改代码时，再次从 APP 进入 RN 页面，本地终端会再次加载一次更新后的资源数据，这也是 RN 热部署的体现。

同样线上的热部署则需要将我们打包后的 RN 资源上传到服务器上供 APP 读取来实现。

![775838-20190811183423157-364219162.png][]

我们可以手动执行打包、上传发布流程，当然为了减少人为干预，实现前端自动化，我们也可以把这块流程交给构建平台去自动打包部署，这便需要搭建一个后台系统进行管理。

## 结语 ##

本文介绍了 React Native 混合开发的原理与实现逻辑。只有先了解原理，才能高效的投入项目的开发中，而关于 RN 自身的功能实现大家可以直接阅读官方文档，这里我也额外提供一些关于 RN 的参考资料：

*  [React-Native学习指南][React-Native]
 *  [分享 50 个完整的 React Native 项目][50 _ React Native]
 *  [给所有开发者的React Native详细入门指南][React Native]
 *  [30天学习React Native教程][30_React Native]

注：本文部分图例参考自《React Native 移动开发实战》一书

转载于:https://www.cnblogs.com/luozhihao/p/11335948.html

[Link 1]: http://www.cnblogs.com/luozhihao
[Link 2]: https://zhuanlan.zhihu.com/font-end
[775838-20190811183611912-787853985.jpg]: /images/20230808/fcdc464e952f454186b77c0adfaafcc1.png
[775838-20190811183636887-1167159897.png]: /images/20230808/5c3ffb2f61ae4b90b2d16f39c82e652f.png
[775838-20190811183719406-1031032277.png]: /images/20230808/451ea0e3e13e4be0a82b8081088e71da.png
[775838-20190811183732389-156585251.png]: /images/20230808/dffbc7fce58546e79dc73a8a611574eb.png
[775838-20190811183744665-763357085.png]: /images/20230808/808b2b3b3bb2466287ee24b4875ec30c.png
[775838-20190811193611867-1708510242.png]: /images/20230808/7320fbcd315742baad6fea1327f92aa2.png
[775838-20190811183806290-1788696971.png]: /images/20230808/0f3516b07bf344c18f315677c25bb1bf.png
[http_cn.redux.js.org]: http://cn.redux.js.org/
[775838-20190811183817614-2125565518.png]: /images/20230808/68e3374661b44777bde93ceeb58d93ea.png
[775838-20190811183827635-404226368.png]: /images/20230808/e0cced21398a4540b5226a4543f39d29.png
[Flex]: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
[Flex 1]: http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
[775838-20190811183838915-821439535.png]: /images/20230808/f1b9ce944ac04793b26c6c08705bc166.png
[775838-20190811183423157-364219162.png]: /images/20230808/2e4f1afbcbbb46d696f0beda5e8c4db9.png
[React-Native]: https://github.com/reactnativecn/react-native-guide
[50 _ React Native]: https://juejin.im/post/58f37cb361ff4b0058f9824a
[React Native]: https://juejin.im/post/5898388b128fe1006cb943e3
[30_React Native]: https://github.com/fangwei716/30-days-of-react-native