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

Posted 画虎烂

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用原生自定义View,setState刷新界面后UI不能正常显示相关的知识,希望对你有一定的参考价值。

背景

项目整合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刷新不显示的问题了。

以上是关于使用原生自定义View,setState刷新界面后UI不能正常显示的主要内容,如果未能解决你的问题,请参考以下文章

GridView使用自定义adapter,用notifyDataSetChanged不刷新的问题

android 之 View

自定义控件基础02_下拉刷新_侧拉菜单_自定义属性

Android进阶之绘制-自定义View完全掌握

uniapp 使用scroll-view自定义下拉刷新

在 Kotlin 中单击按钮后每秒刷新自定义视图