React native获取我的触摸事件的坐标

Question

我如何获得触摸事件的坐标.所以我点击显示屏内的任何地方,我可以检索X,Y定位的位置.

Answer 1

您需要使用TouchableOpacity或其他可触摸组件之一包装视图对象.使用TouchableOpacity,您可以获得通过新闻事件的onPress道具.通过此新闻事件,您可以访问印刷机的x,y坐标.

伪代码看起来像这样:

render() {
 ....

<TouchableOpacity onPress={(evt) => this.handlePress(evt) } 
 .... > 
 <View></View>
</TouchableOpacity>
}

handlePress(evt){
  console.log(`x coord = ${evt.nativeEvent.locationX}`);
}

Answer 2

如果您想要比TouchableOpacity等按钮提供的更多灵活性(例如,如果您想要手势移动事件),那么您将需要使用手势响应系统.这允许组件订阅触摸事件.

我已经包含了所有手势响应事件处理程序的示例实现,但是在我的View上已经注释掉了大部分它们,只提供了基本功能:订阅所有触摸和移动事件.我展示了布尔函数的箭头语法,并使用老式bind()语法来调用我的自定义onTouchEvent(name, ev)函数.

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

export class Battlefield extends Component {
    constructor(props) {
        super(props);
    }

    // The event 'ev' is of type 'GestureResponderEvent'. Documentation for ev.nativeEvent:
    // https://facebook.github.io/react-native/docs/gesture-responder-system.html
    onTouchEvent(name, ev) {
        console.log(
            `[${name}] ` + 
            `root_x: ${ev.nativeEvent.pageX}, root_y: ${ev.nativeEvent.pageY} ` +
            `target_x: ${ev.nativeEvent.locationX}, target_y: ${ev.nativeEvent.locationY} ` + 
            `target: ${ev.nativeEvent.target}`
        );
    }

    render() {
        return (
            <View
                style={styles.container}
                onStartShouldSetResponder={(ev) => true}
                // onMoveShouldSetResponder={(ev) => false}
                onResponderGrant={this.onTouchEvent.bind(this, "onResponderGrant")}
                // onResponderReject={this.onTouchEvent.bind(this, "onResponderReject")}
                onResponderMove={this.onTouchEvent.bind(this, "onResponderMove")}
                // onResponderRelease={this.onTouchEvent.bind(this, "onResponderRelease")}
                // onResponderTerminationRequest={(ev) => true}
                // onResponderTerminate={this.onTouchEvent.bind(this, "onResponderTerminate")}
            >
                <Text>Click me</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        position: 'relative',
        height: "100%",
        width: "100%",
        backgroundColor: 'orange'
    }
});

如果这仍然不是您的功能(例如,如果您需要多点触控信息),请参阅PanResponder.

Answer 3

将其放在视图标签上，即可获取所有坐标

onTouchStart={(e) => {consol.log('touchMove',e.nativeEvent)}}

例如

<View onTouchStart={(e) => {consol.log('touchMove',e.nativeEvent)}}

但是，此事件仅适用于标签。因此您可以根据需要设置视图。