React Native 獲取我的觸摸事件的坐標

Question

我將如何獲得我的觸摸事件的坐標。 所以我點擊顯示器內的任何地方，我就可以檢索發生位置的 X、Y 定位。

Answer 1

您需要使用 TouchableOpacity 或其他 Touchable 組件之一包裝您的視圖對象。 使用 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

把它放在你的視圖標簽上，你可以獲得所有坐標

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

例如

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

但是，此事件僅適用於標簽。 所以你可以根據你的要求設置視圖。

Answer 3

如果您想要比 TouchableOpacity 等按鈕提供的靈活性更高的靈活性（例如，如果您想要手勢移動事件），那么您需要使用手勢響應系統。 這允許組件訂閱觸摸事件。

我已經包含了所有手勢響應事件處理程序的示例實現，但在我的視圖中注釋掉了其中的大部分以僅提供基本功能：訂閱所有觸摸和移動事件。 我演示了布爾函數的箭頭語法，並使用老式的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 。