PanResponder学习

版权声明:本人原创,码字辛苦,整理代码更是辛苦,转发请说明原处https://blog.csdn.net/qq_37815596谢谢! https://blog.csdn.net/qq_37815596/article/details/89385091

废话不多说,上代码

import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableHighlight, PanResponder } from 'react-native';
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ViewBgColor: 'yellow',
      numberActiveTouches:0,
      stateID:0,
      moveX:0,
      moveY:0,
      x0:0,
      y0:0,
      dx:0,
      dy:0,
      vx:0,
      vy:0
    }
  }
  componentWillMount() {
    this._panResponder = PanResponder.create({
      onStartShouldSetPanResponder: () => {
        return true;
      },
      onMoveShouldSetPanResponder: () => {
        return true;
      },
      //开始手势操作
      onPanResponderGrant: () => {
        this._highlight();
      },
      //触摸点移动
      onPanResponderMove: (evt, gestureState) => {
        this._handlePanResponderMove(evt, gestureState)
      },
      //用户放开了所有的触摸点
      onPanResponderRelease: () => {
        this._unhighlight();
      },

      onPanResponderTerminate: () => {
        return true;
      },
    });
  }
  _unhighlight() {
    this.setState({ ViewBgColor: 'yellow' })
  }
  _highlight() {
    this.setState({ ViewBgColor: 'purple' })
  }
  onPress = () => {
    alert("press button")
  }
  _handlePanResponderMove(evt, gestureState){
    this.setState({
      moveX:gestureState.moveX,
      moveY:gestureState.moveY,
      numberActiveTouches:gestureState.numberActiveTouches,
      stateID:gestureState.stateID,
      dx:gestureState.dx,
      dy:gestureState.dy,
      vx:gestureState.vx,
      vy:gestureState.vy,
    })
  }
  render() {
    return (
      <View style={styles.container}>
        <TouchableHighlight onPress={this.onPress}>
          <Text style={styles.welcome}>TouchableHighlight组件</Text>
        </TouchableHighlight>
        <Text style={styles.welcome}>panResponder组件</Text>
        <View style={[styles.redView, { backgroundColor: this.state.ViewBgColor }]}
          {...this._panResponder.panHandlers}/>
        <Text style={styles.welcome}>
        {this.state.numberActiveTouches}touches,
        dx:{this.state.dx},
        dy:{this.state.dy},
        vx:{this.state.vx},
        vy:{this.state.vy}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  redView: {
    width: "100%",
    height: 400,
    marginTop: 10
  },

});

猜你喜欢

转载自blog.csdn.net/qq_37815596/article/details/89385091