親ビューに相対的なPanResponderの現在のタッチ座標を取得する方法は？

Question

React-Nativeを使用して、私はリストビューアイテムでスワイプイベントをキャプチャしようとしています。すべてうまくいきますが、私はリストビューアイテムに比べてタッチジェスチャーの現在の座標を取得するのが難しいです。

let relativeY = event.nativeEvent.locationY;

残念ながら、Yはスワイプが上発生した「子ビュー」に関連している私は取得しています座標、との相対ではない：私の_handlePanResponderMoveで

は、私は、次のスニペットを使用します（リストビューアイテムにPanResponderを添付していたので、期待していたとおり）

リストビューの親に対してジェスチャのY座標を取得するにはどうすればよいですか？

Answer 1

：

<View pointerEvents="none"> 
     ... 
    </View> 

そのように、あなたがあなたのevent.nativeEvent.locationYに受け取るイベントは、子ビューがまったく座標を考慮していないだろう、それは正確に行いますあなたが欲しいもの。

Answer 2

子どもに参考にして、相対距離を測定してみてください。このコードは、widget（子コンポーネント）を持つラッパーを表します。わたしにはできる！ this.refs.self.measureはsetTimeoutの後にトリガされ、それがなければ動作していないことに注意してください。メジャーのバグであっても、リファレンスが瞬時に更新されない可能性があります。そのようなpointerEvents="none"に子ビューを設定し

import React, { Component } from 'react' 
import TimerMixin from 'react-timer-mixin' 
import { 
    StyleSheet, 
    View, 
    TouchableHighlight, 
    Text, 
    Alert, 
    PanResponder, 
    Animated, 
    Dimensions } from 'react-native' 
import BulbWidget from './bulb-widget' 

const COLUMNS = 3 

export default class Widget extends Component { 
    constructor (props) { 
    super() 
    this.state = { 
     pan: new Animated.ValueXY(), 
     touches: 1 
    } 
    this.panResponder = PanResponder.create({ 
     onStartShouldSetPanResponder:() => true, 
     onPanResponderMove: Animated.event([null, { 
     dx: this.state.pan.x, 
     dy: this.state.pan.y 
     }]), 
     onPanResponderRelease: (e, gesture) => { 
     this.state.pan.flattenOffset() 
     this._setPosition(gesture) 
     Animated.spring(
      this.state.pan, 
      {toValue: {x: 0, y: 0}} 
     ).start() 
     }, 
     onPanResponderGrant: (e, gestureState) => { 
     this.state.pan.setOffset({x: this.state.pan.x._value, y: this.state.pan.y._value}) 
     this.state.pan.setValue({x: 0, y: 0}) 
     this._onPressWidget() 
     } 
    }) 
    } 

    render() { 
    let styleWidget = {} 
    this.props.type === 'L' ? styleWidget = styles.widgetL : styleWidget = styles.widget 

    return (
     <View ref='self' style={this.state.placed}> 
     <Animated.View {...this.panResponder.panHandlers} 
      style={[this.state.pan.getLayout(), styleWidget]} > 
      <BulbWidget ref='child'/> 
     </Animated.View> 
     </View> 
    ) 
    } 

    componentDidMount() { 
    // Print component dimensions to console 
    setTimeout(() => { 
     this.refs.self.measure((fx, fy, width, height, px, py) => { 
     console.log('Component width is: ' + width) 
     console.log('Component height is: ' + height) 
     console.log('X offset to frame: ' + fx) 
     console.log('Y offset to frame: ' + fy) 
     this.offset = { fx, fy, width, height } 
     }) 
    }, 0) 
    } 

    _onPressWidget() { 
    this.refs.child.onPressAction() 
    this.setState({touches: this.state.touches + 1}) 
    TimerMixin.setTimeout(() => { 
     this.setState({ touches: 1 }) 
     console.log('Reset') 
    }, 1000) 

    if (this.state.touches === 2) { 
     this.setState({touches: 1}) 
    } 
    } 

    _setPosition (gesture) { 
    const dx = gesture.moveX - gesture.x0 
    const dy = gesture.moveY - gesture.y0 

    const { width, height } = this.offset 
    const x = Math.abs(this.offset.fx + dx) 
    const y = Math.abs(this.offset.fy + dy) 

    const idTo = (Math.floor(x/width) + Math.floor(y/height) * COLUMNS) 
    this.props.setPosition(gesture, this.props.idx, idTo) 
    } 
}