Question

我一直在努力让PanResponder以我需要的方式工作。我有一个包含圆圈的视图，当我在该视图上移动手指时，我希望圆圈跟随我。

结构

    import React, { Component } from 'react';
    import {
      Platform,
      StyleSheet,
      Text,
      View,
      TextInput,
      Button
    } from 'react-native';


    export default class App extends Component<Props> {
      constructor(props) {
        super(props);
        this.state = {
          username: '',
          password: ''
        };
      };
      _userSignup() {
        const username = this.state.username;
        const password = this.state.password;
      }
      render() {
        return (
          <TextInput
            onChangeText={(text) => this.setState({username:text})}
            value={this.state.username}
            placeholder = "Username"
          />
          <TextInput
            onChangeText={(password) => this.setState({password})}
            value={this.state.password}
            placeholder = "Password"
          />
          <Button
            title="sign in"
            onPress={this._userSignup}
          />
          </View>
        );
      }
    }

现在，所有教程都显示以下内容

<View {...this.panResponder.panHandlers}>
   <Animated.Circle />
</View>

这个工作非常好，我的问题是我需要在onPanResponderMove: Animated.event([ null, {dx: this.state.pan.x, dy: this.state.pan.y}, ]),中使用更多逻辑，每次我尝试在函数中使用onPanResponderMove时它什么都不做。这是函数的一个例子：

Animated.event

我怎样才能做到这一点？

提前致谢

Answer 1

解决方案如下

onPanResponderMove: Animated.event([null, {dx: this.state.pan.x, dy: this.state.pan.y}], {
  listener: (event, gestureState) => {
    /* my own logic */
  },
}),

Answer 2

https://github.com/facebook/react-native/issues/15880

原因是因为Animation.event（）只生成从onPanResponderMove使用的函数，它还需要默认参数evt，gestureState

以下作品：

onPanResponderMove: (evt, gestureState) => {
  // do whatever you need here
  // be sure to return the Animated.event as it returns a function
  return Animated.event([null, {
    dx: this.state.pan.x,
    dy: this.state.pan.y,
  }])(evt, gestureState)
},

将PanResponder与Animated.event一起使用

2 个答案: