Question

我在tab导航器的一个屏幕内有一个webview。 webview中有一些元素，用户可以在其中水平滑动以显示更多信息。我遇到的问题是，每当用户尝试在webview内部水平滑动时，选项卡导航器会检测到滑动，这会导致选项卡发生变化。这只发生在Android设备上，而不是iOS设备上。

要解决此问题，我正在尝试在Webview中设置PanResponder，但它无法正常工作。甚至没有调用相关的方法，因为当我在webview上拖动手指时不会打印控制台日志。以下是我的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

将componentWillMount（）替换为构造函数（）

所以在这里

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

}

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

1 个答案: