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

Если вы хотите больше гибкости, чем то, что предлагается с помощью кнопки, такие как TouchableOpacity, то вам нужно (например, если вы хотите, жест события перемещения.) используйте gesture responder system. Это позволяет компонентам подписываться на события касания.

Я включил примеры реализации для всех обработчиков событий ответа на жестов, но прокомментировал большинство из них на моем представлении, чтобы просто предоставить основные функции: подписка на все события касания и перемещения. Я демонстрирую синтаксис стрелок для логических функций и использую старомодный синтаксис 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.