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函数出现问题。解决方案是return 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
  }]);
}

反应原生泛响应者

1 个答案: