Question

我的图像在屏幕上居中。我需要使其可触摸，并且需要获取触摸事件相对于图像的坐标。我将图像包裹在一个TouchableOpacity中，以使其可触摸。问题在于触摸坐标是相对于TouchableOpacity而不是图像。 TouchableOpacity占据了整个屏幕，但是图像居中于其中。

我要么需要将我的TouchableOpacity设置为与Image相同的大小，要么需要知道Image在TouchableOpacity中的偏移量。

我尝试使用OnLayout和NativeEvent对象获取Image在其父级中的位置，但它仅返回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 的大小与图像的大小相同，因为您没有给它任何高度，只需分配 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>

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

更新

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

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

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

1 个答案: