React Native Android之原生UI组件动态addView不显示问题解决
版权声明：本文为博主原创文章，未经博主允许不得转载。
转载请表明出处：http://08643.cn/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
- 等待几秒后，会自动打开分析界面：
这个界面是一个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()函数，如下图所示：
-
添加代码后，我们再次运行程序，再次通过
Layout inspector工具来看看效果：WechatIMG9 可以发现这回终于有显示了，再看到hight和width都有对应的值了。
总结
以上是我在封装原生控件给RN调用时遇到的一个问题，欢迎大家支持。
