版权声明:本人原创,码字辛苦,整理代码更是辛苦,转发请说明原处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
},
});