ReactNative源码分析之ReactRootView

最新推荐文章于 2022-10-26 20:32:15 发布

ki4Coder

最新推荐文章于 2022-10-26 20:32:15 发布

阅读量665

点赞数

分类专栏： ReactNative源码分析文章标签： android react native 小程序 android studio java

本文链接：https://blog.csdn.net/ki4yous/article/details/105864026

版权

本文分析了ReactNative版本0.61.5中的ReactRootView，它作为FrameLayout实现，是React应用的入口。ReactRootView的加载流程包括：创建、onMeasure方法中attach到ReactInstanceManager并执行runApplication。UI事件处理部分简要提及，详细分析见相关文章链接。startReactApplication方法用于在视图创建后启动React应用。总结了ReactRootView的关键功能：View的attach、ReactContext的创建和事件处理。

摘要由CSDN通过智能技术生成

当前分析的ReactNative版本为0.61.5:

首先来看ReactRootView的定义：

/**
 * Default root view for catalyst apps. Provides the ability to listen for size changes so that a UI
 * manager can re-layout its elements. It delegates handling touch events for itself and child views
 * and sending those events to JS by using JSTouchDispatcher. This view is overriding {@link
 * ViewGroup#onInterceptTouchEvent} method in order to be notified about the events for all of its
 * children and it's also overriding {@link ViewGroup#requestDisallowInterceptTouchEvent} to make
 * sure that {@link ViewGroup#onInterceptTouchEvent} will get events even when some child view start
 * intercepting it. In case when no child view is interested in handling some particular touch
 * event, this view's {@link View#onTouchEvent} will still return true in order to be notified about
 * all subsequent touch events related to that gesture (in case when JS code wants to handle that
 * gesture).
 */
public class ReactRootView extends FrameLayout implements RootView, ReactRoot {
   }

通过定义，我们看到它本质上是一个 FrameLayout , 同时实现了RootView和ReactRoot接口。

先来看看ReactRoot提供的主要功能：
1.获取appProperties。react app启动时传入的参数;
2. 设置获取RootViewTag；
3. runApplication。这个是最终JS启动运行的入口；
4. onStage，这个后面再说；

一、ReactRootView加载流程

首先ReactRootVieiw本质是个FrameLayout，它的创建过程和一般的View 创建，初始化过程一样，看下它的onMeasure方法：

@Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
   
    if (mUseSurface) {
   
      super.onMeasure(widthMeasureSpec, heightMeasureSpec);
      return;
    }

    Systrace.beginSection(TRACE_TAG_REACT_JAVA_BRIDGE, "ReactRootView.onMeasure");
    try {
   
      boolean measureSpecsUpdated =
          widthMeasureSpec != mWidthMeasureSpec || heightMeasureSpec != mHeightMeasureSpec;
      mWidthMeasureSpec = widthMeasureSpec;
      mHeightMeasureSpec = heightMeasureSpec;

      int width = 0;
      int height = 0;
      int widthMode = MeasureSpec.getMode(widthMeasureSpec);
      if (widthMode == MeasureSpec.AT_MOST || widthMode == MeasureSpec.UNSPECIFIED) {
   
        for (int i = 0; i < getChildCount(); i++) {
   
          View child = getChildAt(i);
          int childSize =
              child.getLeft()
                  + child.getMeasuredWidth()
                  + child.getPaddingLeft()
                  + child.getPaddingRight();
          width = Math.max(width, childSize);
        }
      } else {
   
        width = MeasureSpec.getSize(widthMeasureSpec);
      }
      int heightMode = MeasureSpec.getMode(heightMeasureSpec);
      if (heightMode == MeasureSpec.AT_MOST || heightMode == MeasureSpec.UNSPECIFIED