【ReactNative】源码分析之NativeUI的封装和管理.docVIP

【React Native】源码分析之Native UI的封装和管理 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 SimpleViewManagerReactImageView { 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方法，但是此处我们不禁会问–为什么？为什么要重写这两个方法，在源码中是什么用的调用关系，导致了这种结果。 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; } 此方法完成两件事： 创建本地View对象，通过抽象方法createViewInstance（re