RN 对 模块尺寸的处理

由于容纳 RN view 的外围控件不确定,同时又要与其他view协调好尺寸和布局。
所以 RN 对 RootView(包含了一个模块的所有布局)的处理挺有技巧,RN 中有如下调用逻辑:

ReactActivity.createRootView -> setContentView(mReactRootView)

ReactRootView.onMeasure()

ReactInstanceManagerImpl.attachMeasuredRootViewToInstance

UIManagerModule.addMeasuredRootView

得到宽高:

final int width;
final int height;
// If LayoutParams sets size explicitly, we can use that. Otherwise get the size from the view.
if (rootView.getLayoutParams() != null &&
rootView.getLayoutParams().width > 0 &&
rootView.getLayoutParams().height > 0) {
width = rootView.getLayoutParams().width;
height = rootView.getLayoutParams().height;
} else {
width = rootView.getWidth();
height = rootView.getHeight();
}
rootView.setOnSizeChangedListener(
new SizeMonitoringFrameLayout.OnSizeChangedListener() {
@Override
public void onSizeChanged(final int width, final int height, int oldW, int oldH) {
getReactApplicationContext().runOnNativeModulesQueueThread(
new Runnable() {
@Override
public void run() {
updateRootNodeSize(tag, width, height);
}
});
}
});

通过这个 SizeMonitoringFrameLayout.OnSizeChangedListener 将 SizeMonitoringFrameLayout(实际扮演一个容器 ViewGroup 来监听布局的改变)的宽高传递给 css-layout 用于布局各个”盒”节点。