学习UI封装和管理---如何出现View

参考1:https://www.cnblogs.com/zhang740/p/5978323.html
参考2:http://lib.csdn.net/article/reactnative/57263?knId=1440

react native 管理UI所需要的类


来源于网络

对与react native来说,主要就是创建View ,布局View,更新View和移除View(不包含动画)。React Native有一套自己的封装来管理这些操作,这个和Android SDK中管理View的方式有很大很大的区别。

render() {
       const { dispatch, router } = this.props
       return (
           
               
           
       )
   }

运行的结果:


运行的结果

以RN创建一个为例,这个过程怎么实现的?

首先有react解析Image节点,最终将解析出来的dom通过ReactNativeBaseComponent.js来与原生交互。例如mountComponent在组件挂载的时候调用,这里又回调用UIManager.createView,向原生发送一个创建View的消息。这里主要学习一下Android部分的原理,所以入口就从UIManagerModule开始。

在这之前先必须看一下ViewManger这个类的结构。


20170105112230972.png

ViewManger是为了RN和原生View交互设计的。 JS中所有的View相关的标签都有对应的ViewManager和具体的不同实现。对应的就是ReactImageManager。他们通过getName()方法返回的字符串绑定在一起的。所有的ViewManger都会在程序启动的时候都会加载。

UIManagerModule.java

这个主要对接RN的接口,具体的实现在UIImplementation
其中createView方法这样的:

@ReactMethod
  public void createView(int tag, String className, int rootViewTag, ReadableMap props) {
  .....
    mUIImplementation.createView(tag, className, rootViewTag, props);
  }
UIImplementation.java

这个类是真正干活的类,功能很多,createView,updateView,measureLayout,dispatchViewUpdates等,其中createView如下:

 public void createView(int tag, String className, int rootViewTag, ReadableMap props) {
    ReactShadowNode cssNode = createShadowNode(className);
    ReactShadowNode rootNode = mShadowNodeRegistry.getNode(rootViewTag);
    cssNode.setReactTag(tag);
    cssNode.setViewClassName(className);
    cssNode.setRootNode(rootNode);
    cssNode.setThemedContext(rootNode.getThemedContext());

    mShadowNodeRegistry.addNode(cssNode);

    ReactStylesDiffMap styles = null;
    if (props != null) {
      styles = new ReactStylesDiffMap(props);
      cssNode.updateProperties(styles);
    }

    handleCreateView(cssNode, rootViewTag, styles);
  }

protected void handleUpdateView(
      ReactShadowNode cssNode,
      String className,
      ReactStylesDiffMap styles) {
    if (!cssNode.isVirtual()) {
      mNativeViewHierarchyOptimizer.handleUpdateView(cssNode, className, styles);
    }
  }

在UIImplementation的createView中,先根据className来获取对应ViewaManger,然后通过ViewaManger来创建的节点,更具rootViewTag来获取父节点。然后调用NativeViewHierarchyOptimizer的handleUpdateView方法,将创建的节点传入来创建具体的View。

ReactShadowNode是RN对view的一个特殊封装。RN将每一个View看作一个节点,节点包含哪一个View(className),父节点,子节点,布局信息等。Android中我们常说View树,那么在RN中可能就是节点树来。JS的Image标签就是创建一个LayoutShadowNode类型的节点。

NativeViewHierarchyOptimizer
public void handleCreateView(
      ReactShadowNode node,
      ThemedReactContext themedContext,
      @Nullable ReactStylesDiffMap initialProps) {
    ....
      mUIViewOperationQueue.enqueueCreateView(
          themedContext,
          node.getReactTag(),
          node.getViewClass(),
          initialProps);
    ....
  }

字面意思就是view层级优化。这个类其实什么也没做,它处在UIImplementation和UIViewOperationQueue中间,将UIImplementation对因的操作转化成代码上的具体操作并入队。

复制的一段话,说的很好

负责优化本地视图层次结构,同时仍然遵循JS指定的最终UI样式。 基本上,JS向我们发送了一个节点层次结构,虽然在JS中容易理解,但是直接转换为本地视图效率很低。 这个类位于UIManagerModule(直接接收来自JS的视图命令)和UIViewOperationQueue之间,它使本地视图层次上的实际操作入队。它能够从UIManagerModule获取指令,并将输出指令传递到本地视图层次结构,使用较少的视图,实现相同的效果。

UIViewOperationQueue
 public void enqueueCreateView(
      ThemedReactContext themedContext,
      int viewReactTag,
      String viewClassName,
      @Nullable ReactStylesDiffMap initialProps) {
    synchronized (mNonBatchedOperationsLock) {
      mNonBatchedOperations.addLast(
        new CreateViewOperation(
          themedContext,
          viewReactTag,
          viewClassName,
          initialProps));
    }
  }

JS对用的View操作都会转化程一个UIOperation,加入到队列中。加入队列后什么时候执行呢?UIViewOperationQueue.dispatchViewUpdates方法会遍历左右的UIOperation逐一执行,执行完后就清空队列了。

而createView被当作一个CreateViewOperation加入到队列当作。所以下一步直接转到CreateViewOperation的execute()方法,这里只有调用mNativeViewHierarchyManager.createView一行代码。

一些内置的操作:

ViewOperation:根据Tag,指定原生View去操作;
RemoveRootViewOperation:删除TootView的操作;
UpdatePropertiesOperation:更新属性操作;
UpdateLayoutOperation:更新Native View的位置和大小的操作;
ManageChildrenOperation:管理子视图操作;
RegisterAnimationOperation:注册动画的操作;
AddAnimationOperation : 增加动画的操作;
SetLayoutAnimationEnabledOperation:设置布局动画是否可用的操作
MeasureOperation:测量操作

NativeViewHierarchyManager

字面意思是View层级管理者。它就是用来管理View的层级关系的。添加子View,移除View,View布局具体的实现都在这里。

public void createView(
      ThemedReactContext themedContext,
      int tag,
      String className,
      @Nullable ReactStylesDiffMap initialProps) {
    ·····
    try {
      ViewManager viewManager = mViewManagers.get(className);
      View view = viewManager.createView(themedContext, mJSResponderHandler);
      mTagsToViews.put(tag, view);
      mTagsToViewManagers.put(tag, viewManager);
      view.setId(tag);
      if (initialProps != null) {
        viewManager.updateProperties(view, initialProps);
      }
    } finally {
      Systrace.endSection(Systrace.TRACE_TAG_REACT_VIEW);
    }
  ·····
  }

craeteView将View加入到NativeViewHierarchyManager的管理当中,此时的View只是一个View,节点树已经有了,但是没有加入到View树当中。RN还有ManageChildrenOperation,执行这个操作的时候才会调用NativeViewHierarchyManager.manageChildren(),才会真正的加入到View树当中。

最后经过一个UpdateLayoutOperation计算一下View的宽高和位置,这样View的位置和宽高就有了。然后交给Android系统去绘制,这样View就出来了。

你可能感兴趣的:(学习UI封装和管理---如何出现View)