动画 PanResponder

时间:2021-06-26 07:48:31

标签: reactjs react-native

我被我的代码困住了,我想在我的用户移动屏幕中心的方块时立即发出警报。初始位置方块在左上角。 有人可以帮我吗?

我的文件 Animation.js

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

function pan_responde() {
    const [topPosition, setTopPosition] = useState(0);
    const [leftPosition, setLeftPosition] = useState(0);

    var {height, width } = Dimensions.get('window');
    
    const panResponder = PanResponder.create({
        onStartShouldSetPanResponder: (evt, gestureState) => true,
        onPanResponderMove: (evt, gestureState) => {
            let touches = evt.nativeEvent.touches;

            if(touches.length = 1){
                setTopPosition(touches[0].pageY - height/2);
                setLeftPosition(touches[0].pageX - width/2);
            }
        }
    })
    return (
        <View style={styles.main_container}>
            <View
                {...panResponder.panHandlers}
                style={[styles.animation_view, {top: topPosition, left: leftPosition}]}
            >
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
  main_container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center'
  },
  animation_view: {
    backgroundColor: 'red',
    width: 100,
    height: 100
  }
})


export default pan_responde;

0 个答案:

没有答案
相关问题