React-native PanResponder监测手势实现下拉或者上拉刷新

在网上看了很多人写的PanResponder的例子,基本上都是不能用的,

所以自己写一个简单的,供作参考:

直接看代码,注释里写的很详细的:

App.js代码如下:

import React, { Component } from 'react';import {  Platform,  StyleSheet,  Text,  View,    Image,    Dimensions,    PanResponder,//用的就是这个核心组件    Alert} from 'react-native';const SCREEN_WIDTH = Dimensions.get('window').width;//屏幕的宽const SCREEN_HEIGHT = Dimensions.get('window').height;//屏幕的高
export default class App extends Component<{}> {    constructor(props) {        super(props);        this.state = {            isFresh: false, // 定义是否刷新的标志        };    }    componentWillMount(){        this._panResponder = PanResponder.create({           //监听的事件回调,必须设为true,否则事件无法监听            onStartShouldSetPanResponder: () => true,            onMoveShouldSetPanResponder: ()=> true,            onPanResponderMove: (evt,gs)=>{                //可自定义滑动距离                if (gs.dy >= 220){                    this.setState({                        isFresh:true,                    })                }            },            onPanResponderRelease:() => {              if (this.state.isFresh){                  Alert.alert("大于等于220")                  this.setState({                 //需置为false,否则就失去了监听的效果                 isFresh:false,                  })              }            },        })    }  render() {    return (      <View          {...this._panResponder.panHandlers}//可以在任意控件写,调起已经写好的回调          style={styles.container}>        <Image            source={require('./pic/b.png')}            style={{width:SCREEN_WIDTH,height:SCREEN_HEIGHT}}//这是一张图片,塞满了整个屏幕        >        </Image>      </View>    );  }}const styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: 'center',    alignItems: 'center',    backgroundColor: '#F5FCFF',  },  welcome: {    fontSize: 20,    textAlign: 'center',    margin: 10,  },  instructions: {    textAlign: 'center',    color: '#333333',    marginBottom: 5,  },});