React Native Android之原生UI组件动态addView不显示问题解决

版权声明：本文为博主原创文章，未经博主允许不得转载。

转载请表明出处：http://www.jianshu.com/p/a6c5042c5ce8

[TOC]

在如今的App中，已经有成千上万的原生UI部件了——其中的一些是平台的一部分，另一些可能来自于一些第三方库，而且可能你自己还收藏了很多。React Native已经封装了大部分最常见的组件，譬如ScrollView和TextInput，但不可能封装全部组件。而且，说不定你曾经为自己以前的App还封装过一些组件，React Native肯定没法包含它们。幸运的是，在React Naitve应用程序中封装和植入已有的组件非常简单。但在实施的过程中往往会发生一些小状况，如今天分享的这个问题，当原生UI组件动态addView时在界面中不显示。
（下面React Native 简称为RN）

还原场景

在下面代码中，我们定义了一个原生的控件，这个组件同样也可用于RN。

public class RCTVideoLayout extends RelativeLayout {

    public RCTVideoLayout(Context context) {
        this(context, null);
    }

    public RCTVideoLayout(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public RCTVideoLayout(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context);
    }

    /**
     * 初始化View
     *
     * @param context
     */
    private void initView(Context context) {
        View rootView = View.inflate(context, R.layout.video_layout, null);
        addView(rootView);
    }

    /**
     * 动态添加View
     * @param str
     */
    public void autoAddView(String str){
        Button button = new Button(getContext());
        button.setText(str);
        addView(button);
    }

在这段上面的autoAddView函数中就是一个动态添加View的操作，如果这段代码在原生中执行是没问题的，但在RN中动态调用，会导致无论addView多少次都没问题，但在RN中每次调用均在UI中看不出有什么明显变化，通过断点也是没发现问题所在，那么究竟是什么原因导致的呢，下面我给大家分析一下。

利用工具分析问题所在

发生如此诡异的情况，该怎么分析呢？Android Studio中有个工具Layout inspector，这个工具可以快速对手机上面的界面做分析。

• Android Studio打开任意工程后，按照如下图所示：
  WechatIMG11

• 等待几秒后，会自动打开分析界面：

屏幕快照 2017-09-06 上午11.06.47.png

• 这个界面是一个Demo工程，里面同样也是用RN调用原生封装的组件，但同样的情况是调用了原生addView后，并没有在UI上看到

• 现在把所有的层级打开后，发现原生的确已经addView进去了，只不过他的height和 width 都是0，所以这样就能解释为什么我们动态添加View后看不到UI变化。

  WechatIMG8

解决方案

• 从上图中可以分析得到，无论我们addView多少次，所产生的View都是0高0宽，这个明显就是没有让ViewGroup去测量子控件。现在原因已经明了，那么如何解决这种问题呢？那当然是让ViewGroup每次都自己测量子控件的高宽咯，我们回到刚才的自定义ViewGroup中的代码中，添加如下代码：

  //以下代码修复通过动态 addView 后看不到的问题
  
  @Override
  public void requestLayout() {
      super.requestLayout();
      post(measureAndLayout);
  }
  
  private final Runnable measureAndLayout = new Runnable() {
      @Override
      public void run() {
          measure(
                  MeasureSpec.makeMeasureSpec(getWidth(), MeasureSpec.EXACTLY),
                  MeasureSpec.makeMeasureSpec(getHeight(), MeasureSpec.EXACTLY));
          layout(getLeft(), getTop(), getRight(), getBottom());
      }
  };
  

• 以上代码中所作的事情就是每次addView后，在ViewGroup源码中可看到addView后，实际调用requestLayout()函数，如下图所示：

屏幕快照 2017-09-06 上午11.21.06.png

• 添加代码后，我们再次运行程序，再次通过Layout inspector工具来看看效果：

  WechatIMG9

• 可以发现这回终于有显示了，再看到hight和width都有对应的值了。

总结

以上是我在封装原生控件给RN调用时遇到的一个问题，欢迎大家支持。