使用原生自定义View,setState刷新界面后UI不能正常显示

原创 2017年02月24日 16:27:56

背景

项目整合react native时,将原生的一个九宫格图片显示,封装成了RN控件,并提供了一个source属性

@ReactProp(name = "source")

问题

在js端使用该控件时,通过state初始化时给source赋值,然后,当添加图片是,通过setState刷新数据来刷新界面显示,理想状态下是,界面应该显示新增的图片,但是,当setState之后,控件上的图片就不显示了!!尝试着给该控件设置背景颜色,发现控件所占的空间位置还是有的。

解决方案

当遇到问题,首先想到的一定是到官网github上搜索资料,你遇到的问题可能别人也会遇到。

https://github.com/facebook/react-native/issues/4990

然后查看了ReactToolbar.java源码,你发现这么段代码:

private final Runnable mLayoutRunnable = new Runnable() {
    @Override
    public void run() {
      measure(
          MeasureSpec.makeMeasureSpec(getWidth(), MeasureSpec.EXACTLY),
          MeasureSpec.makeMeasureSpec(getHeight(), MeasureSpec.EXACTLY));
      layout(getLeft(), getTop(), getRight(), getBottom());
    }
  };

  @Override
  public void requestLayout() {
    super.requestLayout();

    // The toolbar relies on a measure + layout pass happening after it calls requestLayout().
    // Without this, certain calls (e.g. setLogo) only take effect after a second invalidation.
    post(mLayoutRunnable);
  }

代码注释说了,如果requestLayout之后没有调用post(mLayoutRunnable),那么setLogo等方法第二次调用的话是无效的,比如:通过setState修改logo。

通过以上的方法,我也在自定义View的requestLayout调用了post(mLayoutRunnable),就解决了setState刷新不显示的问题了。

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

QTableWidget设置

1. 将表格变为禁止编辑 在默认情况下,表格里的字符是可以更改的,比如双击一个单元格,就可以修改原来的内容,如果想禁止用户的这种操作,让这个表格对用户只读,可以这样:  tableWidget->...

记录QTreeView和QListView两个导致界面显示漂移的问题

问题现象: 1. 点击view会有一个当前选中项的显示,在view的显示区域内不滚动点击其他项是正常的,但是将当前选中项滑动出显示区域(显示区域看不到当前选中项)再次点击一个条目会出现这个条目如果是...
  • dell_tx
  • dell_tx
  • 2016年12月15日 08:56
  • 239

VS无法正常加载Wpf后台刷新ui的自定义控件

VS无法正常加载Wpf后台刷新ui的自定义控件今天,在用wpf制作一个UserControl被其他控件加载调用时遇到了一个问题,现在分享出来,给以后遇到这个问题的人解惑。 问题:就是这里使用了一个自...
  • HHSSDX
  • HHSSDX
  • 2017年02月24日 18:10
  • 419

React-Native自定义view显示(原生端)

自定义view: 自己写原生的view显示在RN界面上。 这次主要是项目需要绘制一张大图,里面有很多节点和线,如果使用单纯RN提供的view去做,需要的内存不够(量级在K以上),所以需要想办法在一...
  • pz789as
  • pz789as
  • 2016年09月06日 10:59
  • 2740

Android界面美化 -- 使用自定义Toast布局替代原生布局

Android自带的Toast实现了一个简单的消息提示框功能。虽然非常好用,但显示效果不佳,本文介绍如何对Toast的界面进行美化。...
  • ccpat
  • ccpat
  • 2015年09月08日 20:38
  • 12579

Android使用handler和Runnable结合,自定义View更新UI的Demo

前三周在修改android4.2锁屏UI,刚做android好多知识不会啊,里面有个动画效果是一个jian...

UI 一一 自定义View的封装和xib文件的使用详解

iOS开发中,我们常常将一块View封装起来,以便于统一管理内部的子控件。如九宫格思想中的"书"这一自定义View。 下面就来说说自定义View的封装以及它的多种实现方式 自定义UIView(控件...

Android自定义View—登录界面

  • 2016年07月28日 01:26
  • 1.61MB
  • 下载

ios开发UI基础—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局

原文地址:http://www.cnblogs.com/wendingding/p/3761730.html ios开发UI基础—使用纯代码自定义UItableviewcell实现一个简单的微博...

iOS开发UI篇—以微博界面为例使用纯代码自定义cell程序编码全过程

说明: 该部分完成对自定义cell页面的基本搭建,尚未进行优化处理。且还存在很多问题,譬如每行的高度设置暂时是固定的,这些问题将会在下一篇文中解决。 一、实现效果             ...
  • kdsde
  • kdsde
  • 2014年12月04日 16:15
  • 615
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用原生自定义View,setState刷新界面后UI不能正常显示
举报原因:
原因补充:

(最多只允许输入30个字)