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,
    },
});