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等按钮提供的更多灵活性（例如，如果您想要手势移动事件），那么您需要使用gesture responder system。这允许组件订阅触摸事件。

我已经包含了所有手势响应事件处理程序的示例实现，但是在我的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)}}

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

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

3 个答案: