Làm cách nào để nhận tọa độ chạm hiện tại của PanResponder liên quan đến chế độ xem gốc?

Question

Sử dụng React-Native, tôi đang cố nắm bắt các sự kiện vuốt trên một mục xem danh sách. Mọi thứ đều hoạt động tốt nhưng tôi gặp khó khăn trong việc thu thập tọa độ hiện tại của cử chỉ cảm ứng, liên quan đến mục xem danh sách.

Trong _handlePanResponderMove của tôi, tôi sử dụng đoạn mã sau:

let relativeY = event.nativeEvent.locationY;

Thật không may, Y phối hợp tôi nhận được là liên quan đến "xem con" swipe xảy ra vào, và không liên quan đến các mục xem danh sách (như tôi đã mong đợi, vì tôi đã gắn PanResponder vào mục xem danh sách)

Làm cách nào tôi có thể nhận được toạ độ Y của cử chỉ tương ứng với chế độ xem danh sách?

Answer 1

Đặt xem đứa trẻ pointerEvents="none" như vậy:

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

Bằng cách đó, trường hợp bạn nhận được trên event.nativeEvent.locationY của bạn sẽ không đưa vào tài khoản quan điểm con phối ở tất cả, và điều đó sẽ làm chính xác bạn muốn gì.

Answer 2

Cố gắng thêm ref cho trẻ và sau đó đo khoảng cách tương đối của nó. Mã này đại diện cho trình bao bọc với widget (thành phần con). Nó làm việc cho tôi! Lưu ý rằng this.refs.self.measure được kích hoạt sau một setTimeout, nó không hoạt động nếu không có nó. Có thể là một lỗi đo lường hoặc các tham chiếu không được cập nhật sau một thời điểm.

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