反应本机 PanResponder

Question

我正在尝试在 React Native 中使用 PanResponder。

非常简单 - 我有 2 个元素：

1. 一个View，即屏幕的宽度和高度为100。
2. Animated.View，宽 50，高 50，边框半径 25，所以它是一个圆形。圆圈位于主视图内。

我希望能够有效地在屏幕上拖动圆圈。有人可以帮我吗？

到目前为止，这是我的代码：

import React from 'react';
import { Animated, Dimensions, PanResponder, StyleSheet, View } from 'react-native';



export class MySlider extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            pan: new Animated.ValueXY()
        };
    }

    _panResponder = PanResponder.create({
            // Ask to be the responder:
            onStartShouldSetPanResponder: (evt, gestureState) => true,
            onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
            onMoveShouldSetPanResponder: (evt, gestureState) => true,
            onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,

            onPanResponderGrant: (evt, gestureState) => {
                this.state.pan.setValue({x: 0, y: 0});
                return true
            },
            onPanResponderMove: (evt, gestureState) => {
                Animated.event([null, {dx: this.state.pan.x, dy: this.state.pan.y}])
                return true
            },
            onPanResponderTerminationRequest: (evt, gestureState) => true,
            onPanResponderRelease: (evt, gestureState) => {
                return true
            },
            onPanResponderTerminate: (evt, gestureState) => {
                return true
            },
            onShouldBlockNativeResponder: (evt, gestureState) => {
                return true;
            },
        });

    render() {
        let { pan } = this.state;
        let [translateX, translateY] = [pan.x, pan.y];
        const styles = StyleSheet.create({
            mover: {
                transform: [{translateX:translateX}, {translateY:5}],
                height: 50,
                width: 50,
                borderRadius: 25,
                backgroundColor: 'blue'
            },
            holder: {
                height: 100,
                width: Dimensions.get('window').width,
                backgroundColor: 'yellow'
            }
        });
        return (
            <View style={styles.holder}>
                <Animated.View style={styles.mover} {...this._panResponder.panHandlers}/>   
            </View>
            )
    }
}

Answer 1

是的，有效。我复制并粘贴了你的课程来代替我的课程，现在它可以工作了。我可以在两个维度上拖动它，当我释放它时它会回到它开始的地方。谢谢。

什么是this.setState({isAddNewSession:true})、this.setState({isAddNewSessionModal:true}) 和this.setState({isAddNewSession:false})??

此外，当我删除 Animated.Spring 时，我可以拖放圆圈 - 但是当我再次拖动它时，圆圈会从原始位置开始。关于如何从我离开的地方继续的任何建议？我尝试用 moveX 和 moveY 替换 dx 和 dy 但它没有奏效。我也尝试将旧值存储在一个变量中，但它很复杂，因为它是一个动画值和一个 javascript 对象。

Answer 2

我稍微修改了你的代码 所以试试这个

import React,{Component} from 'react'
import {
  PanResponder,
  View,
  Animated,
  StyleSheet,
  Dimensions
} from 'react-native'

export default class MySlider extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            pan: new Animated.ValueXY()
        };
    

    this._panResponder = PanResponder.create({
     onStartShouldSetPanResponder : () => true,
      onPanResponderGrant: (e, gestureState) => {
        this.setState({isAddNewSession:true})
      },
      onPanResponderMove : Animated.event([null,{ //Step 3

          dx : this.state.pan.x,
          dy : this.state.pan.y
      }]),
      onPanResponderRelease           : (e, gesture) => {  this.setState({isAddNewSessionModal:true},
        
      )
        Animated.spring(            
            this.state.pan,         
            {toValue:{x:0,y:0}}     //To default position you can delete this animated.spring() 
        ).start();
        this.setState({isAddNewSession:false})
    },
        });
}
    render() {
        let { pan } = this.state;
        let [translateX, translateY] = [pan.x, pan.y];
        const styles = StyleSheet.create({
            mover: {
                transform: [{translateX:translateX}, {translateY:translateY}],
                height: 50,
                width: 50,
                position:'absolute',
                top:0,
                borderRadius: 25,
                zIndex:20,
                backgroundColor: 'blue'
            },
            holder: {
                height: 100,
                width: Dimensions.get('window').width,
                backgroundColor: 'yellow'
            }
        });
        return (
            <View style={styles.holder}>
                <Animated.View style={styles.mover} {...this._panResponder.panHandlers}/>   
            </View>
            )
    }
}

让我知道它是否有效......