使用原生自定义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刷新不显示的问题了。

时间: 2024-10-13 00:00:13

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

Enhancing Android UI with Custom Views 通过自定义view来让你的UI更屌!

Enhancing Android UI with Custom Views (通过自定义view来让你的UI更屌) Table of Contents: Custom View View Measurement View Drawing Custom Attributes Custom ViewGroup ViewGroup Measurement Layout ViewGroup Drawing More Custom Attributes There are many great adva

Android实战简易教程-第三十二枪(自定义View登录注册界面EditText-实现一键清空)

自定义View实现登录注册页面的EditText一键清空功能,效果如下: 输入框输入文字后自动出现一键清空键,输入框文字为空时,一键清空键隐藏,下面我们看一下如何通过自定义View实现这一效果. 看一下DeletableEditText.java: package com.example.testview; import android.content.Context; import android.graphics.drawable.Drawable; import android.text.

Android 自定义 View 详解

View 的绘制系列文章: Android View 绘制流程之 DecorView 与 ViewRootImpl Android View 的绘制流程之 Measure 过程详解 (一) Android View 的绘制流程之 Layout 和 Draw 过程详解 (二) Android View 的事件分发原理解析 对于 Android 开发者来说,原生控件往往无法满足要求,需要开发者自定义一些控件,因此,需要去了解自定义 view 的实现原理.这样即使碰到需要自定义控件的时候,也可以游刃有

自定义View系列教程05--示例分析

自定义View系列教程01–常用工具介绍 自定义View系列教程02–onMeasure源码详尽分析 自定义View系列教程03–onLayout源码详尽分析 自定义View系列教程04–Draw源码分析及其实践 自定义View系列教程05–示例分析 PS:如果觉得文章太长,那就直接看视频吧 之前结合源码分析完了自定义View的三个阶段:measure,layout,draw. 那么,自定义有哪几种常见的方式呢? 直接继承自View 在使用该方式实现自定义View时通常的核心操作都在onDraw

Android中的普通对话框、单选对话框、多选对话框、带Icon的对话框、以及自定义Adapter和自定义View对话框详解

对话框就是一个AlertDialog,但是一个简单的AlertDialog,我们却可以将它玩出许多花样来,下面我们就来一起总结一下AlertDialog的用法.看看各位童鞋在平时的工作中否都用到了AlertDialog的这些特性. OK,废话不多说,进入我们今天的正题. 普通对话框 普通对话框就是我们最最常用的对话框,实现起来并不复杂,实现出来的效果当然也是最简单的,如下: AlertDialog dialog = new AlertDialog.Builder(this).setTitle("

Android自定义view与activity的传值

昨晚在写团队项目的时候,遇到一个问题,直到今天早上才解决...即在自定义view"转盘"结束转动后获取结果的处理中,我是想吧值传到activity中的一个textview中的,但我的自定义view类不是activity的内部类,所以activity的属性不能共享,无法在转盘速度为0时获取到覆盖0度角的扇形所对应的字符串然后将其设置为textview的text,再者说,UI不能在子线程中更新,就算自定义view类是activity的内部类,也不能这么简单地更新UI.因为之前写过一个act

swift 自定义view VFL 设置约束冲突

1. tableview的cell 上添加了一个自定的view,view上带圆角,渐变色啥的, 修改按钮和 删除按钮 在人数为0的时候才显示, 此时在model复制的时候动态改变,cell高度会出现 复用问题 解决方法: 自定义View需要在 tableview的cell 动态赋值时使用  cardView.setNeedsDisplay(), 猜测:view没有自动调用重绘方法, 造成 2.cell上的自定义view约束冲突,  需要先把 之前显示的约束和控件先隐藏, 在将需要显示的约束和控件

实现仿微信6.0界面下-自定义view实现可变色的按钮

1.概述 学习Android少不了模仿各种app的界面,自从微信6.0问世以后,就觉得微信切换时那个变色的Tab图标屌屌的,今天我就带大家自定义控件,带你变色变得飞起~~ 好了,下面先看下效果图: 清晰度不太好,大家凑合看~~有木有觉得这个颜色弱爆了了的,,,下面我动动手指给你换个颜色: 有没有这个颜色比较妖一点~~~好了~下面开始介绍原理. 2.原理介绍 通过上面的效果图,大家可能也猜到了,我们的图标并非是两张图片,而是一张图,并且目标颜色是可定制的,谁让现在动不动就谈个性化呢. 那么我们如何

Android软件开发之盘点自定义View界面大合集(二)

Android软件开发之盘点自定义View界面大合集(二) - 雨松MOMO的程序世界 - 51CTO技术博客 雨松MOMO带大家盘点Android 中的自定义View界面的绘制 今天我用自己写的一个Demo 和大家详细介绍一个Android中自定义View中的使用与绘制技巧. 1.自定义view绘制字符串 相信在实际开发过程中必然很多地方都须要用到系统字 为什么会用到系统字? 方便 省内存 我相信做过J2ME游戏开发的朋友应该深知内存有多么多么重要 而且使用它还可以带来一个更重要的好处就是很方