ReactNative 防重复点击

之前用react native做点击事件,会遇到迅速点击多次会触发多个响应,通常我们的解决方法是在自己定义button组件在里面加入定时器时间没到时间没法进行点击,这种方法也只能解决部分问题而且特别浪费性能,要想解决根本问题我们就得要从事件分发角度出发。

我们用rn有两种方式,一个是用命令生成工具生成会继承ReactActivity另一种继承原生的activity在里面加载jsbundle文件。在这里我先说一下android里面的事件顺序activity->viewgroup->view,也就是说我们在activity里面做用户事件分发拦截就能从根本解决,多次点击问题,下面是拦截源码请加入到BaseActivity中。

/** 判断是否是快速点击 */  

private static long lastClickTime;  

public static boolean isFastDoubleClick() {  

long time = System.currentTimeMillis();  

long timeD = time - lastClickTime;  

if (0 < timeD && timeD < 1000) {  

//时间自己调节

return true;  

        }  

        lastClickTime = time;  

return false;  

    }  

在BaseActivity中复写一下分发方法

/** 判断触摸时间派发间隔 */  

@Override  

public boolean dispatchTouchEvent(MotionEvent ev) {  

if (ev.getAction() == MotionEvent.ACTION_DOWN) {  

if (Utils.isFastDoubleClick()) {  

return true;  

            }  

        }  

return super.dispatchTouchEvent(ev);  

    }  

这边是一个事件分发机制的文章写的很好大家有兴趣的可能阅读一下https://www.jianshu.com/p/38015afcdb58

有问题的可以发评论给我,相互进步。

你可能感兴趣的:(ReactNative 防重复点击)