React native 获取触摸事件相对于图像的坐标

我有一个图像在屏幕中央。我需要使它可触摸，我需要得到触摸事件相对于图像的坐标。我已经将我的图像包装在一个可触摸的不透明度中，使其可触摸。问题是触摸坐标是相对于触摸不透明度而不是图像的。TouchableOpacity占据了整个屏幕，但图像在其中居中

我要么需要使我的TouchableOpacity与图像大小相同，要么需要知道图像在TouchableOpacity中的偏移量

我尝试使用OnLayout和NativeEvent对象来获取图像在其父对象中的位置，但它只返回0,0

    const {width, height} = Dimensions.get("window");

    class Inspection extends React.Component {

        handlePress(evt) {
            // do stuff
            ...
        }

        render() {
            return (
                <View style={{flex:1, backgroundColor:'#fff'}}>
                    <TouchableOpacity 
                        onPress={(evt) => this.handlePress(evt)}
                        style={{backgroundColor: '#3897f0'}}
                    >
                        <Image 
                            onLayout={({nativeEvent}) => {
                                console.log(nativeEvent.layout);
                            }}
                            source={require('../../images/wireframe-car.jpg')}
                            resizeMode='contain'
                            style={{
                                maxHeight: height,
                                maxWidth: width
                                }} 
                        />
                    </TouchableOpacity>
                </View>
            );
        }
    }

我给TouchableOpacity添加了背景色，这样你就可以看到它占据了整个屏幕

---

还有其他方法吗？

TouchableOpacity的大小与图像的大小相同，因为您没有给它指定任何高度，您只需像这样为您的TouchableOpacity指定onLayout道具

      <View
        style={{ flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center' }}>
        <TouchableOpacity
          onLayout={({ nativeEvent }) => {
            console.log(nativeEvent.layout)
          }}
          style={{}}
          onPress={evt => this.handlePress(evt)}>
          <Image
            source={require('../../images/wireframe-car.jpg')}
            resizeMode="contain"
            style={{
              maxWidth: '100%',
            }}
          />
        </TouchableOpacity>
      </View>

---

我已经将我的onLayout道具移动到TouchableOpacity并进行了其他更改，但它仍然给我0,0作为x，y坐标。我已经为TouchableOpacity添加了背景色，并上传了一个屏幕截图，以便您可以看到。图像的高度和宽度是多少？图像是1496 x 974，但我已将其缩放以适合任何屏幕大小。这是您正在做的吗？尺寸。获取（“窗口”）。宽度问题在于图像大小，这个尺寸的图像将占据整个屏幕的高度和宽度，这就是为什么它的x:0，y:0

      <View
        style={{ flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center' }}>
        <TouchableOpacity
          onLayout={({ nativeEvent }) => {
            console.log(nativeEvent.layout)
          }}
          style={{}}
          onPress={evt => this.handlePress(evt)}>
          <Image
            source={require('../../images/wireframe-car.jpg')}
            resizeMode="contain"
            style={{
              maxWidth: '100%',
            }}
          />
        </TouchableOpacity>
      </View>

let imageUri = Image.resolveAssetSource(require('../../images/wireframe-car.jpg').uri)
    Image.getSize(imageUri , (width, height) => { 
    console.log(`The image dimensions are ${width}x${height}`); 
    }, (error) => { 
    console.error(`Couldn't get the image size: ${error.message}`); 
    });