首页 > 代码库 > 使用原生自定义View,setState刷新界面后UI不能正常显示
使用原生自定义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不能正常显示
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。