ios - React-native:panResponder 内部的 ScrollView

Question

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

1. 如果我在 PanResponder.onMoveShouldSetPanResponder() 中放置一个断点，在我跨过之前，scrollView 将正常滚动，但一旦我释放断点，scrollView 就会停止工作。

2. 如果我修改 ScrollResponder.js，并在 scrollResponderHandleStartShouldSetResponderCapture() 中返回 true - 它过去常常在运行时返回 false；并在 scrollResponderHandleTerminationRequest() 中返回 false，scrollView 工作正常，但当然，因为它吞没了事件，所以外部 PanResponder 将不会获得事件。

   <

所以问题是:

1. 我想让 ScrollView 正常工作，并且不吞下事件。有人知道方法是什么吗？
2. 响应系统在 iOS 上如何运作？ react-native 响应系统文档没有向我解释这一点。

Answer 1

我最终通过将 ScrollView 包裹在 View 中并将 ScrollView 的样式设置为有限高度来解决此问题。

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我花了很多时间来解决这个问题。希望这能帮助那些对同样问题感到困惑的人。