反應本機PanResponder

Question

我正在嘗試在React Native中使用PanResponder。

非常簡單-我有2個元素：

1. 視圖，它是屏幕的寬度和高度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

我對您的代碼做了一些更改，請嘗試此操作

 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> ) } } 

讓我知道它是否起作用...

Answer 2

是的，行得通。 我復制並粘貼了您的班級以代替我的班級，現在可以使用了。 我可以在二維上拖動它，放開時可以回到開始的地方。 謝謝。

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

另外，當我刪除Animated.Spring時，可以拖放圓-但是當我第二次拖動時，圓從原始點開始。 關於如何在我離開的地方接機的任何建議？ 我嘗試用moveX和moveY替換dx和dy，但是沒有用。 我還嘗試將舊值存儲在變量中，但是它很復雜，因為它是一個Animated值和一個javascript對象。