Как получить текущие координаты касания PanResponder относительно родительского вида?

Question

Использование React-Native, я пытаюсь захватить события салфетки в элементе списка. Все работает хорошо, но у меня возникают трудности с приобретением текущей координаты жестов касания по отношению к элементу списка.

В моих _handlePanResponderMove, я использую следующий фрагмент код:

let relativeY = event.nativeEvent.locationY;

К сожалению, Y координат я получаю относительно «точки зрения ребенка» прикосновение произошло, а не по отношению к (как я и ожидал, так как я привязал PanResponder к элементу списка)

Как я могу получить координату Y жестов относительно родительского элемента списка?

Answer 1

Установите вид ребенка в pointerEvents="none" так:

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

Таким образом, событие, которое вы получите на вашем event.nativeEvent.locationY не будет принимать во внимание мнение ребенка координаты на всех, и что будет делать именно что ты хочешь.

Answer 2

Попробуйте добавить ссылку на ребенка, а затем измерьте его относительные расстояния. Этот код представляет собой обертку с widget (дочерний компонент). Меня устраивает! Обратите внимание, что this.refs.self.measure является триггером после setTimeout, он не работал без него. Может быть ошибкой или что ссылки не обновляются через мгновение.

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