如何使用RN测量功能

Question

如何使用RN的measure功能？

我想找到以下图片的确切位置和尺寸：

import React, { Component } from 'react';

import { StyleSheet, Image, View } from 'react-native';

class TestView extends Component {

  measureWelcome() {
     this.refs.welcome.measure(this.logWelcomeLayout);
   }

 logWelcomeLayout(ox, oy, width, height, px, py) {
  console.log("ox: " + ox);
  console.log("oy: " + oy);
  console.log("width: " + width);
  console.log("height: " + height);
  console.log("px: " + px);
  console.log("py: " + py);
 }

  render() {
    return (
      <View>
      <Image
        source={require('../../assets/5.jpg')}
        style={{height:200, width:200}}
        ref="welcome"
      />
    </View>

    <TouchableOpacity onPress={this.measureWelcome}>
        <Text> Click Me</Text>
    </TouchableOpacity> 
  </View>
    );
  }
}

export default TestView;

所以，当我点击Click me时，我收到错误：

那么，我是否使用measure或View上的Image？我无法找到有关它的更多信息。我想要做的是找到图像的信息并将其发送到另一个视图？我能这样做吗？

非常感谢。

Answer 1

因为measureWelcome不知道具有this的{​​{1}}上下文。因此，您必须通过更改此代码来绑定refs.welcome上下文

发件人

this

要

<TouchableOpacity onPress={this.measureWelcome}>

有关绑定<TouchableOpacity onPress={this.measureWelcome.bind(this)}> // OR <TouchableOpacity onPress={() => this.measureWelcome()}> 上下文的详情，我建议您阅读this article