javascript - React Native 泛响应器

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 函数出现问题。 解决方案是返回 Animated.event，因为该函数在处理程序执行期间会执行多次。

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

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