ReactNative Android之原生UI组件动态addView不显示问题解决
ReactNative Android之原生UI组件动态addView不显示问题解决
版权声明:本文为博主原创文章,未经博主允许不得转载。
在如今的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
打开任意工程后,按照如下图所示:
等待几秒后,会自动打开分析界面:
![屏幕快照 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不显示问题解决的更多相关文章
- React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发
React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发 2016/09/23 | React Native技术文章 | Sky丶清| 4 条评论 | 1 ...
- Android开发 ---基本UI组件4:拖动事件、评分进度条、圆圈式进度条、进度条控制
Android开发 ---基本UI组件4 1.activity_main.xml 描述: 定义了一个按钮 <?xml version="1.0" encoding=" ...
- Android开发 ---基本UI组件3:单选按钮、多选按钮、下拉列表、提交按钮、重置按钮、取消按钮
Android开发 ---基本UI组件2 1.activity_main.xml 描述: 定义一个用户注册按钮 <?xml version="1.0" encoding=&q ...
- Android开发 ---基本UI组件2:图像按钮、单选按钮监听、多选按钮监听、开关
Android开发 ---基本UI组件2 1.activity_main.xml 描述: 定义一个按钮 <?xml version="1.0" encoding=" ...
- Android经常使用UI组件 - TextView
TextView是Android里面用的最多的UI组件,一般使用在须要显示一些信息的时候,其不能输入,仅仅能初始设定或者在程序中改动. 实例:TextViewDemo 执行效果: 代码清单: 布局文件 ...
- Android经常使用UI组件 - Button
button(Button)是Android其中一个经常使用的UI组件.非常小可是在开发中最经常使用到.一般通过与监听器结合使用.从而触发一些特定事件. Button继承了TextView.它的功能就 ...
- Android学习笔记⑦——UI组件的学习AdapterView相关1
AdapterView是一个非常重要的组件之一,他非常灵活,所以得好好学...AdapterView本身是一个抽象类,派生出来的子类用法也十分相似,只是界面有一定的区别,因此本节把他们归为一类 Ada ...
- Android学习笔记⑤——UI组件的学习TextView相关
TextView是一个强大的视图组件,直接继承了View,同时也派生出了很多子类,TextView其作用说白了就是在布局中显示文本,有点像Swing编程中的JLabel标签,但是他比JLabel强大的 ...
- Android学习笔记⑧——UI组件的学习AdapterView相关2
前面都是用ListView控件来配合Adapter做的一些实例,这次我们来见识一下GridView与Adapter之间的爱恨情仇.... GridView是用于在界面上按行.列分布的方式来显示多个的组 ...
随机推荐
- 爬虫(scrapy中调试文件)
在项目setting同级目录下创建py文件,代码如下: from scrapy.cmdline import execute import sys import os sys.path.append( ...
- 程序猿媛 九:Adroid zxing 二维码3.1集成(源码无删减)
Adroid zxing 二维码3.1集成 声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段. 转载请保留原文出处“http://my.oschina.net/gluoyer/blog”, ...
- hosts文件路径及文件介绍
路径:WINDOWS/system32/drivers/etc/hosts 内容127.0.0.1 localhost 一. Hosts文件的位置 很多用户都知道在Window系统中有个H ...
- python元类理解2
恩,对元类理解又有新的收获,其实类似于装饰器,只不过装饰器是修饰函数,元类用来定制一个类. 代码如下,这是一个使用了函数做元类传递给类: input: def upper_attr(class_nam ...
- 网易云音乐APP分析
网易云音乐-感受音乐的力量 你选择的产品是? 网易云音乐 为什么选择该产品作为分析? 之前用的一直是QQ音乐,但是有一天一个朋友分享了一首网易云上的音乐(顺便分享一下歌名:Drop By Drop) ...
- scrapy crawl 源码修改 爬虫多开
import os from scrapy.commands import ScrapyCommand from scrapy.utils.conf import arglist_to_dict fr ...
- mongodb监控工具mongostat
mongostat的使用及命令详解 mongostat是mongodb自带的状态检测工具,在命令行下使用,会间隔固定时间获取mongodb的当前运行状态,并输出. 1.常用命令格式: mongosta ...
- plsql启动提示监听服务无法连接
话说现在用的oracle少了,本人菜鸟一个,但是我真心的没有感觉到它用的少了,今天入了一个新项目,数据库使用的还是oracle,经理二话不说的给了一些东西,说了让一句你把环境啥地 配置一下,然后走人了 ...
- 【JavaScript中typeof、toString、instanceof、constructor与in】
JavaScript中typeof.toString.instanceof.constructor与in JavaScript 是一种弱类型或者说动态语言.这意味着你不用提前声明变量的类型,在程序运行 ...
- GIT入门笔记(19)GIT 小结
1.add和commit为什么Git添加文件需要add,commit一共两步呢?因为commit可以一次提交很多文件,所以你可以多次add不同的文件,比如:$ git add file1.txt$ g ...