react-native源码分析系列五 绘制js组件

上篇分析了负责分发touch的ReatRootView,这篇文章继续分析view的绘制。

react-native绘制view的思路是将js写的控件映射到native的控件，通过addView之类的函数将js的控件添加到reactRootView.

首先看一个我个人项目中的例子。ui长这样。

用ddms的hierarchy view抓一下看一下。

可以看到有ReactDrawerLayout ReactImageView ReactTextView等，这些都是java的控件。因此我们看到js写的界面

全都被解析成了native的对应控件。具体是怎么实现的呢？

答案在这个类UIManagerModule.java.

/**

 * <p>Native module to allow JS to create and update native Views.</p>

 * <h2>== Transactional Requirement ==</h2>

 * A requirement of this class is to make sure that transactional UI updates occur all at, meaning

 * that no intermediate state is ever rendered to the screen. For example, if a JS application

 * update changes the background of View A to blue and the width of View B to 100, both need to

 * appear at once. Practically, this means that all UI update code related to a single transaction

 * must be executed as a single code block on the UI thread. Executing as multiple code blocks

 * could allow the platform UI system to interrupt and render a partial UI state. 

 *     //这里说 js的一批变化必须在java层要一起处理 不能出现中间态

 * <p>To facilitate this, this module enqueues operations that are then applied to native view

 * hierarchy through { @link NativeViewHierarchyManager} at the end of each transaction.

 * <h2>== CSSNodes ==</h2>

 * In order to allow layout and measurement to occur on a non-UI thread, this module also

 * operates on intermediate CSSNode objects that correspond to a native view. These CSSNode are able

 * to calculate layout according to their styling rules, and then the resulting x/y/width/height of

 * that layout is scheduled as an operation that will be applied to native view hierarchy at the end

 * of current batch.     //js通过操作cssnode来操作view 计算好全部的cssnode后再统一刷新ui(mainthread不能做耗时的工作

 */

public UIManagerModule(ReactApplicationContext reactContext, List<ViewManager> viewManagerList) {

  super(reactContext);

  mViewManagers = new ViewManagerRegistry(viewManagerList);               //各种控件的manager

  mEventDispatcher = new EventDispatcher(reactContext);                       //这个上篇文章见过 dispatch touch等事件的

  mNativeViewHierarchyManager = new NativeViewHierarchyManager(

     mAnimationRegistry, mViewManagers ) ;                                                   //统一管理视图变化

  mOperationsQueue = new UIViewOperationQueue(reactContext,this,mNativeViewHierarchyManager,

     mAnimationRegistry);                                                                             //js发过来的operation统一处理

  mNativeViewHierarchyOptimizer = new NativeViewHierarchyOptimizer(mOperationsQueue,

     mShadowNodeRegistry);

  DisplayMetrics displayMetrics = reactContext.getResources().getDisplayMetrics();

  DisplayMetricsHolder.setDisplayMetrics(displayMetrics);

  mModuleConstants = UIManagerModuleConstantsHelper.createConstants(d