如果你正准备从头开始制作一个新的应用,那么 React Native 会是个非常好的选择。但如果你只想给现有的原生应用中添加一两个视图或是业务流程,React Native 也同样不在话下。只需简单几步,你就可以给原有应用加上新的基于 React Native 的特性、画面和视图等。

       关于集成到现有原生应用步骤,RN中文网文档已经将的非常清楚,不清楚的可以去参考。在这里我主要说一下,集成到现有原生应用与初始化一个完整的RN项目之间的异同。

主要区别在于,完整RN项目的具体实现是在MainApplication和MainActivity中,集成RN的具体实现是在自定义的Activity中,无需再Application中实现。

完整RN项目

我们初始化一个新的项目后,MainApplication和MainActivity代码实现如下:

RN怎么和Android 原生交互 rn和原生的区别_启动流程

集成RN到现有项目

自定义的Activity如下:

RN怎么和Android 原生交互 rn和原生的区别_自定义_02

RN怎么和Android 原生交互 rn和原生的区别_ReactNative_03

注意我在两种情况下标出的数字,他们分别是在两种情况下的配置,一一对应。

1.设置开发支持

2.此处为扩展Packages,自定义Package或者引用第三方(比如CodePush)需要在此提供

3.这里的index指向入口index.js,决定了RN的入口

4.这里的awesome必须对应“index.js”中的“AppRegistry.registerComponent()”的第一个参数

5.绑定生命周期等信息

现在,我们能清晰的看出两种情况下配置的区别,在实际开发过程中,只需要根据自己的情况对项目进行定制即可。


RN应用的启动流程分析

一句话概括启动流程:先是应用终端启动并创建应用上下文,应用上下文启动JS Runtime,进行布局,再由应用终端进行渲染,最后将渲染的View添加到ReactRootView上,最终呈现在用户面前。

完整RN项目

从ReactActivity源码入手

ReactActivity继承于Activity,并实现了它的生命周期方法。ReactActivity自己并没有做什么事情,所有的功能都由它的委托类ReactActivityDelegate来完成。

RN怎么和Android 原生交互 rn和原生的区别_自定义_04

在ReactNative的构造方法里,创建了ReactActivityDelegate,并且在onCreate方法里调用了ReactActivityDelegate的onCreate方法,接下来我们继续往下跟,执行了loadApp方法,这个方法很重要。

RN怎么和Android 原生交互 rn和原生的区别_启动流程_05

其实这段代码似曾相识,也就是我们原生集成RN中自定义Activity所实现的逻辑。

主要是核心类ReactRootView的创建,构建类ReactInstanceManager的配置,将ReactRootView设置到我们自定义的Activity上显示,最后startReactApplication

至此,我们就把两种集成方式联系起来,本质上都是走的一套代码。