React Native Android WebView的PanResponder无法正常工作

Question

I have a webview inside one of the screens of tab navigator. There are elements inside the webview which the user could swipe horizontally to show more information. The problem I have is that whenever the user tries to swipe horizontally inside the webview, the tab navigator detects the swipe instead and this results in the tab changing. This only happens on Android devices but not iOS devices.

To solve this issue, I am trying to set PanResponder inside the webview but it's not working. The related methods are not even called because the console logs are not printed when I am dragging my finger across the webview. Below is my code for the webview:

import React, { Component } from 'react';
import { WebView, View, PanResponder} from 'react-native';

class CustomWebPage extends Component {
  componentWillMount() {
    this.gesture = PanResponder.create({
      onPanResponderTerminationRequest: () => false,
      onStartShouldSetPanResponder: (evt, gestureState) => true,
      onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
      onMoveShouldSetPanResponder: (evt, gestureState) => true,
      onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
      onPanResponderGrant: (evt, gestureState) => {
        console.log('onPanResponderGrant');
      },
      onPanResponderMove: (evt, gestureState) => {
        console.log('onPanResponderMove: ', evt, ', ', gestureState);
      },
     onPanResponderTerminate: (evt, gestureState) => {
        console.log('onPanResponderTerminate: ', evt, ', ', gestureState);
      },
      onPanResponderRelease: (evt, gestureState) => {
        console.log('onPanResponderRelease: ', evt, ', ', gestureState);
      },
    });
  }

  render() {
    return (
        <WebView
          source={{ uri: 'https://www.google.com.sg/' }}
          style={{ flex: 1 }}
          {...this.gesture.panHandlers}
        />
    );
  }
}

export default CustomWebPage;

Answer 1

Replace componentWillMount() with constructor()

so here,

constructor(props) {
    super(props) {
// Here your PanResponder related codes

}