使用原生自定義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刷新不顯示的問題了。