React Native：将Pan Responder事件从视图传播到内部滚动视图

Question

我在具有平移的动画视图中有一个ScrollView。

<Animated.View {...this.panResponder.panHandlers}>
    <ScrollView>
    ...
    </ScrollView>
<Animated.View>

这是我的屏幕的示例视图：

用户应该能够向上滑动，而可拖动区域应该向上捕捉，如下所示：

现在我的问题是Scrollview。我希望用户能够在其中滚动内容。

用户查看完内部内容并向上滚动（通过执行向下滑动动作）并尝试进一步滑动之后，可拖动区域应向下移动到其原始位置。

我尝试了各种方法，主要侧重于禁用和启用ScrollView的滚动，以防止其干扰平移。

我当前的解决方案并不理想。

我的主要问题是这两种方法：

onStartShouldSetPanResponder 
onStartShouldSetPanResponderCapture

不知道我的假设是否正确，但是这些方法决定了View是否应捕获触摸事件。我要么允许平移，要么让ScrollView捕获事件。

我的问题是我需要以某种方式知道用户打算在其他平移处理程序加入之前做什么。但是我无法知道，直到用户向下或向上移动为止。要知道方向，我需要事件传递给onPanResponderMove处理程序。

因此，从本质上讲，我什至在不知道用户滑动方向之前，需要决定是否应该拖动视图。目前这是不可能的。

希望我在这里想念一些简单的东西。

编辑：找到一个类似的问题（无答案）： 向上拖动ScrollView，然后在React Native中继续滚动

Answer 1

显然问题出在本机层。

https://github.com/facebook/react-native/issues/9545#issuecomment-245014488

我发现没有触发 onterminationrequest 是由 Native Layer 引起的。

修改 react-native\ReactAndroid\src\main\java\com\facebook\react\views\scroll\ReactScrollView.java ，注释 LineNativeGestureUtil.notifyNativeGestureStarted(this, ev);然后从源代码构建，您将看到 ScrollView 外的 PanResponder 现在按预期进行控制。

PS：我还不能从源代码构建。从源代码构建显然比我想象的要困难得多。

编辑 1：

是的，它奏效了。我从 node_modules 中删除了 react-native 文件夹，然后 git 将 react-native 存储库直接克隆到node_modules. 并签出版本0.59.1。然后，按照此说明进行操作。对于此示例，我不必将任何 PanReponder 或 Responder 设置为ScrollView.

但是，它当然不会按预期工作。我不得不上下保持按下手势。如果一直向上滚动，然后尝试将其向下移动，它将 panResponde 将蓝色区域向下对齐。内容将保持不变。

结论：即使从 ScrollView 中删除强锁定，实现完整的所需行为也非常复杂。现在我们必须结合onMoveShouldSetPanResponderScrollView 的onScroll，并处理初始按下事件，以获取增量 Y 以便我们最终可以正确移动父视图，一旦它到达顶部。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, Dimensions, PanResponder, Animated, ScrollView } from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component {

  constructor(props) {
    super(props);
    
    const {height, width} = Dimensions.get('window');

    const initialPosition = {x: 0, y: height - 70}
    const position = new Animated.ValueXY(initialPosition);

    const parentResponder = PanResponder.create({
      onMoveShouldSetPanResponderCapture: (e, gestureState) => {
        return false
      },
      onStartShouldSetPanResponder: () => false,
      onMoveShouldSetPanResponder: (e, gestureState) =>  {
        if (this.state.toTop) {
          return gestureState.dy > 6
        } else {
          return gestureState.dy < -6
        }
      },
      onPanResponderTerminationRequest: () => false,
      onPanResponderMove: (evt, gestureState) => {
        let newy = gestureState.dy
        if (this.state.toTop && newy < 0 ) return
        if (this.state.toTop) {
          position.setValue({x: 0, y: newy});
        } else {
          position.setValue({x: 0, y: initialPosition.y + newy});
        }
      },
      onPanResponderRelease: (evt, gestureState) => {
        if (this.state.toTop) {
          if (gestureState.dy > 50) {
            this.snapToBottom(initialPosition)
          } else {
            this.snapToTop()
          }
        } else {
          if (gestureState.dy < -90) {
            this.snapToTop()
          } else {
            this.snapToBottom(initialPosition)
          }
        }
      },
    });

    this.offset = 0;
    this.parentResponder = parentResponder;
    this.state = { position, toTop: false };
  }

  snapToTop = () => {
    Animated.timing(this.state.position, {
      toValue: {x: 0, y: 0},
      duration: 300,
    }).start(() => {});
    this.setState({ toTop: true })
  }

  snapToBottom = (initialPosition) => {
    Animated.timing(this.state.position, {
      toValue: initialPosition,
      duration: 150,
    }).start(() => {});
    this.setState({ toTop: false })
  }

  hasReachedTop({layoutMeasurement, contentOffset, contentSize}){
    return contentOffset.y == 0;
  }

  render() {
    const {height} = Dimensions.get('window');

    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
        <Animated.View style={[styles.draggable, { height }, this.state.position.getLayout()]} {...this.parentResponder.panHandlers}>
          <Text style={styles.dragHandle}>=</Text>
          <ScrollView style={styles.scroll}>
            <Text style={{fontSize:44}}>Lorem Ipsum</Text>
            <Text style={{fontSize:44}}>dolor sit amet</Text>
            <Text style={{fontSize:44}}>consectetur adipiscing elit.</Text>
            <Text style={{fontSize:44}}>In ut ullamcorper leo.</Text>
            <Text style={{fontSize:44}}>Sed sed hendrerit nulla,</Text>
            <Text style={{fontSize:44}}>sed ullamcorper nisi.</Text>
            <Text style={{fontSize:44}}>Mauris nec eros luctus</Text>
            <Text style={{fontSize:44}}>leo vulputate ullamcorper</Text>
            <Text style={{fontSize:44}}>et commodo nulla.</Text>
            <Text style={{fontSize:44}}>Nullam id turpis vitae</Text>
            <Text style={{fontSize:44}}>risus aliquet dignissim</Text>
            <Text style={{fontSize:44}}>at eget quam.</Text>
            <Text style={{fontSize:44}}>Nulla facilisi.</Text>
            <Text style={{fontSize:44}}>Vivamus luctus lacus</Text>
            <Text style={{fontSize:44}}>eu efficitur mattis</Text>
          </ScrollView>
        </Animated.View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  draggable: {
      position: 'absolute',
      right: 0,
      backgroundColor: 'skyblue',
      alignItems: 'center'
  },
  dragHandle: {
    fontSize: 22,
    color: '#707070',
    height: 60
  },
  scroll: {
    paddingLeft: 10,
    paddingRight: 10
  }
});