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

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

转载请表明出处:http://www.cnblogs.com/cavalier-/p/7483871.html

在如今的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打开任意工程后,按照如下图所示:

  • 等待几秒后,会自动打开分析界面:

    ![屏幕快照 2017-09-06 上午11.06.47](http://oupvrckn2.bkt.clouddn.com/屏幕快照 2017-09-06 上午11.06.47.png)

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

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

解决方案

  • 从上图中可以分析得到,无论我们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](http://oupvrckn2.bkt.clouddn.com/屏幕快照 2017-09-06 上午11.21.06.png)

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

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

总结

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

ReactNative Android之原生UI组件动态addView不显示问题解决的更多相关文章

  1. React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发

    React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发   2016/09/23 |  React Native技术文章 |  Sky丶清|  4 条评论 |  1 ...

  2. Android开发 ---基本UI组件4:拖动事件、评分进度条、圆圈式进度条、进度条控制

    Android开发 ---基本UI组件4 1.activity_main.xml 描述: 定义了一个按钮 <?xml version="1.0" encoding=" ...

  3. Android开发 ---基本UI组件3:单选按钮、多选按钮、下拉列表、提交按钮、重置按钮、取消按钮

    Android开发 ---基本UI组件2 1.activity_main.xml 描述: 定义一个用户注册按钮 <?xml version="1.0" encoding=&q ...

  4. Android开发 ---基本UI组件2:图像按钮、单选按钮监听、多选按钮监听、开关

    Android开发 ---基本UI组件2 1.activity_main.xml 描述: 定义一个按钮 <?xml version="1.0" encoding=" ...

  5. Android经常使用UI组件 - TextView

    TextView是Android里面用的最多的UI组件,一般使用在须要显示一些信息的时候,其不能输入,仅仅能初始设定或者在程序中改动. 实例:TextViewDemo 执行效果: 代码清单: 布局文件 ...

  6. Android经常使用UI组件 - Button

    button(Button)是Android其中一个经常使用的UI组件.非常小可是在开发中最经常使用到.一般通过与监听器结合使用.从而触发一些特定事件. Button继承了TextView.它的功能就 ...

  7. Android学习笔记⑦——UI组件的学习AdapterView相关1

    AdapterView是一个非常重要的组件之一,他非常灵活,所以得好好学...AdapterView本身是一个抽象类,派生出来的子类用法也十分相似,只是界面有一定的区别,因此本节把他们归为一类 Ada ...

  8. Android学习笔记⑤——UI组件的学习TextView相关

    TextView是一个强大的视图组件,直接继承了View,同时也派生出了很多子类,TextView其作用说白了就是在布局中显示文本,有点像Swing编程中的JLabel标签,但是他比JLabel强大的 ...

  9. Android学习笔记⑧——UI组件的学习AdapterView相关2

    前面都是用ListView控件来配合Adapter做的一些实例,这次我们来见识一下GridView与Adapter之间的爱恨情仇.... GridView是用于在界面上按行.列分布的方式来显示多个的组 ...

随机推荐

  1. 爬虫(scrapy中调试文件)

    在项目setting同级目录下创建py文件,代码如下: from scrapy.cmdline import execute import sys import os sys.path.append( ...

  2. 程序猿媛 九:Adroid zxing 二维码3.1集成(源码无删减)

    Adroid zxing 二维码3.1集成 声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段. 转载请保留原文出处“http://my.oschina.net/gluoyer/blog”, ...

  3. hosts文件路径及文件介绍

    路径:WINDOWS/system32/drivers/etc/hosts 内容127.0.0.1       localhost 一. Hosts文件的位置 很多用户都知道在Window系统中有个H ...

  4. python元类理解2

    恩,对元类理解又有新的收获,其实类似于装饰器,只不过装饰器是修饰函数,元类用来定制一个类. 代码如下,这是一个使用了函数做元类传递给类: input: def upper_attr(class_nam ...

  5. 网易云音乐APP分析

    网易云音乐-感受音乐的力量 你选择的产品是?  网易云音乐 为什么选择该产品作为分析? 之前用的一直是QQ音乐,但是有一天一个朋友分享了一首网易云上的音乐(顺便分享一下歌名:Drop By Drop) ...

  6. scrapy crawl 源码修改 爬虫多开

    import os from scrapy.commands import ScrapyCommand from scrapy.utils.conf import arglist_to_dict fr ...

  7. mongodb监控工具mongostat

    mongostat的使用及命令详解 mongostat是mongodb自带的状态检测工具,在命令行下使用,会间隔固定时间获取mongodb的当前运行状态,并输出. 1.常用命令格式: mongosta ...

  8. plsql启动提示监听服务无法连接

    话说现在用的oracle少了,本人菜鸟一个,但是我真心的没有感觉到它用的少了,今天入了一个新项目,数据库使用的还是oracle,经理二话不说的给了一些东西,说了让一句你把环境啥地 配置一下,然后走人了 ...

  9. 【JavaScript中typeof、toString、instanceof、constructor与in】

    JavaScript中typeof.toString.instanceof.constructor与in JavaScript 是一种弱类型或者说动态语言.这意味着你不用提前声明变量的类型,在程序运行 ...

  10. GIT入门笔记(19)GIT 小结

    1.add和commit为什么Git添加文件需要add,commit一共两步呢?因为commit可以一次提交很多文件,所以你可以多次add不同的文件,比如:$ git add file1.txt$ g ...