react-native - 获取触摸事件相对于Image的坐标

Question

我有一个图像位于屏幕中央。我需要让它可以触摸，我需要获取触摸事件相对于图像的坐标。我将图像包裹在 TouchableOpacity 中以使其可触摸。问题是触摸坐标是相对于 TouchableOpacity 而不是图像。 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>
            );
        }
    }

控制台输出:

{height: 683.4285888671875, width: 411.4285583496094, y: 0, x: 0}

我向 TouchableOpacity 添加了 backgroundColor，因此您可以看到它占据了整个屏幕。

还有其他方法吗？

Answer 1

TouchableOpacity 将与 Image 的大小相同，因为您没有给它任何高度，您只需要分配 onLayout> 像这样支持你的 TouchableOpacity

      <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>

这将为您提供图像的确切 x 和 y。

更新

问题也出在图像尺寸上，因为图像尺寸很大，所以它占用了设备的高度，我们得到 x:0 和 y:0，为了解决这个问题，我们可以给图像组件一个静态高度或根据宽度计算其高度。我们可以像这样从本地路径获取宽度和高度图像:

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}`); 
    });