在 React Native 中检测向左滑动

Posted 2023-02-22

【中文标题】在 React Native 中检测向左滑动

【英文标题】：Detect swipe left in React Native

【发布时间】：2018-02-01 21:55:03

【问题描述】：

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

是否有必要使用 PanResponder 还是可以更简单一点？

【问题讨论】：

没那么难，你可以使用'onResponderMove'事件，facebook.github.io/react-native/docs/…

【参考方案1】：

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

【讨论】：

这仍然相关吗？ github页面两年没更新了

@xiaolingxiao API没变，基本上是PanResponder的封装组件

【参考方案2】：

我发现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'
    />

【讨论】：

这是完美的解决方案，谢谢。

完美。简单的。直截了当

【参考方案3】：

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

【讨论】：

值得一提的是，Nikhil Gogineni 似乎是github.com/nikhil-gogineni/react-native-swipe-gesture 的作者，因为源代码如此简短且易于查看，恕我直言，这并没有错。

谢谢！希望这个模块有帮助！ @B--rian

我发现这比其他选项更好，响应更快。谢谢@NikhilGogineni

【参考方案4】：

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

首先，我们将创建一个hook：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 属性来处理精度。 并修改原始代码以用于普通类组件而不是钩子。

【讨论】：

执行得非常漂亮！

【参考方案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

【参考方案6】：

您可以只使用来自 react-native-gesture-handler link to the docs 的 FlingGestureHandler。用它包裹你的视图。这就是你做的。

import  Directions, Gesture, GestureDetector  from 'react-native-gesture-handler'


const MyComponentWithLeftSwipe = () => 
    const flingGestureLeft = Gesture
        .Fling()
        .direction(Directions.LEFT)
        .onEnd(() => console.log("I was swiped!")

    return <GestureDetector gesture=flingGestureLeft>
        <View>
        ...
        </View>
    </GestureDetector>