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

2019-11-08 00:02:33

字体：大中小

来源：转载

供稿：网友

背景

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

上一篇：Http协议与TCP协议易混淆点（一）

下一篇：怎么查看keystore文件内容