react native 拖动 小球 边界控制

发布时间:2019-06-23 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了react native 拖动 小球 边界控制脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

react native 拖动 小球 边界控制

PanResponder类可以将多点触摸操作协调成一个手势。它使得一个单点触摸可以接受更多的触摸操作,也可以用于识别简单的多点触摸手势。
官方地址:https://reactnative.cn/docs/0...

import React, {Component} From "react";
import {View, Text, TouchableOpacity, TouchableWithoutFeedback, Dimensions, PanResponder} from "react-native";
VAR pickerWidth = Dimensions.get("window").width - 20;
var pickerHeight = 200;
export default class PickerPage extends Component {
    constructor(PRops) {
        suPEr(props);
        this.state = {
            left: -15,
            top: -15
        }
    }
    componentWillMount() {
        this._panResponder = PanResponder.create({
            onStartShouldSetPanResponder: () => true,
            onMoveShouldSetResponderCapture: () => true,
            onMoveShouldSetPanResponderCapture: () => true,
            onPanResponderGrant: (e, gestureState) => {
                this.touchX = this.state.left;
                this.touchY = this.state.top;
            },
            onPanResponderMove: (e, g) => {
                let left = this.touchX + g.dx;
                let top = this.touchY + g.dy;
                console.log(left, top);
                if(left >= (pickerWidth - 15)) {
                    left = (pickerWidth - 15);
                }
                if(left <= -15) {
                    left = -15
                }
                if(top <= -15) {
                    top = -15;
                }
                if(top >= 185) {
                    top = 185
                }

                this.setState({
                    left: left,
                    top: top
                })
            },
            onPanResponderRelease: (e, g) => {
                this.touchX = this.state.left;
                this.touchY = this.state.top;
            }
        });
    }
    render() {
        return (
            <View>
                <View style={{width: pickerWidth, height: pickerHeight, backgroundColor: "#468dcc", position: "relative", overflow: "hidden"}}>
                    <View style={{
                        width: 30,
                        height: 30,
                        borderWidth: 4,
                        borderColor: "#000000",
                        borderRadius: 30,
                        position: "absolute",
                        left: this.state.left,
                        top: this.state.top,
                        zIndex: 2,
                        // transform: [
                        //     {translatex: this.state.left},
                        //     {translateY: this.state.top}
                        // ]
                    }} {...this._panResponder.panHandlers}></View>
                </View>
            </View>
        )
    }
    componentDidMount() {}
    componentWillUnmount() {}
}

脚本宝典总结

以上是脚本宝典为你收集整理的react native 拖动 小球 边界控制全部内容,希望文章能够帮你解决react native 拖动 小球 边界控制所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。