使用动画变换，无法触发 onLayout [英] With animated transform,onLayout cannot be triggered

问题描述

我的代码渲染一个红色方块并使用 PanResponder 移动.释放 pan 后，它通过动画变换移动.但是当我拖动方块时 onLayout() 不会触发.即使在动画中，我也想随时获得正方形的位置.有什么问题?

My codes render a red square and moved using PanResponder.After release pan ,it move by animation transform. But onLayout() does not trigger when I drag the square. I want to get the square location anytime even in animating. What is the problem?

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

谢谢！

推荐答案

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

If you want the current position at any time, and you're using a PanResponder to move track the user's touch while they move the square, I would suggest using a listener on your Animated.event() that I'm assuming you're passing to your onPanResponderMove handler.

它看起来像

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 方向上进行跟踪.

Here's the React Native docs on Animated.event(), which have an example showing how to use it in a PanResponder, though they're only tracking on the X direction.

这篇关于使用动画变换，无法触发 onLayout的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！