在 React Native 中检测向左滑动答案

【问题标题】：Detect swipe left in React Native在 React Native 中检测向左滑动
【发布时间】：2018-02-01 21:55:03
【问题描述】：

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

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

【问题讨论】：

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

标签： javascript node.js reactjs react-native

【解决方案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>
}

【讨论】：