【React Native】源码分析之Native UI的封装和管理

转载请注明出处：http://blog.csdn.net/u013531824/article/details/54020287，谢谢。

  ReactNative作为使用React开发Native应用的新框架，随着时间的增加，无论是社区还是个人对她的兴趣与日递增。此文目的是希望和大家一起欣赏一下ReactNative的部分源码。阅读源码好处多多，让攻城狮更溜的开发ReactNative应用的同时，也能梳理RN项目的设计思路，增加自己的内功修为，^_^。
  好的，就让我们轻松的开始吧。此篇是以Android平台源码分析为主，分享Native UI的封装和管理，重点涉及react-native源码中com.facebook.react.uimanager包中的相关类。
  通过下图对剖析的源码部分有个整体的概念，这是从下向上的调用关系。

  因为上层是向我们直接暴露的类，所以我们采用从上向下的分析过程，以ReactImageManager作为切入点进行分析。两个原因

• 图片是任何应用都必不可少的元素
• ReactImageView封装Facebook的Fresco图片框架，在剖析的过程中可同时梳理RN封装第三方框架的过程。

首先看一下ReactImageManager的代码实现:

@ReactModule(name = ReactImageManager.REACT_CLASS)
public class ReactImageManager extends SimpleViewManager<ReactImageView> {
   
  protected static final String REACT_CLASS = "RCTImageView";

  @Override
  public String getName() {
    return REACT_CLASS;
  }

  @Override
  public ReactImageView createViewInstance(ThemedReactContext context) {
    return new ReactImageView(
        context,
        getDraweeControllerBuilder(),
        getCallerContext());
  }
 }

  此处的ReactImageView就是ReactNative封装的图像处理相关的Native UI ，他的定义如下，使用过Facebook的Fresco图片开源项目的开发者应该会很熟悉GenericDraweeView类，继承她实现自己的图片展示逻辑。

public class ReactImageView extends GenericDraweeView {
   }

  通过ReactImageManager对本地ReactImageView进行管理。

知识点一：封装React可以使用的Native UI View，需要创建一个ViewManager进行管理。

  可以说这是标准ViewManager的官方推荐的写法，继承SimpleViewManager重写getName和createViewInstance方法，但是此处我们不禁会问–为什么？为什么要重写这两个方法，在源码中是什么用的调用关系，导致了这种结果。

下面看一张ViewManager的继承关系图：

  上图可以清晰反馈ReactImageManager的继承关系，最终定位到ViewManager类，同时SimpleViewManager负责对View的管理，而对ViewGroup的封装需要继承ViewGroupManager实现。也许上面问题的答案我们可以在他的超父类ViewManager中找到答案。

看一下ViewManager的类图可以给我们什么信息：

OK~，ViewManager中定义我们关心的getName和createViewInstance抽象方法。而createViewInstance的使用是在createView方法中，看源码：

/**
 *  ViewManager类源码
 *  Creates a view and installs event emitters on it.
 */
public final T createView(
    ThemedReactContext reactContext,
    JSResponderHandler jsResponderHandler) {
  T view = createViewInstance(reactContext);
  addEventEmitters(reactContext, view);
  if (view instanceof ReactInterceptingViewGroup) {
    ((ReactInterceptingViewGroup) view).setOnInterceptTouchEventListener(jsResponderHandler);
  }
  return view;
}

此方法完成两件事：

1. 创建本地View对象，通过抽象方法createViewInstance（reactContext）完成，所以子类必须实现这个方法，否则View对象为空。
2. 通过抽象方法addEventEmitters()注册事件的类型。（比如我们自定义的监听事件&#