React Native Pan 响应器

Question

我需要澄清一下 React native 中的 PanResponder API。这是最简单的实现（见the Animated Docs）：

 class DraggableView extends React.Component {
   constructor(props) {
   super(props);
   this.state = {
     pan: new Animated.ValueXY(), // inits to zero
   };
   this.state.panResponder = PanResponder.create({
   onStartShouldSetPanResponder: () => true,
   onPanResponderMove: Animated.event([null, {
     dx: this.state.pan.x, // x,y are Animated.Value
     dy: this.state.pan.y,
   }]),
   onPanResponderRelease: () => {
     Animated.spring(
       this.state.pan,         // Auto-multiplexed
       {toValue: {x: 0, y: 0}} // Back to zero
     ).start();
   },
  });
 }
 render() {
   return (
     <Animated.View
       {...this.state.panResponder.panHandlers}
       style={this.state.pan.getLayout()}>
       {this.props.children}
     </Animated.View>
   );
 }
}

只关注 onPanResponderMove 功能，我想做这样的事情（跟随this docs:

onPanResponderMove: (e, gestureState) => {...}

因为我需要在这个处理程序中执行多个函数。 如果我混合两种解决方案：

onPanResponderMove: (evt, gestureState) => {
    console.log(evt);
    console.log(gestureState);


    Animated.event([null, {
      dx : this.state.pan.x,
      dy : this.state.pan.y
    }]);
  },

它不起作用。如何在此处理程序中执行多个函数？谢谢。

Answer 1

Animated.event 函数存在问题。 解决方法是returnAnimated.event，因为这个函数在handler执行过程中会执行很多次。

onPanResponderMove: (evt, gestureState) => {
  console.log(evt);
  console.log(gestureState);

  return Animated.event([null, {
    dx : this.state.pan.x,
    dy : this.state.pan.y
  }]);
}