当 panResponder 开始移动时，如何在父类中调用自定义函数

Question

如果我在 react-native 中有一个名为 <Draggable /> 的导入组件，

当onPanResponderGrant决定手势已启动时，如何在父组件中调用自定义函数？

你会看到我正在将'A'和'B'的id传递到<Draggable />中，我希望能够在触摸时将它们召回，并将它们显示在主View底部的infoBox中？

// App
import React, { Component } from 'react'; 
import { View, Text, } from 'react-native';
import styles from './cust/styles';
import Draggable from './cust/draggable';
export default class Viewport extends Component {
    constructor(props){
        super(props);
        this.state = {
            dID  : null,
        };
    }
    render(){
        return (
          <View style={styles.mainContainer}>
                <View style={styles.draggableContainer}>
                      <Text>Draggable Container</Text>
                      <Draggable id='A' />
                      <Draggable id='B' />
                </View>
                <View style={styles.infoBar}>{this.infoBarData()}</View>
          </View>
        );
    }
    infoBarData(){
        if (this.state.dID) {
            return(
                <Text>{this.state.dID}</Text>
            )
            
        }
    }
}

和

// Draggable
import React, { Component } from 'react'; 
import { Text, PanResponder, Animated, } from 'react-native';
import styles from './styles';
class Draggable extends Component {
    constructor(props) {
        super(props);
        this.state = {
            pan : new Animated.ValueXY(),
        };
        this.panResponder = PanResponder.create({
            onStartShouldSetPanResponder    : () => true,
            onPanResponderMove              : Animated.event([null,{
                dx  : this.state.pan.x,
                dy  : this.state.pan.y,
            }]),
            onPanResponderRelease           : () => {
              Animated.spring(this.state.pan,{toValue:{x:0, y:0}}).start();
            }
        });
    }
    render() {
        return (
            <Animated.View
                {...this.panResponder.panHandlers}
                style={[this.state.pan.getLayout(), styles.circleAlt, styles.position]}>
                <Text style={styles.textAlt}>Drag me!</Text>
                <Text style={styles.textNum}>{this.props.id}</Text>
            </Animated.View>
        )
    }
}
export default Draggable;

编辑

我已将以下内容添加到父类中

// Object
<Draggable 
  onPanResponderMove={this.onStopMove}
  onPanResponderRelease={this.onMove}
  id='A' />
// Methods
onMove = (dID) => {
  this.setState({ dID });
}
onStopMove = () => {
  this.setState({ dID: null });
}

我将以下内容添加到Draggable类中。

// Methods
_handleOnPanResponderMove(evt, gestureState) {
    Animated.event([null,{
        // These animate movement on the X/Y axis
        dx  : this.state.pan.x,
        dy  : this.state.pan.y,
    }]);
    this.props.onPanResponderRelease(this.props.id);
}

但是当我将动画事件移出PanResponder.create({})

通过执行以下操作，它将失去被拖动的能力。我认为这与

PanResponder.create({
    ..., 
    onPanResponder : this._handleOnPanResponder.bind(this),
    ...,
})

未返回值？

编辑 2

我也尝试添加以下内容，但同样没有奏效。

PanResponder.create({
    ..., 
    onPanResponder : (evt ,gesture) => {
        Animated.event([null,{
            // These animate movement on the X/Y axis
            dx  : this.state.pan.x,
            dy  : this.state.pan.y,
    }]);
    this.props.onPanResponderRelease(this.props.id);
    }
    ...,
})

Answer 1

你需要传递一个带有 Draggable 组件的回调处理程序，比如

<Draggable id="A" gestureHandler={(data) => {
/*
  do whatever you want to do with the data, like store it into state
*/
}}

在 Draggable 组件中，根据您的要求调用此处理程序(当确定手势已启动时(，例如

if (this.props.gestureHandler instanceof Function) {
   this.props.gestureHandler.call(this, this.props.id);
}

Answer 2

好的，

因此，这是适用于可能遇到此问题的任何人的代码。

// App
import React, { Component } from 'react'; 
import {
    View,
    Text,
} from 'react-native';
import styles from './cust/styles';
import Draggable from './cust/draggable';
export default class Viewport extends Component {
    constructor(props){
        super(props);
        this.state = {
            dID  : null,
        };
    }
    render(){
        return (
          <View style={styles.mainContainer}>
                <View style={styles.draggableContainer}>
                      <Text>Draggable Container</Text>
                      <Draggable 
                        onPanResponderGrant={this.onMove}
                        onPanResponderRelease={this.onStopMove}
                        id='A' />
                      <Draggable
                        onPanResponderGrant={this.onMove}
                        onPanResponderRelease={this.onStopMove}
                        id='B' />
                </View>
                <View style={styles.infoBar}>{this.printInfo()}</View>
          </View>
        );
    }
    onMove = (dID) => {
      this.setState({ dID });
    }
    onStopMove = () => {
      this.setState({ dID: null });
    }
    printInfo(){
      if (this.state.dID) {  
        return(
          <Text>{this.state.dID}</Text>
        );
      }
    }
}

// Draggable
import React, { Component } from 'react'; 
import {
    Text,
    PanResponder,
    Animated,
} from 'react-native';
import styles from './styles';
class Draggable extends Component {
    constructor(props) {
        super(props);
        this.state = {
            pan                 : new Animated.ValueXY(),
        };
    this.panResponder = PanResponder.create({
        onStartShouldSetPanResponder    : () => true,
        onPanResponderGrant : () => {
          this.props.onPanResponderGrant(this.props.id)
        },
        onPanResponderMove              : Animated.event([null,{
            dx  : this.state.pan.x,
            dy  : this.state.pan.y,
        }]),
        onPanResponderRelease           : () => {
                  Animated.spring(
                    this.state.pan,
                    {toValue:{x:0, y:0}}
                  ).start();
                  this.props.onPanResponderRelease();
              },
    });
    }
    render() {
        return (
            <Animated.View
                {...this.panResponder.panHandlers}
                style={[this.state.pan.getLayout(), styles.circleAlt, styles.position]}>
                <Text style={styles.textAlt}>Drag me!</Text>
                <Text style={styles.textNum}>{this.props.id}</Text>
            </Animated.View>
        )
    }
}
export default Draggable;