Question

我在PanResponder中使用ScrollView。在Android上它工作正常但在iOS上ScrollView不会滚动。我做了一些调查，这里有一些事实：

如果我在PanResponder.onMoveShouldSetPanResponder()中设置断点，在我跳过之前，scrollView将正常滚动但是一旦我释放断点，scrollView就会停止工作。
如果我修改ScrollResponder.js，并在scrollResponderHandleStartShouldSetResponderCapture()中返回true - 它曾经在运行时返回false;并且在scrollResponderHandleTerminationRequest()中返回false，scrollView工作正常但当然，因为它吞下了事件，外部PanResponder将无法获得该事件。

所以问题是：

我想让scrollview工作，不来吞下这个事件。任何人都知道方法是什么？
响应系统如何在iOS上运行？本应答反应系统的反应系统doc并没有向我解释。

Answer 1

在PanResponder中，是一个返回当前触摸位置的事件。您可以使用它来比较两个值以执行滚动。

Answer 2

最后，我将滚动视图包裹在一个视图中，然后将滚动视图的样式设置为有限的高度。

import * as React from 'react';
import { Text, View, StyleSheet,PanResponder,Animated,ScrollView,Dimensions} from 'react-native';
import { Constants } from 'expo';

const WINDOW_WIDTH = Dimensions.get("window").width;
const WINDOW_HEIGHT = Dimensions.get("window").height;
// You can import from local files

export default class App extends React.Component {
  constructor(props){
    super(props);
    this.minTop = 100;
    this.maxTop = 500;
    this.state={
      AnimatedTop:new Animated.Value(0),
    }
  }

  componentWillMount(){
    let that = this;
    this._previousTop = 100;
    this._panResponder = PanResponder.create({
      onMoveShouldSetPanResponder(){
        return true;
      },
      onPanResponderGrant(){
        that._previousTop = that.state.AnimatedTop.__getValue();
        return true;
      },
      onPanResponderMove(evt,gestureState){
        let currentTop = that._previousTop + gestureState.dy;
        that.state.AnimatedTop.setValue(that._previousTop+gestureState.dy);

      },
      onPanResponderRelease(){

      }
    })
  }


  render() {
    return (
      <View style={styles.container}>
        <Animated.View
          style={[styles.overlay,{top:this.state.AnimatedTop}]}
          {...this._panResponder.panHandlers}
        >
          <View style={{height:200,backgroundColor:"black"}}></View>
          <View>
            <ScrollView
              style={{height:500}}
            >
              <View style={{backgroundColor:"blue",height:200}}></View>
              <View style={{backgroundColor:"yellow",height:200}}></View>
              <View style={{backgroundColor:"pink",height:200}}></View>
              <View style={{backgroundColor:"red",height:200}}></View>
            </ScrollView>
          </View>
        </Animated.View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  overlay:{
    position:"absolute",
    width:WINDOW_WIDTH,
    height:WINDOW_HEIGHT-100,
  }
});

enter link description here 我花了很多时间解决这个问题。希望这可以帮助困惑相同问题的人。

Answer 3

我现在不知道它是否有用，但是您可以添加该行，

return !(gestureState.dx === 0 && gestureState.dy === 0)

在PanResponder的'onMoveShouldSetPanResponder'属性中，以evt和gestureState作为参数。

您的PanResponder应该如下所示：

this._panResponder = PanResponder.create({
  onMoveShouldSetPanResponder(evt, gestureState){
    return !(gestureState.dx === 0 && gestureState.dy === 0)
  },
  onPanResponderGrant(){
    that._previousTop = that.state.AnimatedTop.__getValue();
    return true;
  },
  onPanResponderMove(evt,gestureState){
    let currentTop = that._previousTop + gestureState.dy;
    that.state.AnimatedTop.setValue(that._previousTop+gestureState.dy);

  },
  onPanResponderRelease(){

  }
})

Answer 4

我已经通过在ScrollView的所有内容中添加onPress处理程序来解决此问题-不管处理程序是否为无操作，滚动视图仍然可以正常工作。

Answer 5

我通过解决了这个问题

onMoveShouldSetPanResponder: (event, gesture) => {
  if (gesture?.moveX > gesture?.moveY) {
    return false;
  }
  return true;
},

就我而言，我在PanResponder中有一个水平Flatlist ...

Answer 6

我不确定你是否还需要这个，但我也会帮助其他人

如果将panResponder放在ScrollView的同级视图上，则ScrollView的行为正常。然后你可以定位兄弟视图

这是解决方法的example。

React-native：panResponder里面的scrollview

6 个答案: