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. System V IPC 之共享内存

    IPC 是进程间通信(Interprocess Communication)的缩写,通常指允许用户态进程执行系列操作的一组机制: 通过信号量与其他进程进行同步 向其他进程发送消息或者从其他进程接收消息 ...

  2. Android layout属性之gravity和layout_gravity

    1. gravity用来描述当前view的内容在view中的位置. gravity是控制其内容或者包含的views在该view(或view group)中的位置 2. layout_gravity是表 ...

  3. 多目标跟踪(MOT)论文随笔-SIMPLE ONLINE AND REALTIME TRACKING WITH A DEEP ASSOCIATION METRIC (Deep SORT)

    网上已有很多关于MOT的文章,此系列仅为个人阅读随笔,便于初学者的共同成长.若希望详细了解,建议阅读原文. 本文是tracking by detection 方法进行多目标跟踪的文章,在SORT的基础 ...

  4. C#基础(二)拆箱与装箱,循环与选择结构,枚举

    一.装箱和拆箱 装箱是将值类型转换为引用类型 eg: Int a=5; Object  o=a; 拆箱是将引用类型转换为值类型 eg: Int a=5; Object  o=a; Int b=(int ...

  5. react的基本使用,及常用填坑

    import React, { Component } from 'react'; import PropTypes from 'prop-types'; import './First.css'; ...

  6. 冲刺NO.7

    Alpha冲刺第七天 站立式会议 项目进展 前期数据库设计所遗留的问题在今天得到了部分的解决,对物资管理所需要的数据内容进行了细化,但并未开始编写物资相关模块,主要精力还是放在项目的核心功能(信用管理 ...

  7. Flask 文件和流

    当我们要往客户端发送大量的数据比较好的方式是使用流,通过流的方式来将响应内容发送给客户端,实现文件的上传功能,以及如何获取上传后的文件. 响应流的生成 Flask响应流的实现原理就是通过Python的 ...

  8. 怎么去理解JAVA中类与对象的关系

    首先要明确,在现实生活中,每一个物体都有自己的基本特征,专业一点也可以说成是属性有些甚至还有一定的行为.例如 汽车的特征:有车门.有轮胎.颜色各一等等,行为:有行驶,开车门,开车灯,等等.有这些属性和 ...

  9. 关于安装win7系统时出现0x0000007b电脑蓝屏代码的问题

    问题解析: 0X0000007B 这个错误网上都说是sata硬盘的什么引导模式的原因引起. 在网上查找了很久,大概引起错误的原因就是:sata和ide两种模式不同,前者可以装win7系统,后者是xp系 ...

  10. day-4 python多进程编程知识点汇总

    1. python多进程简介 由于Python设计的限制(我说的是咱们常用的CPython).最多只能用满1个CPU核心.Python提供了非常好用的多进程包multiprocessing,他提供了一 ...