Question

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

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

您会看到我将id 'A'和'B'传递给<Draggable />，我希望能够将其发送回去触摸，并将其显示在主infoBox底部的View？

// 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 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;

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

2 个答案: