首页 > 解决方案 > PanGestureHandler 状态改变中断手势

问题描述

我正在使用react-native-gesture-handler 中的PanGestureHandler,一切正常,但是当 onGestureEvent 内部的状态发生更改时,PanGestureHandler停止工作,我必须松开手指并再次触摸才能开始手势。请检查下面描述我的问题的代码:

import React, {useState} from 'react';
import {View, Text} from 'react-native';
import {PanGestureHandler, State} from 'react-native-gesture-handler';
import FastImage from 'react-native-fast-image';
import styles from '../Styles/HomeStyles.js';

const PanResp = () => {
  const [testState, setTestState] = useState('State....');

  const gestureEventHandler = ({nativeEvent}) => {
    if (nativeEvent.x + nativeEvent.translationX <= 74) {
      setTestState('New State');
    } else {
      console.log('X Position => ', nativeEvent.x);
    }
  };

  const onDragRelease = () => {
    console.log('Drag Release');
  };

  return (
    <View>
      <PanGestureHandler
        onGestureEvent={gestureEventHandler}
        onEnded={onDragRelease}>
        <FastImage
          style={styles.imgIcon}
          source={{uri: 'http://i.imgur.com/LwCYmcM.gif'}}
        />
        <FastImage
          style={styles.imgIcon}
          source={{uri: 'http://i.imgur.com/k5jMsaH.gif'}}
        />
      </PanGestureHandler>
    </View>
  );
};

export default PanResp;

注意:上面的代码工作正常,当状态更新和我从触摸中释放手指时,没有触发 DragRelease 事件,并且 PanGestureHandler 不再响应触摸。从上周开始,我被困在这一点上。

标签: reactjsreact-nativereact-native-gesture-handler

解决方案


推荐阅读