如果你正准备从头开始制作一个新的应用,那么 React Native 会是个非常好的选择。但如果你只想给现有的原生应用中添加一两个视图或是业务流程,React Native 也同样不在话下。只需简单几步,你就可以给原有应用加上新的基于 React Native 的特性、画面和视图等。
关于集成到现有原生应用步骤,RN中文网文档已经将的非常清楚,不清楚的可以去参考。在这里我主要说一下,集成到现有原生应用与初始化一个完整的RN项目之间的异同。
主要区别在于,完整RN项目的具体实现是在MainApplication和MainActivity中,集成RN的具体实现是在自定义的Activity中,无需再Application中实现。
完整RN项目
我们初始化一个新的项目后,MainApplication和MainActivity代码实现如下:
集成RN到现有项目
自定义的Activity如下:
注意我在两种情况下标出的数字,他们分别是在两种情况下的配置,一一对应。
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来完成。
在ReactNative的构造方法里,创建了ReactActivityDelegate,并且在onCreate方法里调用了ReactActivityDelegate的onCreate方法,接下来我们继续往下跟,执行了loadApp方法,这个方法很重要。
其实这段代码似曾相识,也就是我们原生集成RN中自定义Activity所实现的逻辑。
主要是核心类ReactRootView的创建,
构建类ReactInstanceManager的配置,将ReactRootView设置到我们自定义的Activity上显示,最后
startReactApplication。
至此,我们就把两种集成方式联系起来,本质上都是走的一套代码。