React Native Pan Responder

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 
    }]); 
    }, 

它不工作我怎樣才能Exec的在這個處理程序中使用多個函數？謝謝。

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 
    }]); 
}