react native 使用PanResponder实现 上划下划手势

使用reactnative的panResponder组件
实现手势响应的一系列函数

componentWillMount() {
        this._panResponder = PanResponder.create({
            onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder,
            onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder,
            onPanResponderGrant: this._handlePanResponderGrant,
            onPanResponderMove: this._handlePanResponderMove,
            onPanResponderRelease: this._handlePanResponderEnd,
            onPanResponderTerminate: this._handlePanResponderEnd,
        });
        this._previousHeight = 0;
        this._circleStyles = {
            style: {
                height: this._previousHeight,
                backgroundColor: 'green',
            }
        };
    }

重点来写这两个函数

 onPanResponderMove: this._handlePanResponderMove,
响应过程中触发
    this.show来表示图片view层的显示状态
如果this.show == false，手指向下滑动图片层高度渐变跟随手指，如果this.show == true手指向下滑动则不响应，
向上滑动也是同理

_handlePanResponderMove = (e: Object, gestureState: Object) =>{
    if(this.show && gestureState.dy < 0 || !this.show && gestureState.dy > 0){
        this._circleStyles.style.height = this._previousHeight + gestureState.dy;
        this._updateNativeStyles();
    }

}

和
 onPanResponderRelease: this._handlePanResponderEnd,
响应结束时触发
以50为界限，如果this.show == false，向下滑动距离超过50则显示,show = true，小于50或向上滑动不响应
如过this.show == true,向上滑动距离超过50隐藏，show = false，小于50或向下滑动不响应

_handlePanResponderEnd = (e: Object, gestureState: Object) =>{
    this._unHighlight();

    if( gestureState.dy <= -50 && this.show){
        this._circleStyles.style.height = 0;
        this.show = false;
        this._updateNativeStyles();
    }else if( gestureState.dy >= 50 && !this.show){
        this._circleStyles.style.height = height;
        this.show = true;
        this._updateNativeStyles();
    }else{
        this._circleStyles.style.height = this.show?height:0;
        this._updateNativeStyles();
    }
    this._previousHeight = this._circleStyles.style.height;
}


效果如图：

完整代码如下：
'use strict';

import React,{Component} from 'react';
import {
    PanResponder,
    StyleSheet,
    View,
    Button,
    Image,
    Dimensions,
} from 'react-native';


var img = require('../img/r.jpg');
let {width,height} = Dimensions.get('window');
class PanResponderExample extends Component{
    constructor(props){
        super(props);
        this.statics ={
            title: 'PanResponder Sample',
            description: 'Shows the use of PanResponder to provide basic gesture handling.',
        };
        this._panResponder = {};
        this._previousHeight =  0;
        this._circleStyles = {};
        this.circle = (null : ?{ setNativeProps(props: Object): void });
        this.show = false;
    }

    componentWillMount() {
        this._panResponder = PanResponder.create({
            onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder,
            onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder,
            onPanResponderGrant: this._handlePanResponderGrant,
            onPanResponderMove: this._handlePanResponderMove,
            onPanResponderRelease: this._handlePanResponderEnd,
            onPanResponderTerminate: this._handlePanResponderEnd,
        });
        this._previousHeight = 0;
        this._circleStyles = {
            style: {
                height: this._previousHeight,
                backgroundColor: 'green',
            }
        };
    }

    componentDidMount(){
        this._updateNativeStyles();
    }

    render(){
        return (
            <View
                style={styles.container}
                {...this._panResponder.panHandlers}>
                <View  style={styles.circle}
                       ref={(circle) => {
                        this.circle = circle;
                      }}
                >
               <Image
                    source={img}
                    style = {{width:200,height:200,borderRadius:100}}

                />
                </View>
            </View>
        );
    }

    _highlight(){
        this._circleStyles.style.backgroundColor = 'rgba(0,0,0,0.03)';
        this._updateNativeStyles();
    }

    _unHighlight(){
        this._circleStyles.style.backgroundColor = 'transparent';
        this._updateNativeStyles();
    }

    _updateNativeStyles(){
        this.circle && this.circle.setNativeProps(this._circleStyles);
    }

    _handleStartShouldSetPanResponder = (e: Object, gestureState: Object): boolean => {
        // Should we become active when the user presses down on the circle?
        return true;
    }

    _handleMoveShouldSetPanResponder = (e: Object, gestureState: Object): boolean =>{
        // Should we become active when the user moves a touch over the circle?
        return true;
    }

    _handlePanResponderGrant = (e: Object, gestureState: Object) =>{
        this._highlight();
    }
    _handlePanResponderMove = (e: Object, gestureState: Object) =>{
        if(this.show && gestureState.dy < 0 || !this.show && gestureState.dy > 0){
            this._circleStyles.style.height = this._previousHeight + gestureState.dy;
            this._updateNativeStyles();
        }

    }
    _handlePanResponderEnd = (e: Object, gestureState: Object) =>{
        this._unHighlight();

        if( gestureState.dy <= -50 && this.show){
            this._circleStyles.style.height = 0;
            this.show = false;
            this._updateNativeStyles();
        }else if( gestureState.dy >= 50 && !this.show){
            this._circleStyles.style.height = height;
            this.show = true;
            this._updateNativeStyles();
        }else{
            this._circleStyles.style.height = this.show?height:0;
            this._updateNativeStyles();
        }
        this._previousHeight = this._circleStyles.style.height;
    }
}

var styles = StyleSheet.create({
    circle: {
        justifyContent:'center',
        width:width,
        height:height,
        position:'absolute',
        top:0,
        left:0,
        elevation:10,
        alignItems:'center',

    },
    container: {
        flex: 1,
        backgroundColor:'pink',
        alignItems:'stretch',
        flexDirection:'column',
        elevation:1,
    },
});

module.exports = PanResponderExample;

转载于:https://www.cnblogs.com/wupx/p/6420213.html