React Native PanResponder 不适用于 Android 设备

Question

For some reason, I cannot make the PanResponder on my Android device. I use a Motorola Moto E (2nd gen) with Android 5.0.2

I was able to make this work on Android emulators (Nexus 6: Android 5.1 and Nexus S: Android 4.4) and on iOS Simulator and Device.

Any idea why the PanResponder doesn't work on device?

Some code here just in case it's needed. None of the console.log works on the device:

componentWillMount() {
    this.panResponder = this.getPanResponder();
}

getPanResponder() {
    return PanResponder.create({
        onStartShouldSetPanResponder: () => {
            console.log('start');
            return true;
        },
        onStartShouldSetPanResponderCapture: () => {
            console.log('start capture');
            return true;
        },
        onMoveShouldSetPanResponder: () => {
            console.log('move');
            return true;
        },
        onMoveShouldSetPanResponderCapture: () => {
            console.log('move capture');
            return true;
        },
        onPanResponderMove: () => {
            console.log('moving');
        }
     })
}

render() {
    return (
        <View
            style={styles.container}
            {...this.panResponder.panHandlers}
        >
        </View>
    )
}

Thanks

Answer 1

I had the same problem, and in my case what solved the problem is setting a backgroundColor to the view with the pan responder handlers. If you can't make it colorful (as I couldn't), just set the backgroundColor to something unnoticeable, like rgba(255,255,255,0.01)

It seems that android ignores pan responder handlers on transparent views

Answer 2

It seems, onResponder... callbacks only works after grant current view as responder, ie you should return true from one of these callbacks (dependent on gesture type and event phase): onStartShouldSetResponder, onStartShouldSetResponderCapture, onMoveShouldSetResponder, onMoveShouldSetResponderCapture. In my opinion this is a quite correct behaviour.