react native触摸遥控器解决方案

最新推荐文章于 2024-08-31 07:57:34 发布

原创

最新推荐文章于 2024-08-31 07:57:34 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react native

完整代码（不可完全复制，仅供参考逻辑）

/**
 * Created by apple on 2016/11/7.
 */
import React,{ Component } from 'react';
import {
    View,
    Navigator,
    StyleSheet,
    Image,
    TouchableOpacity,
    Alert,
    Text,
    TouchableHighlight,
    PanResponder,
    Animated,
    Easing
} from 'react-native';
import Language from '../../common/language';
import Nav from '../../common/MineNav';
import Util from '../../common/common';
import Gsoap from '../../common/gsoap';
import * as TYPES from '../../common/types';

var TouchRemote = React.createClass({
    debugMsg: true,
    _panResponder: null,
    movePos: [],
    bounceValue: new Animated.Value(0),
    getDefaultProps: function () {
        return ({
            controlType: "keyBoardType",
            connectSTBToken: {}
        });
    },
    getInitialState: function () {
        return {
            powerState: false,
            homeState: false,
            keyBoard: false,//up down left right ok
            menuState: false,
            backState: false,
            volumeUpState: false,
            volumeDownState: false
        };
    },
    componentWillMount: function () {
        this.console("componentWillMount===controlType:" + this.props.controlType + ";connectSTBToken:" + JSON.stringify(this.props.connectSTBToken));
        this._panResponder = PanResponder.create({
            // 要求成为响应者：
            onStartShouldSetPanResponder: (evt, gestureState) => true,
            onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
            onMoveShouldSetPanResponder: (evt, gestureState) => true,
            onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,

            onPanResponderGrant: (evt, gestureState) => {
                // 开始手势操作。给用户一些视觉反馈，让他们知道发生了什么事情！
                // gestureState.{x,y}0 现在会被设置为0
                this.movePos = [];
                this.console("touch start===X:" + gestureState.x0 + "===Y:" + gestureState.y0);
                this.movePos.push(Math.floor(gestureState.x0), Math.floor(gestureState.y0));
            },
            onPanResponderMove: (evt, gestureState) => {
                // 最近一次的移动距离为gestureState.move{X,Y}
                // 从成为响应者开始时的累计手势移动距离为gestureState.d{x,y}
            },
            onPanResponderTerminationRequest: (evt, gestureState) => true,
            onPanResponderRelease: (evt, gestureState) => {
                // 用户放开了所有的触摸点，且此时视图已经成为了响应者。
                // 一般来说这意味着一个手势操作已经成功完成。
                this.console("touch end===moveX:" + gestureState.moveX + "===moveY:" + gestureState.moveY);
                this.movePos.push(Math.floor(gestureState.moveX), Math.floor(gestureState.moveY));
                this.moveActionEnd(this.movePos);
            },
            onPanResponderTerminate: (evt, gestureState) => {
                // 另一个组件已经成为了新的响应者，所以当前手势将被取消。
                this.console("what???");
            },
            onShouldBlockNativeResponder: (evt, gestureState) => {
                // 返回一个布尔值，决定