react-native手势,
注:本文只是给自己的记录,侵权请联系!
参考链接:https://www.jianshu.com/p/e07a5f2de42d
demo0:
import React from 'react'; import {View, StyleSheet, PanResponder, Text} from "react-native"; export default class Demo extends React.Component { pan1 = PanResponder.create({ onStartShouldSetPanResponderCapture: (_,$gs) => { console.log(JSON.stringify($gs)) console.log('%cpan1', 'color:orange', 'onStartShouldSetPanResponderCapture') }, onStartShouldSetPanResponder: () => { console.log('%cpan1', 'color:orange', 'onStartShouldSetPanResponder') return true }, onMoveShouldSetPanResponderCapture: () => { console.log('%cpan1', 'color:orange', 'onMoveShouldSetPanResponderCapture') }, onMoveShouldSetPanResponder: () => { console.log('%cpan1', 'color:orange', 'onMoveShouldSetPanResponder') }, onPanResponderTerminationRequest: () => { console.log('%cpan1', 'color:orange', 'onPanResponderTerminationRequest') }, onPanResponderGrant: () => { console.log('%cpan1', 'color:orange', 'onPanResponderGrant') }, onPanResponderMove: (_,$gs) => { console.log(JSON.stringify($gs)) console.log('%cpan1', 'color:orange', 'onPanResponderMove') }, onPanResponderRelease: () => { console.log('%cpan1', 'color:orange', 'onPanResponderRelease') }, }) pan2 = PanResponder.create({ onStartShouldSetPanResponderCapture: () => { console.log('%cpan2', 'color:orange', 'onStartShouldSetPanResponderCapture') }, onStartShouldSetPanResponder: () => { console.log('%cpan2', 'color:orange', 'onStartShouldSetPanResponder') }, onMoveShouldSetPanResponderCapture: () => { console.log('%cpan2', 'color:orange', 'onMoveShouldSetPanResponderCapture') // return true }, onMoveShouldSetPanResponder: () => { console.log('%cpan2', 'color:orange', 'onMoveShouldSetPanResponder') }, onPanResponderTerminationRequest: () => { console.log('%cpan2', 'color:orange', 'onPanResponderTerminationRequest') }, onPanResponderGrant: () => { console.log('%cpan2', 'color:orange', 'onPanResponderGrant') }, onPanResponderMove: () => { console.log('%cpan2', 'color:orange', 'onPanResponderMove') }, onPanResponderRelease: () => { console.log('%cpan2', 'color:orange', 'onPanResponderRelease') }, }) pan3 = PanResponder.create({ onStartShouldSetPanResponderCapture: () => { console.log('%cpan3', 'color:orange', 'onStartShouldSetPanResponderCapture') }, onStartShouldSetPanResponder: () => { console.log('%cpan3', 'color:orange', 'onStartShouldSetPanResponder') }, onMoveShouldSetPanResponderCapture: () => { console.log('%cpan3', 'color:orange', 'onMoveShouldSetPanResponderCapture') }, onMoveShouldSetPanResponder: () => { console.log('%cpan3', 'color:orange', 'onMoveShouldSetPanResponder') }, onPanResponderTerminationRequest: () => { console.log('%cpan3', 'color:orange', 'onPanResponderTerminationRequest') }, onPanResponderGrant: () => { console.log('%cpan3', 'color:orange', 'onPanResponderGrant') }, onPanResponderMove: () => { console.log('%cpan3', 'color:orange', 'onPanResponderMove') }, onPanResponderRelease: () => { console.log('%cpan3', 'color:orange', 'onPanResponderRelease') }, }) render() { return ( <View style={styles.pan1} {...this.pan1.panHandlers} > <View style={styles.pan2} {...this.pan2.panHandlers} > <View style={styles.pan3} {...this.pan3.panHandlers} > <Text>responder 询问模型详解</Text> </View> </View> </View> ) } } const styles = StyleSheet.create({ pan1: { ...StyleSheet.absoluteFillObject, backgroundColor: 'red', justifyContent: 'center' }, pan2: { height: 200, justifyContent: 'center', backgroundColor: 'yellow' }, pan3: { height: 100, backgroundColor: 'blue' } })
demo1:
import React, { Component } from 'react'; import { View, Text, StyleSheet, PanResponder, } from 'react-native'; export default class AAA extends Component { constructor(props) { super(props); this.state = { bg: '#fff', bg1: '#fff', bg2: '#fff', }; } componentWillMount(): void { this._panResponder0 = PanResponder.create({ onStartShouldSetPanResponder: () => true, // onMoveShouldSetPanResponder: () => true, // onStartShouldSetPanResponderCapture: () => true, // onMoveShouldSetPanResponderCapture: () => true, onPanResponderGrant: () => { this.setState({ bg: 'red' }); }, onPanResponderMove: () => { console.log('_panResponder0'); }, onPanResponderRelease: () => { this.setState({ bg: '#fff' }); }, }); this._panResponder1 = PanResponder.create({ onStartShouldSetPanResponder: () => true, // onMoveShouldSetPanResponder: () => true, // onStartShouldSetPanResponderCapture: () => true, // onMoveShouldSetPanResponderCapture: () => true, onPanResponderGrant: () => { this.setState({ bg1: 'blue' }); }, onPanResponderMove: () => { console.log('_panResponder1'); }, onPanResponderRelease: () => { this.setState({ bg1: '#fff' }); }, }); this._panResponder2 = PanResponder.create({ onStartShouldSetPanResponder: () => true, // onMoveShouldSetPanResponder: () => true, // onStartShouldSetPanResponderCapture: () => true, // onMoveShouldSetPanResponderCapture: () => true,/ onPanResponderGrant: () => { this.setState({ bg2: 'yellow' }); }, onPanResponderMove: () => { console.log('_panResponder2'); }, onPanResponderRelease: () => { this.setState({ bg2: '#fff' }); }, }); } render() { return ( <View style={{ flex: 1 }}> <View {...this._panResponder0.panHandlers} style={[styles.view, { backgroundColor: this.state.bg }]} > <Text>11111</Text> <View {...this._panResponder1.panHandlers} style={[styles.view1, { backgroundColor: this.state.bg1 }]} > <Text>22222</Text> <View {...this._panResponder2.panHandlers} style={[styles.view2, { backgroundColor: this.state.bg2 }]} > <Text>33333</Text> </View> </View> </View> </View> ); } } const view = { borderColor: '#999', borderWidth: 1, width: 400, height: 400, justifyContent: 'center', alignItems: 'center', }; const styles = StyleSheet.create({ view: { ...view, }, view1: { ...view, width: 300, height: 300, }, view2: { ...view, width: 200, height: 200, }, });