很多人在做布局的时候,发现Text的宽高不好测量,布局不好处理,现我将方法和RN的相关源码列出来,供大家参考:
1、测量Text的宽高
1.1 方法一 :onLayout
首先在view中有个onLayout方法,这里面携带的就有宽高信息:
代码如下:
<Text onLayout={({nativeEvent:e})=>this.layout(e)}></Text>
layout=(e)=>{ console.log(e) }
nativeEvent里面的内容大家可以看到,
x和y表示左上角的顶点坐标,相对于整个屏幕的左上角(0,0);
height和width就是这个text的宽高,
target则是这个Text的ReactTag的标签,这里是5,也就是说每一个React组件都会有一个tag值,而且是唯一的,简单的理解就是能找到这个组件标签。
至于为什么这个值是5,下面会讲解:
1.2 方法二 :measure
我们还有一种方法,直接用react标签的measure方法,代码如下:
然后我们在componentDidMount方法里面添加一个定时器,定时器里面再进行测量,代码如下:
如果不用定时器的话,会出现测量的结果为0,加个定时器就可以正常测出时间了宽高了,我还是建议用第一种方法onLayout方法进行测量,第二种方法还要在componentWillUnmount卸载定时器
2、AppRegistry
在android的view绘制过程中,有三个方法按照先后顺序执行,onMeasure-->onLayout-->onDraw,只要自定义过View的童鞋我相信都知道,而React Native的渲染绘制是从注册组件开始的,也就是AppRegistry。
每次在调试的时间,大家在浏览器中总会看到如下的打印信息:
这段信息就是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
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
大家可以看出measure的x、y和left、top的值是一样的,宽高和onLayout方法的宽高是一样的。
6、实际机型测试对比
以上对应的都是手机设置显示的标准字体,其他大小的字体没有测试,另外我的汉字测试的是中文文字,英文文字、数字的宽高是不一样的,另外字体会有一定的内边距,大家把字体的fontsize改成100,单独看一个字就可以看出来,这里为了统一得到字体的宽高就用onlayout的nativeEvent方法就可以了