1

我正在尝试将 react-native-reanimated 与 react-native-gesture-handler 一起使用，但我无法使其正常工作。似乎手势处理程序没有触发事件。我按照说明安装 react-native-gesture-handler，更新了 CLI，在 MainActivity.java 中添加了一些代码（https://docs.swmansion.com/react-native-gesture-handler/docs/#android）

我正在使用 RN@0.63.2、node@10.18.0 和 react-native-gesture-handler@1.7.0

我目前正在关注本教程，但我无法让 PanGestureHandler 工作，而且它也不能与 TapGestureHandler 一起工作。这是代码（基本上是教程中的代码）：

import {PanGestureHandler, State} from 'react-native-gesture-handler';
import React, {Component} from 'react';
import {Text, View, StyleSheet} from 'react-native';
import Animated from 'react-native-reanimated';

const {event, Value, cond, eq, add, set} = Animated;

const styles = StyleSheet.create({
  box: {
    backgroundColor: 'red',
    width: 200,
    height: 200,
    alignSelf: 'center',
  },
});

function interaction(gestureTranslation, gestureState) {
  console.log('test');
  const start = new Value(0);
  const dragging = new Value(0);
  const position = new Value(0);

  return cond(
    eq(gestureState, State.ACTIVE),
    [
      cond(eq(dragging, 0), [set(start, position)]),
      set(position, add(start, gestureTranslation)),
    ],
    [set(dragging, 0), position],
  );
}

export class Main extends Component {
  constructor(props) {
    super(props);
    const gestureX = new Value(0);
    const state = new Value(-1);

    this._onGestureEvent = event([
      {
        nativeEvent: {
          translationX: gestureX,
          state: state,
        },
      },
    ]);

    this._transX = interaction(gestureX, state);
  }

  render() {
    return (
      <PanGestureHandler
        onGestureEvent={this._onGestureEvent}
        onHandlerStateChange={this._onGestureEvent}>
        <Animated.View
          style={[styles.box, {transform: [{translateX: this._transX}]}]}
        />
      </PanGestureHandler>
    );
  }
}

export default Main;

你们有什么想法为什么这不起作用？

4

1 回答 1

-1

我最近也有同样的问题。尝试关闭调试。那是为我做的。

于 2021-04-18T21:01:35.817 回答