React native Holen Sie sich die Koordinaten meiner Touch-Veranstaltung

Question

Wie würde ich die Koordinaten meiner Touch-Event bekommen. Also klopfe ich irgendwo innerhalb des Displays und ich kann die X, Y Positionierung von wo es passiert ist abrufen.

Answer 1

Sie müssen Ihr Ansichtsobjekt mit TouchableOpacity oder einer der anderen Berührbaren Komponenten umschließen. Mit TouchableOpacity haben Sie die onPress-Prop, die ein Presseereignis bestanden hat. Von diesem Pressetermin haben Sie Zugriff auf die x, y-Koordinaten der Presse.

Pseudo-Code würde wie folgt aussehen:

render() { 
.... 

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

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

Answer 2

Wenn Sie mehr Flexibilität als wollen, was durch einen Knopf wie TouchableOpacity angeboten wird, dann werden Sie brauchen, um (zB wenn Sie Geste bewegen Ereignisse wollen.) Verwenden Sie die gesture responder system. Dadurch können Komponenten Touch-Ereignisse abonnieren.

Ich habe Beispielimplementierungen für alle Gestenantwort-Ereignisbehandlungsroutinen hinzugefügt, aber die meisten davon in meiner Ansicht auskommentiert, um nur die grundlegende Funktionalität bereitzustellen: das Abonnieren aller Touch- und Move-Ereignisse. Ich demonstriere die Pfeilsyntax für die booleschen Funktionen und verwende die altmodische bind() Syntax zum Aufruf meiner benutzerdefinierten onTouchEvent(name, ev) Funktion.

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

Wenn dies noch nicht genug Funktionalität für Sie (z. B., wenn Sie Multi-Touch-Info benötigen), beziehen sich auf PanResponder.