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

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

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

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

[TOC]

在如今的App中,已经有成千上万的原生UI部件了——其中的一些是平台的一部分,另一些可能来自于一些第三方库,而且可能你自己还收藏了很多。React Native已经封装了大部分最常见的组件,譬如ScrollViewTextInput,但不可能封装全部组件。而且,说不定你曾经为自己以前的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打开任意工程后,按照如下图所示:
    React Native Android之原生UI组件动态addView不显示问题解决_第1张图片
    WechatIMG11
  • 等待几秒后,会自动打开分析界面:
React Native Android之原生UI组件动态addView不显示问题解决_第2张图片
屏幕快照 2017-09-06 上午11.06.47.png
  • 这个界面是一个Demo工程,里面同样也是用RN调用原生封装的组件,但同样的情况是调用了原生addView后,并没有在UI上看到

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

    React Native Android之原生UI组件动态addView不显示问题解决_第3张图片
    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()函数,如下图所示:

React Native Android之原生UI组件动态addView不显示问题解决_第4张图片
屏幕快照 2017-09-06 上午11.21.06.png
  • 添加代码后,我们再次运行程序,再次通过Layout inspector工具来看看效果:

    React Native Android之原生UI组件动态addView不显示问题解决_第5张图片
    WechatIMG9
  • 可以发现这回终于有显示了,再看到hight和width都有对应的值了。

总结

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

你可能感兴趣的:(React Native Android之原生UI组件动态addView不显示问题解决)