Question

使用React-Native，我尝试在列表视图项上捕获滑动事件。一切都运作良好，但相对于列表视图项目，我很难获得触摸手势的当前坐标。

在我的TestMock mock = Mockito.mock(TestMock.class); mock.doIt("1"); mock.doIt("2"); ArgumentCaptor<String> argument = ArgumentCaptor.forClass(String.class); verify(mock, times(2)).doIt(argument.capture()); // verify that it was call 2 times and capture the values given System.out.println(argument.getAllValues());中，我使用以下代码段：

_handlePanResponderMove

不幸的是，我得到的Y坐标是相对于＆＃34;子视图＆＃34;滑动发生在，而不是相对于列表视图项（正如我所料，因为我将PanResponder附加到列表视图项）

我怎样才能得到手势＆＃39;相对于列表视图父级的Y坐标？

Answer 1

将子视图设置为pointerEvents="none"，如下所示：

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

通过这种方式，您在event.nativeEvent.locationY上收到的活动根本不会考虑儿童视图坐标，而这将完全符合您的要求。

Answer 2

尝试为孩子添加一个ref，然后测量它的相对距离。此代码表示带有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)
  }
}

如何获取PanResponder相对于父视图的当前触摸坐标？

2 个答案: