logo标签列表

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

react-nativereact-animated
14

我在一个带有平移的动画视图中放置了一个ScrollView。

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

以下是我的屏幕的示例视图：

输入图像描述

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

输入图像描述

现在我的问题是ScrollView。我希望用户能够滚动内部内容。

当用户完成查看内部内容并向上滑动到底部，然后尝试进一步向上滑动时，拖动区域应该向下移动到其原始位置。

我尝试过各种方法，主要集中在禁用和启用ScrollView的滚动，以防止其与平移干扰。

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

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

onStartShouldSetPanResponder 
onStartShouldSetPanResponderCapture

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

我的问题是，在其他平移处理程序启动之前，我需要在某种程度上知道用户的意图。但是，直到用户向下或向上移动才能知道那个意图。为了知道方向，我需要将事件传递给 onPanResponderMove 处理程序。

因此，实质上，在甚至不知道用户滑动方向之前，我需要决定是否允许视图被拖动。目前这是不可能的。

希望我漏掉了一些简单的东西。

编辑：找到一个类似的问题（没有答案）：Drag up a ScrollView then continue scroll in React Native

我仍在等待更多信息，但目前我已经想出了不同的方法。我将放弃可拖动区域中的ScrollView，并专门处理单个长视图和PanResponder。缺点是没有滚动条指示器，但我可以接受这一点。 - Gilbert Nwaiwu
我会尽快处理。我已经实现了你之前发布的库的功能，它非常简单明了。不幸的是，它不支持我正在寻找的一些平移功能。 - Gilbert Nwaiwu
看一下 https://github.com/kmagiera/react-native-gesture-handler，它比react-native自带的更灵活。 - vonovak
我甚至无法使任何响应器回调在ScrollView上工作。你能吗？ - diogenesgg
我采用了不同的方法。使用PanResponder控制ScrollView的行为有些棘手。现在，我只是使用一个绝对定位的View，并使用可变的transform来模拟粘性ScrollView的垂直位置。 - Gilbert Nwaiwu
显示剩余2条评论
3个回答
9

显然问题在本地层。

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中的代码，注释掉NativeGestureUtil.notifyNativeGestureStarted(this, ev);，然后从源代码构建，你会发现你在ScrollView外部使用的PanResponder现在可以按预期工作了。
PS：我还不能从源代码构建。从源代码构建显然比我想象的要难得多。
编辑1：是的，它起作用了。我从node_modules中删除了react-native文件夹，直接将react-native存储库git克隆到node_modules中。并检出版本0.59.1。然后，按照this的说明进行操作。对于这个例子，我不必为ScrollView设置任何PanReponder或Responder。
然而，它并没有按预期工作。我不得不保持按下手势向上和向下移动。如果您将其滚动到最顶部，然后尝试将其向下移动，它将panResponde以将蓝色区域捕捉下来。内容将保持在上方。
结论：即使从ScrollView中删除了强锁定，实现完整的所需行为仍然相当复杂。现在我们必须将onMoveShouldSetPanResponder与ScrollView的onScroll结合起来，并处理初始按下事件，以获取delta Y，以便一旦达到顶部，我们可以正确地移动父视图。

enter image description here

/**
 * 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
  }
});

嗨@diogenesgg，你的解决方案很棒。我只有一个问题，我对你的代码进行了一些更改，使得我的表格在拉出来时只占屏幕的一半。现在当我开始向下拉我的表格时，表格视图会一开始跑到屏幕顶部，然后才开始向下移动。你能帮我解决这个问题吗？ - Shubham Bisht
还有，我如何在不使表格下移的情况下向下滚动表格？ - Shubham Bisht
这个真的对任何人都有效吗？我甚至在我的安卓设备上使用expo试过了，但它不起作用。 - pravchuk
2
这看起来很有趣，但并不完全符合我的需求。我需要可拖动区域平滑地捕捉并接收滑动速度等信息。Android中的ScrollView存在一些限制，所以这对我来说行不通。不过还是谢谢你提供的信息 :) - Gilbert Nwaiwu
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接