React Native 如何在函数组件中处理PanResponder onPanResponderRelease事件

e37o9pze  于 2023-05-29  发布在  React
关注(0)|答案(1)|浏览(198)

我有一个组件,使用PanResponder创建一个类似操纵杆的控件。我遇到的问题是,如果我绑定到onPanResponderRelease事件,状态就会过时。我相信这是由于使用了泛响应器的useRef。

const panResponder = useRef(
    PanResponder.create({
      onMoveShouldSetPanResponder: () => true,
      onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}]),
      onPanResponderRelease: () => {
        Animated.spring(
                    pan,
                    {
                        toValue: {
                            x: 0,
                            y: 0,
                        },
                        useNativeDriver: false,
                    },
                ).start();
       props.onReleased(); //call the onReleased event so the parent can respond.
      },
    }),
  ).current;

父组件

const onReleased = () => {
    //implement logic based on current state values
    if(someState .... //somestate is always the initial value

  }
xzlaal3s

xzlaal3s1#

我想我找到了答案,但我想得到一些社区的反馈。如果我将release事件移到useRef之外,一切都将按预期工作。

const panResponder = useRef(
    PanResponder.create({
      onMoveShouldSetPanResponder: () => true,
      onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}]),
    }),
  ).current;

  panResponder.panHandlers.onResponderRelease = () => {
        Animated.spring(
                    pan,
                    {
                        toValue: {
                            x: 0,
                            y: 0,
                        },
                        useNativeDriver: false,
                    },
                ).start();
        props.onRelease();
  }

父组件

const onReleased = () => {
    //implement logic based on current state values
    if(someState .... //somestate now has the current value

  }

下面是一个工作示例:https://snack.expo.dev/lr5Wz8XwV
我对PanResponder不是很熟悉,所以我想知道这是否会是一个性能问题。

相关问题