Wie erhält man aktuelle Touch-Koordinaten von PanResponder relativ zur Elternansicht?

Question

Mit React-Native versuche ich, Swipe-Ereignisse in einem Listenansichtselement zu erfassen. Alles funktioniert gut, aber ich habe Schwierigkeiten, die aktuelle Koordinate der Berührungsgeste relativ zu dem Listenansichtselement zu erhalten.

In meinem _handlePanResponderMove, verwende ich die folgenden Ausschnitt:

let relativeY = event.nativeEvent.locationY;

Leider ist die Y-Koordinate ich bin immer ist in Bezug auf die „untergeordneten Ansicht“ die Swipe ereignete sich auf, und nicht in Bezug auf die Listenansicht (wie ich es erwartet hatte, seit ich den PanResponder an das Listenansichtselement angehängt habe)

Wie kann ich die Y-Koordinate der Gesten relativ zur übergeordneten Liste abrufen?

Answer 1

die Ansicht Kind Set zu pointerEvents="none" wie so:

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

auf diese Weise, das Ereignis, das Sie auf Ihrem event.nativeEvent.locationY erhalten wird das Kind Sehkoordinaten überhaupt nicht berücksichtigt, und das wird genau das tun, was du willst.

Answer 2

Versuchen Sie, dem Kind eine Referenz hinzuzufügen und messen Sie dann seine relativen Abstände. Dieser Code stellt den Wrapper mit einer widget (untergeordnete Komponente) dar. Für mich geht das! Beachten Sie, dass this.refs.self.measure Trigger nach einem SetTimeout ist, ohne es nicht funktionierte. Es könnte sich um einen Messfehler handeln oder die Referenzen werden nicht sofort aktualisiert.

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