Question

如何在React Native中检测整个屏幕上的左侧滑动？

是否有必要使用PanResponder或者它可以更轻松一点吗？

Answer 1

现有组件react-native-swipe-gestures用于处理向上，向下，向左和向右方向的滑动手势，请参阅https://github.com/glepur/react-native-swipe-gestures

Answer 2

我使用滚动视图和触摸位置制作了这个简单的解决方案。
它有一个非常干净的实现，没有繁重的组件或外部模块。
您还可以将其与 <View> 组件一起使用，而不是滚动视图。

首先，我们将创建一个钩子：useSwipe.tsx

import { Dimensions } from 'react-native';
const windowWidth = Dimensions.get('window').width;

export function useSwipe(onSwipeLeft?: any, onSwipeRight?: any, rangeOffset = 4) {

    let firstTouch = 0
    
    // set user touch start position
    function onTouchStart(e: any) {
        firstTouch = e.nativeEvent.pageX
    }

    // when touch ends check for swipe directions
    function onTouchEnd(e: any){

        // get touch position and screen size
        const positionX = e.nativeEvent.pageX
        const range = windowWidth / rangeOffset

        // check if position is growing positively and has reached specified range
        if(positionX - firstTouch > range){
            onSwipeRight && onSwipeRight()
        }
        // check if position is growing negatively and has reached specified range
        else if(firstTouch - positionX > range){
            onSwipeLeft && onSwipeLeft()
        }
    }

    return {onTouchStart, onTouchEnd};
}

然后，在您的组件中...就我而言，我将使用：exampleComponent.tsx

导入之前的 useSwipe 钩子。
将 onTouchStart 和 onTouchEnd 事件添加到您的滚动视图。

示例组件

import * as React from 'react';
import { ScrollView } from 'react-native';
import { useSwipe } from '../hooks/useSwipe'

export function ExampleComponent(props: any) {
    const { onTouchStart, onTouchEnd } = useSwipe(onSwipeLeft, onSwipeRight, 6)

    function onSwipeLeft(){
        console.log('SWIPE_LEFT')
    }

    function onSwipeRight(){
        console.log('SWIPE_RIGHT')
    }
   
    return (
        <ScrollView onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>
            {props.children}
        </ScrollView>
    );
}

您可以使用 offsetRange 属性来处理精度。
并修改原始代码以用于普通类组件而不是钩子。

Answer 3

您可以使用react-native-swipe-gesture。您不需要使用npm安装任何第三方模块。将文件下载到您的项目中，然后按照给定的步骤

Answer 4

您可以使用React Native Gesture Handler，尽管它可以提供更多的手势然后滑动。滑动example。

Answer 5

如果您使用的是受管理的Expo项目，则此处记录了手势处理程序：https://docs.expo.io/versions/latest/sdk/gesture-handler/

可在以下位置找到源代码文档：https://docs.swmansion.com/react-native-gesture-handler/docs/

要刷卡，我认为您需要使用FlingGestureHandler： https://docs.swmansion.com/react-native-gesture-handler/docs/handler-fling

Answer 6

我发现 react-native-swipe-gestures 不稳定（滑动在 android 上随机工作）并且 react-native-gesture-handler 过于复杂（添加到项目中需要付出太多努力）。

基于 Kuza Grave 答案的简化解决方案，谁的解决方案完美且非常简单：

<View
      onTouchStart={e=> this.touchY = e.nativeEvent.pageY}
      onTouchEnd={e => {
        if (this.touchY - e.nativeEvent.pageY > 20)
          console.log('Swiped up')
      }}
      style={{height: 300, backgroundColor: '#ccc'}}
    />

检测React Native中的左侧滑动

6 个答案: