如果我在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);
    }
    ...,
})