1. 程式人生 > >使用原生自定義View,setState重新整理介面後UI不能正常顯示

使用原生自定義View,setState重新整理介面後UI不能正常顯示

背景

專案整合react native時,將原生的一個九宮格圖片顯示,封裝成了RN控制元件,並提供了一個source屬性

@ReactProp(name = "source")

問題

在js端使用該控制元件時,通過state初始化時給source賦值,然後,當新增圖片是,通過setState重新整理資料來重新整理介面顯示,理想狀態下是,介面應該顯示新增的圖片,但是,當setState之後,控制元件上的圖片就不顯示了!!嘗試著給該控制元件設定背景顏色,發現控制元件所佔的空間位置還是有的。

解決方案

當遇到問題,首先想到的一定是到官網github上搜索資料,你遇到的問題可能別人也會遇到。

然後查看了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重新整理不顯示的問題了。