react-native-swipe-gestures, 4个方向滑动手势用于React native

分享于 

4分钟阅读

GitHub

  繁體 雙語
4-directional swipe gestures for react-native
  • 源代码名称:react-native-swipe-gestures
  • 源代码网址:http://www.github.com/glepur/react-native-swipe-gestures
  • react-native-swipe-gestures源代码文档
  • react-native-swipe-gestures源代码下载
  • Git URL:
    git://www.github.com/glepur/react-native-swipe-gestures.git
    Git Clone代码到本地:
    git clone http://www.github.com/glepur/react-native-swipe-gestures
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/glepur/react-native-swipe-gestures
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    react-native-swipe-gestures

    在上。下。左和右方向React本机组件以处理笔势。

    安装

    npm i -S react-native-swipe-gestures

    用法

    'use strict';importReact, {Component} from'react';import {View, Text} from'react-native';importGestureRecognizer, {swipeDirections} from'react-native-swipe-gestures';classSomeComponentextendsComponent {
     constructor(props) {
     super(props);
     this.state= {
     myText:'I'm ready to get swiped!',
     gestureName:'none',
     backgroundColor:'#fff' };
     }
     onSwipeUp(gestureState) {
     this.setState({myText:'You swiped up!'});
     }
     onSwipeDown(gestureState) {
     this.setState({myText:'You swiped down!'});
     }
     onSwipeLeft(gestureState) {
     this.setState({myText:'You swiped left!'});
     }
     onSwipeRight(gestureState) {
     this.setState({myText:'You swiped right!'});
     }
     onSwipe(gestureName, gestureState) {
     const {SWIPE_UP, SWIPE_DOWN, SWIPE_LEFT, SWIPE_RIGHT} = swipeDirections;
     this.setState({gestureName: gestureName});
     switch (gestureName) {
     caseSWIPE_UP:
     this.setState({backgroundColor:'red'});
     break;
     caseSWIPE_DOWN:
     this.setState({backgroundColor:'green'});
     break;
     caseSWIPE_LEFT:
     this.setState({backgroundColor:'blue'});
     break;
     caseSWIPE_RIGHT:
     this.setState({backgroundColor:'yellow'});
     break;
     }
     }
     render() {
     constconfig= {
     velocityThreshold:0.3,
     directionalOffsetThreshold:80 };
     return (
     <GestureRecognizer
     onSwipe={(direction, state) =>this.onSwipe(direction, state)}
     onSwipeUp={(state) =>this.onSwipeUp(state)}
     onSwipeDown={(state) =>this.onSwipeDown(state)}
     onSwipeLeft={(state) =>this.onSwipeLeft(state)}
     onSwipeRight={(state) =>this.onSwipeRight(state)}
     config={config}
     style={{
     flex:1,
     backgroundColor:this.state.backgroundColor }}
     ><Text>{this.state.myText}</Text><Text>onSwipe callback received gesture: {this.state.gestureName}</Text></GestureRecognizer> );
     }
    }exportdefaultSomeComponent;

    配置

    可以在可选的config 属性中传递。

    Params类型默认说明
    velocityThreshold号码0.3为了触发滑动而必须中断的速度( vxgestureStatevy peroperties )
    directionalOffsetThreshold号码80不应触发的绝对偏移量,为触发触发( 用于水平滑动的dy,用于垂直刷新的dx )

    方法

    onSwipe ( gestureName,gestureState ) 参数类型描述
    gestureName字符串手势的名称( 如上所示)
    gestureState对象来自PanResponder的gestureState
    onSwipeUp(gestureState) 参数类型描述
    gestureState对象来自PanResponder的gestureState
    onSwipeDown(gestureState) 参数类型描述
    gestureState对象来自PanResponder的gestureState
    onSwipeLeft(gestureState) 参数类型描述
    gestureState对象来自PanResponder的gestureState
    onSwipeRight(gestureState) 参数类型描述
    gestureState对象来自PanResponder的gestureState

    react  DIR  NAT  Native  React Native  Gesture