ReactNative Android之原生UI組件動態addView不顯示問題解決
版權聲明：本文為博主原創文章，未經博主允許不得轉載。
在如今的App中，已經有成千上萬的原生UI部件了——其中的一些是平台的一部分，另一些可能來自於一些第三方庫，而且可能你自己還收藏了很多。React Native已經封裝了大部分最常見的組件，譬如ScrollView和TextInput，但不可能封裝全部組件。而且，說不定你曾經為自己以前的App還封裝過一些組件，React Native肯定沒法包含它們。幸運的是，在React Naitve應用程序中封裝和植入已有的組件非常簡單。但在實施的過程中往往會發生一些小狀況，如今天分享的這個問題，當原生UI組件動態addView時在界面中不顯示。
（下面React Native 簡稱為RN）
還原場景
在下面代碼中，我們定義了一個原生的控件，這個組件同樣也可用於RN。
public class RCTVideoLayout extends RelativeLayout {
public RCTVideoLayout(Context context) {
this(context, null);
}
public RCTVideoLayout(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public RCTVideoLayout(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView(context);
}
/**
* 初始化View
*
* @param context
*/
private void initView(Context context) {
View rootView = View.inflate(context, R.layout.video_layout, null);
addView(rootView);
}
/**
* 動態添加View
* @param str
*/
public void autoAddView(String str){
Button button = new Button(getContext());
button.setText(str);
addView(button);
}
在這段上面的autoAddView函數中就是一個動態添加View的操作，如果這段代碼在原生中執行是沒問題的，但在RN中動態調用，會導致無論addView多少次都沒問題，但在RN中每次調用均在UI中看不出有什么明顯變化，通過斷點也是沒發現問題所在，那么究竟是什么原因導致的呢，下面我給大家分析一下。
利用工具分析問題所在
發生如此詭異的情況，該怎么分析呢？Android Studio中有個工具Layout inspector，這個工具可以快速對手機上面的界面做分析。
-
Android Studio打開任意工程后，按照如下圖所示：
-
等待幾秒后，會自動打開分析界面：
-
這個界面是一個Demo工程，里面同樣也是用RN調用原生封裝的組件，但同樣的情況是調用了原生addView后，並沒有在UI上看到
-
現在把所有的層級打開后，發現原生的確已經addView進去了，只不過他的height和 width 都是0，所以這樣就能解釋為什么我們動態添加View后看不到UI變化。
解決方案
-
從上圖中可以分析得到，無論我們
addView多少次，所產生的View都是0高0寬，這個明顯就是沒有讓ViewGroup去測量子控件。現在原因已經明了，那么如何解決這種問題呢？那當然是讓ViewGroup每次都自己測量子控件的高寬咯，我們回到剛才的自定義ViewGroup中的代碼中，添加如下代碼：//以下代碼修復通過動態 addView 后看不到的問題 @Override public void requestLayout() { super.requestLayout(); post(measureAndLayout); } private final Runnable measureAndLayout = new Runnable() { @Override public void run() { measure( MeasureSpec.makeMeasureSpec(getWidth(), MeasureSpec.EXACTLY), MeasureSpec.makeMeasureSpec(getHeight(), MeasureSpec.EXACTLY)); layout(getLeft(), getTop(), getRight(), getBottom()); } }; -
以上代碼中所作的事情就是每次
addView后，在ViewGroup源碼中可看到addView后，實際調用requestLayout()函數，如下圖所示：
-
添加代碼后，我們再次運行程序，再次通過
Layout inspector工具來看看效果：
-
可以發現這回終於有顯示了，再看到hight和width都有對應的值了。
總結
以上是我在封裝原生控件給RN調用時遇到的一個問題，歡迎大家支持。