一、React Native 的大体结构
1、一图胜千言，我们看一个整体框架图
如上图，React Native的跨平台主要由三层构成，其中C++作为中间设配层桥接，从而实现JS和Native的双向通讯。
- Js层：处理事件分发及UI Layout，平常开发最常用的。通用jsx来写业务代码，通过flexbox来实现布局。
- C++层：c++层最主要是封装了JavaScriptCore，它是一个全新的支持ES6的webKit。解析js文件是通过JSCExectutor进行的，Bridge连接了java与js之间的通信。
- Java层：java层就是app原生代码，C++层的javascript解析器javascriptCore来执行js代码，从而构建原生UI等。java层依赖于众多优秀开源库，在图片处理使用的是Fresco，网络通信使用的是okhttp，在java层原生的功能均封装为Module，如Toast和Log等。
其实RN整体框架的目的就为了让Native端可以解析，执行JS脚本
2、相关概念 WebKit、JavaScriptCore、V8
1、WebKit
WebKit是一个开源浏览器引擎（Safari、Chrome等使用）、类似的还有Gecko（Mozilla Firefox 等使用）和Trident（IE 使用）
其中的JavaScript引擎，负责javaScript的解释、编译、执行。 各家重写了这部分，实现自己的JS引擎，例如Google的 V8引擎。
2、JavaScriptCore
JavaScriptCore是webKit中默认的JS引擎，Google使用V8代替JavaScriptCore作为其chromium的JS引擎（Node.js的引擎也是V8）。 在RN框架中，IOS上直接使用内置的javascriptcore、Android中使用的是jsc.so。 而Weex使用的则是V8引擎；
二、实现原理
-
UI层 View： react native中所有的标签都不是真实控件，Js代码中所写的控件，都作为一种Map中的Key值。JS端通过这个Key组合的Dom，放到Virtual Dom这个虚拟的JS数据结构中，然后通过JSBridge传递到Native，Native端会解析这个Dom，从而得到对应的Native控件。比如JS中的，在Android对应为ViewGroup，对应TextView
-
API Module： 原生端提供的各种Module模块参数，包括ModuleID、MethodID、Params，和JS端提供的各种Module模块参数，都会在C++层的Bridge 中注册。 Js/Java 调用的ModuleID、MethodID、Params，通过Birdge映射，转换成Java/Js对应的ModuleID、MethodID、Params，实现两端方法的互调。通信的数据和指令，在中间层会专成Json传输。
-
消息循环、线程模型： React Native 为JS引擎创建了一个独立的线程，在Android上主要由三个线程，每个线程都由与其绑定的消息队列
- UI线程：即Android中的主线程，负责绘制UI以及监听用户操作。
- Native线程：负责执行C++代码，该线程主要负责Java与C++的通信。
- JS线程：负责解释执行JS。
三个线程的交互主要借助Android 的Handler来完成。
