可能是世界上首个智能手势组件



  • 其实标题可能有点唬人,但目前看来应该的确是首个智能手势组件。

    现状

    应该来说目前大家接触到的包括实现的手势相关的组件主要都是以下功能:【单双击】【上下左右单向划】【缩放】【旋转】。但实际上我目前没有找到任何一款手势组件支持自定义简笔画图案的识别,比如一个三角形,一个圆形,一个勾号,甚至胡乱画的一笔,所以我们自己撸了一个。

    简介 (react-native-smart-gesture)

    我们给这个组件取名为react-native-smart-gesture,实际上我们把手势识别的核心功能(smart-gesture)也作为独立的web版组件拆分了出来。目前组件对外暴露两个回调函数:onSwipeonGesture

    onSwipe返回的是滑动结束后,滑动轨迹所代表的四个方向的数组,只用这个其实就能实现目前的鼠标手势识别功能。

    onGesture返回的是滑动结束后,滑动轨迹所匹配到的图形及其得分,以及当前图形的点的集合,这个点的集合可以配合组件的addGesture方法来实现自定义手势图案。我们一般认为得分超过2分极为成功匹配。

    调用方式

    import SmartGesture from 'react-native-smart-gesture';
    
    render() {
      return (
        <View>
          <SmartGesture onGesture={this._onGesture.bind(this)} height={300} onSwipe={this._onSwipe.bind(this)}/>
          <SmartGesture onGesture={this._onGesture.bind(this)} lineColor={'#000'}>
            <Image source={{uri: 'https://placeimg.com/200/200/any'}} style={{width: 200,height:200,borderWidth:2}} />
          </SmartGesture>
        </View>
      );
    }
    

    可独立作为一个组件,也可以嵌套调用。

    notice

    组件内部是用 PanResponder 来响应的触摸事件,在嵌套调用时如果自己也有触摸事件可以选择调用组件内置的 setActive 方法来开启或者关闭组件的触摸响应。

    github地址

    https://github.com/ElemeFE/react-native-smart-gesture