Question

我在Image内有TouchableOpacity：

<TouchableOpacity
    style={{flex: 1, alignItems: 'center'}}
    onPress={(evt) => this._handlePress(evt)}>
        <Image
            style={{flex: 1, resizeMode: 'contain'}}
            source={require('./HumanBody.png')}
            ref='image' />
</TouchableOpacity>

我尝试根据用户点击Image的位置做不同的事情。因此，我将触摸事件传递给我的_handlePress函数，以便使用点击发生的坐标。

我很快意识到图像和周围的TouchableOpacity有自己独立的坐标系，所以我无法从坐标中判断出水龙头是在Image内还是在周围TouchableOpacity的空间，所以我需要考虑事件的目标，这给我留下了一个节点ID。现在我需要检查它是否属于我的Image。

我目前的解决方法是通过测试发现我的Image节点ID并将其硬编码到我的if语句中。

_handlePress = (evt) => {
    this.setState({ isLoading: true })
    this.setState({ x: evt.nativeEvent.locationX, y: evt.nativeEvent.locationY, target: evt.nativeEvent.target})
    this.refs['image'].measure( (fx, fy, width, height, px, py) => {
        let x = this.state.x
        let y = this.state.y
        let target = this.state.target
        if (target != 2) {
            // not inside the Image
        } else {
            // inside the Image
        }
    })
}

（最后可能不需要.measure）

这显然非常糟糕，而且不是一个可行的解决方案，因为每当我更改主屏幕的结构时，Image的节点ID都会发生变化，甚至可能更改完我的主屏幕结构控制。所以我需要一些方法来在运行时获取Image的节点ID或从目标节点ID获取对象。

当然，我发现了这一点（并没有其他任何东西甚至远程针对我的问题）：How can I get real elment by node id? react-native

最佳答案对我不起作用（无法找到require d模块。）

以下import

import ReactNativeComponentTree from 'react-native/Libraries/Renderer/shims/ReactNativeComponentTree'

然后在_handlePress

中

let target = ReactNativeComponentTree.getInstanceFromNode(this.state.target)

有点工作，但它留下了FiberNode对象，我不知道如何检查它是否属于我的Image。我什么都找不到。

那么如何确定目标是否为Image（或者 Image就足够了，如果还有那样的话？

如何在React Native中检查触摸事件的目标？

0 个答案: