react native测量组件的宽高
很多人在做布局的时候，发现Text的宽高不好测量，布局不好处理，现我将方法和RN的相关源码列出来，供大家参考：
1、测量Text的宽高
1.1 方法一 ：onLayout
首先在view中有个onLayout方法，这里面携带的就有宽高信息：
代码如下：
<Text onLayout={({nativeEvent:e})=>this.layout(e)}></Text>
layout=(e)=>{ console.log(e) }
nativeEvent打印的结果
nativeEvent里面的内容大家可以看到，
x和y表示左上角的顶点坐标，相对于整个屏幕的左上角（0，0）；
height和width就是这个text的宽高，
target则是这个Text的ReactTag的标签，这里是5，也就是说每一个React组件都会有一个tag值，而且是唯一的，简单的理解就是能找到这个组件标签。
至于为什么这个值是5，下面会讲解：
1.2 方法二 ：measure
我们还有一种方法，直接用react标签的measure方法，代码如下：
给text加个ref
然后我们在componentDidMount方法里面添加一个定时器，定时器里面再进行测量，代码如下：
测量方法
如果不用定时器的话，会出现测量的结果为0，加个定时器就可以正常测出时间了宽高了，我还是建议用第一种方法onLayout方法进行测量，第二种方法还要在componentWillUnmount卸载定时器
2、AppRegistry
在android的view绘制过程中，有三个方法按照先后顺序执行，onMeasure-->onLayout-->onDraw，只要自定义过View的童鞋我相信都知道，而React Native的渲染绘制是从注册组件开始的，也就是AppRegistry。
每次在调试的时间，大家在浏览器中总会看到如下的打印信息：
rn调试打印的第一条信息
这段信息就是RN的开始吧，先找到根View，这段打印的信息是在AppRegistry的runApplication方法中的，
runApplication: function(appKey: string, appParameters: any): void {
const msg =
'Running application "' + appKey + '" with appParams: ' +
JSON.stringify(appParameters) + '. ' +
'__DEV__ === ' + String(__DEV__) +
', development-level warning are ' + (__DEV__ ? 'ON' : 'OFF') +
', performance optimizations are ' + (__DEV__ ? 'OFF' : 'ON');
infoLog(msg);
BugReporting.addSource('AppRegistry.runApplication' + runCount++, () => msg);
invariant(
runnables[appKey] && runnables[appKey].run,
'Application ' + appKey + ' has not been registered. This ' +
'is either due to a require() error during initialization ' +
'or failure to call AppRegistry.registerComponent.'
);
runnables[appKey].run(appParameters);
},
3、renderApplication
这里面就是渲染了根组件
渲染根组件
这个RootComponent的tag值是1，
下面就是AppContainer
4、AppContainer
AppContainer
React native里面就用了3个tag了，所以你自己的组件的target也就是从4开始的，我的Text外面还包了一层view，这层view的tag值是4，Text就是5了，这就回答了1中的问题。
5、measure
1中的宽高和其实位置信心其实在测量的时间就已经定下来了，也就是UIManager的measure方法，大家可以反过来再调用下这个方法；
首先引用下这个UIManager
var UIManager = require('UIManager');
layout=(e)=>{
console.log(e)
UIManager.measure(e.target, (x, y, width, height, left, top) => {
console.log('x:'+x)
console.log('y:'+y)
console.log('width:'+width)
console.log('height:'+height)
console.log('left:'+left)
console.log('top:'+top)
})
}
然后在layout的方法中加入这个measure方法就行了，这个方法有两个参数，第一个就是上面讲的reacttag值，第二个是个callback方法，这个方法里面就是宽高和位置信息，其实还有个onError的callback的方法，但是Native bridge还没有surface的错误。
源代码如下：
function(
tag: ?number,
onError: OnErrorCallback,
onSuccess: OnSuccessCallback
): void {
if (tag == null) {
return;
}
UIManager.measure( tag, onSuccess );
};
而success的callback方法代码如下，错误的callback是个空函数：
type OnSuccessCallback = (
left: number,
top: number,
width: number,
height: number,
pageX: number,
pageY: number
) => void
UIManager.measure方法错误的
大家可以看出measure的x、y和left、top的值是一样的，宽高和onLayout方法的宽高是一样的。
6、实际机型测试对比
字体宽高和机型对比
以上对应的都是手机设置显示的标准字体，其他大小的字体没有测试，另外我的汉字测试的是中文文字，英文文字、数字的宽高是不一样的，另外字体会有一定的内边距，大家把字体的fontsize改成100，单独看一个字就可以看出来，这里为了统一得到字体的宽高就用onlayout的nativeEvent方法就可以了
