当你拿到React Native的源码的时候，它的目录结构是这样的：jni：ReactNative的好多机制都
是由C、C++实现的，这部分便是用来载入SO库。perftest：测试配置proguard：混淆quicklo
g：log输出react：ReactNative源码的主要内容，也是我们分析的主要内容。systrace：sy
stem traceyoga：瑜伽？哈哈，并不是，是facebook开源的前端布局引擎总体来看，整套React
Native框架分为三层，如下图所示：Java层：该层主要提供了Android的UI渲染器UIManager
（将JavaScript映射成Android Widget）以及一些其他的功能组件（例如：Fresco、Okh
ttp）等。C++层：该层主要完成了Java与JavaScript的通信以及执行JavaScript代码两件工
作。JavaScript层：该层提供了各种供开发者使用的组件以及一些工具库。注：JSCore，即JavaScr
iptCore，JS解析的核心部分，IOS使用的是内置的JavaScriptCore，Androis上使用的是
https://webkit.org 家的jsc.so。通过上面的分析，我们理解了React Native的
框架结构，除此之外，我们还要理解整套框架里的一些重要角色，如下所示：ReactContext：ReactCon
text继承于ContextWrapper，是ReactNative应用的上下文，通过getContext()
去获得，通过它可以访问ReactNative核心类的实现。ReactInstanceManager：React
InstanceManager是ReactNative应用总的管理类，创建ReactContext、Catal
ystInstance等类，解析ReactPackage生成映射表，并且配合ReactRootView管理Vi
ew的创建与生命周期等功能。CatalystInstance：CatalystInstance是ReactNa
tive应用Java层、C++层、JS层通信总管理类，总管Java层、JS层核心Module映射表与回调，三端
通信的入口与桥梁。NativeToJsBridge：NativeToJsBridge是Java调用JS的桥梁，
用来调用JS Module，回调Java。JsToNativeBridge：JsToNativeBridge是
JS调用Java的桥梁，用来调用Java Module。JavaScriptModule：JavaScript
Module是JS Module，负责JS到Java的映射调用格式声明，由CatalystInstance统一
管理。NativeModule：NativeModule是ava Module，负责Java到Js的映射调用格
式声明，由CatalystInstance统一管理。JavascriptModuleRegistry：Java
scriptModuleRegistry是JS Module映射表，NativeModuleRegistry是
Java Module映射表以上便是整套框架中关键的角色，值得一提的是，当页面真正渲染出来以后，它实际上还是N
ative代码，React Native的作用就是把JavaScript代码映射成Native代码以及实现两端
的通信，所以我们在React Native基础框架搭建的过程中，指导思路之一就是弱化Native与RN的边界与
区别，让业务开发组感受不到两者的区别，从而简化开发流程。好，有了对React Native框架的整体理解，我们
来继续分析一个RN页面是如何启动并渲染出来的，这也是我们关心的主要问题。后续的基础框架的搭建、JS Bundl
e分包加载、渲染性能优化等都会围绕着着一块做文章。