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

Question

我在標簽導航器的屏幕之一內有一個webview。 Web視圖中有一些元素，用戶可以水平滑動以顯示更多信息。 我的問題是，每當用戶嘗試在Web視圖內水平滑動時，選項卡導航器就會改為檢測到滑動，這會導致選項卡更改。 這僅在Android設備上發生，而在iOS設備上不發生。

為了解決此問題，我試圖在Webview內設置PanResponder，但是它不起作用。 甚至沒有調用相關方法，因為當我在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

用Constructor（）替換componentWillMount（）

所以在這里，

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

}