ネイティブに反応して、私のタッチイベントの座標を取得します。

Question

私のタッチイベントの座標を取得する方法を教えてください。だから私はディスプレイ内のどこかをタップし、私はそれが起こった場所のX、Yの位置を取得することができます。

Answer 1

ビューオブジェクトをTouchableOpacityまたは他のTouchableコンポーネントでラップする必要があります。 TouchableOpacityを使用すると、pressイベントが渡される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を使用してください。これにより、コンポーネントはタッチイベントに登録することができます。

すべてのジェスチャーレスポンスイベントハンドラーのサンプル実装が含まれていますが、すべてのタッチイベントとムーブイベントにサブスクライブするだけで、基本的な機能を提供するために私のビューでそのほとんどをコメントアウトしています。ブール関数の矢印構文を説明し、私のカスタムonTouchEvent(name, ev)関数を呼び出すための古き良きbind()構文を使用します。

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を参照してください。