Question

我的代码渲染一个红色方块并使用PanResponder移动。释放pan之后，它通过动画变换移动。但是，当我拖动正方形时，onLayout（）不会触发。我甚至想在动画中随时获取正方形位置。有什么问题吗？

<View style={styles.container}>
    <Animated.View
      style={[
        styles.box,
        {
          transform: [
            { translateX: this._animatedValue.x },
            { translateY: this._animatedValue.y },
          ],
          backgroundColor: 'red'
        },
      ]}
      {...this._panResponder.panHandlers}
      onLayout={({ nativeEvent }) => { console.log(nativeEvent.layout) }}
    />
  </View>

谢谢！

Answer 1

如果您想随时获取当前位置，并且正在使用PanResponder来跟踪用户在移动正方形时的触摸，我建议在Animated.event()上使用一个监听器您将传递给onPanResponderMove处理程序。

看起来像

Animated.event([null, {dx: this._animatedValue.x, dy: this._animatedValue.y}], {
  listener: ({nativeEvent}) => {
    //nativeEvent has your x and y position in it
  }
})

这是Animated.event()上的React Native文档，其中有一个示例显示了如何在PanResponder中使用它，尽管它们只是沿X方向跟踪。

使用动画变换时，无法触发onLayout

1 个答案: