measure()测量是根据view标签中的ref属性,使用方法如下:
measureWatermarkerImage(){
this.refs.watermarkerImage.measure((a, b, width, height, px, py) =>
this.setState({watermarkerImageWidth: width})
);
}
with:宽;height:高;px:x轴方向距离左边多少像素;py:y轴方向距离上边多少像素;
根据项目需要,如果需要在页面加载完成后进行测量view,就需要使用
componentDidMount() {
setTimeout(this.measureWatermarkerImage.bind(this));
};
获取视图组件的x,y,宽,高等值.使用RN自带的measure即可.
具体使用:
1 /**
2 * Created by shaotingzhou on 2017/2/28.
3 */
4 /**
5 * Sample React Native App
6 * https://github.com/facebook/react-native
7 * @flow
8 */
9
10 import React, { Component } from 'react';
11 import {
12 AppRegistry,
13 StyleSheet,
14 Text,
15 View,
16 } from 'react-native';
17
18
19 export default class One extends Component {
20 render() {
21 return (
22 <View style={styles.container}>
23 <Text style={styles.welcome} >
24 ONE
25 </Text>
26 <Text style={styles.instructions} ref="myText">
27 ONE
28 </Text>
29 <Text style={styles.instructions}>
30 ONE
31 </Text>
32 </View>
33 );
34 }
35
36 componentDidMount=() =>{
37 setTimeout(this.showMeasure); //需要在页面加载完毕之后对视图进行测量,所有需要setTimeout
38 }
39 showMeasure = () =>{
40 this.refs.myText.measure((x,y,width,height,px,py) =>
41 alert(x)
42 );
43 }
44
45
46 }
47
48 const styles = StyleSheet.create({
49 container: {
50 flex: 1,
51 justifyContent: 'center',
52 alignItems: 'center',
53 backgroundColor: '#F5FCFF',
54 },
55 welcome: {
56 fontSize: 20,
57 textAlign: 'center',
58 margin: 10,
59 },
60 instructions: {
61 textAlign: 'center',
62 color: '#333333',
63 marginBottom: 5,
64 },
65 });