防止在 React 本机中双击

如何防止用户在 React native 中点击按钮两次？

即用户不能在可触摸的突出显示上快速点击两次

https://snack.expo.io/@patwoz/withpreventdoubleclick

使用此 HOC 扩展可触摸组件，如可触摸突出显示、按钮 ...

import debounce from 'lodash.debounce'; // 4.0.8
const withPreventDoubleClick = (WrappedComponent) => {
  class PreventDoubleClick extends React.PureComponent {
    debouncedOnPress = () => {
      this.props.onPress && this.props.onPress();
    }
    onPress = debounce(this.debouncedOnPress, 300, { leading: true, trailing: false });
    render() {
      return <WrappedComponent {...this.props} onPress={this.onPress} />;
    }
  }
  PreventDoubleClick.displayName = `withPreventDoubleClick(${WrappedComponent.displayName ||WrappedComponent.name})`
  return PreventDoubleClick;
}

用法

import { Button } from 'react-native';
import withPreventDoubleClick from './withPreventDoubleClick';
const ButtonEx = withPreventDoubleClick(Button);
<ButtonEx onPress={this.onButtonClick} title="Click here" />

这是我的简单钩子。

import { useRef } from 'react';
const BOUNCE_RATE = 2000;
export const useDebounce = () => {
  const busy = useRef(false);
  const debounce = async (callback: Function) => {
    setTimeout(() => {
      busy.current = false;
    }, BOUNCE_RATE);
    if (!busy.current) {
      busy.current = true;
      callback();
    }
  };
  return { debounce };
};

这可以在任何你喜欢的地方使用。即使不是按钮。

const { debounce } = useDebounce();
<Button onPress={() => debounce(onPressReload)}>
  Tap Me again and again!!!!!!       
</Button>

使用属性按钮.禁用

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, View, Button } from 'react-native';
export default class App extends Component {
  
  state={
    disabled:false,
  }
  
  pressButton() {
    this.setState({
      disabled: true,
    });
    
    // enable after 5 second
    setTimeout(()=>{
       this.setState({
        disabled: false,
      });
    }, 5000)
  }
  
  render() {
    return (
        <Button
            onPress={() => this.pressButton()}
            title="Learn More"
            color="#841584"
            disabled={this.state.disabled}
            accessibilityLabel="Learn more about this purple button"
          />
    );
  }
}
// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => App);

同意接受的答案但非常简单的方法，我们可以使用以下方式

import debounce from 'lodash/debounce';
    componentDidMount() {
       this.onPressMethod= debounce(this.onPressMethod.bind(this), 500);
  }
onPressMethod=()=> {
    //what you actually want on button press
}
 render() {
    return (
        <Button
            onPress={() => this.onPressMethod()}
            title="Your Button Name"
          />
    );
  }

我通过参考上面的答案来使用它。"禁用"不一定是一种状态。

import React, { Component } from 'react';
import { TouchableHighlight } from 'react-native';
class PreventDoubleTap extends Component {
    disabled = false;
    onPress = (...args) => {
        if(this.disabled) return;
        this.disabled = true;
        setTimeout(()=>{
            this.disabled = false;
        }, 500);
        this.props.onPress && this.props.onPress(...args);
    }
}
export class ButtonHighLight extends PreventDoubleTap {
    render() {
        return (
            <TouchableHighlight
                {...this.props}
                onPress={this.onPress}
                underlayColor="#f7f7f7"
            />
        );
    }
}

它可以是其他可触摸组件，如可触摸不透明度。

如果您使用的是 react 导航，请使用此格式导航到另一个页面。 this.props.navigation.navigate({key:"any",routeName:"YourRoute",params:{param1:value,param2:value}})

StackNavigator 将防止在堆栈中再次推送具有相同键的路由。你可以写任何独特的东西作为key，如果你想将参数传递到另一个屏幕，params道具是可选的。

接受的解决方案效果很好，但它使得必须包装整个组件并导入 lodash 以实现所需的行为。我写了一个自定义的 React 钩子，可以只包装你的回调：

使用TimeBlockedCallback.js

import { useRef } from 'react'
export default (callback, timeBlocked = 1000) => {
  const isBlockedRef = useRef(false)
  const unblockTimeout = useRef(false)
  return (...callbackArgs) => {
    if (!isBlockedRef.current) {
      callback(...callbackArgs)
    }
    clearTimeout(unblockTimeout.current)
    unblockTimeout.current = setTimeout(() => isBlockedRef.current = false, timeBlocked)
    isBlockedRef.current = true
  }
}

用法：

您的组件.js

import React from 'react'
import { View, Text } from 'react-native'
import useTimeBlockedCallback from '../hooks/useTimeBlockedCallback'
export default () => {
  const callbackWithNoArgs = useTimeBlockedCallback(() => {
    console.log('Do stuff here, like opening a new scene for instance.')
  })
  const callbackWithArgs = useTimeBlockedCallback((text) => {
    console.log(text + ' will be logged once every 1000ms tops')
  })
  return (
    <View>
      <Text onPress={callbackWithNoArgs}>Touch me without double tap</Text>
      <Text onPress={() => callbackWithArgs('Hello world')}>Log hello world</Text>
    </View>
  )
}

默认情况下，回调在调用后会阻塞 1000 毫秒，但您可以使用钩子的第二个参数进行更改。

我有一个非常简单的解决方案，使用runAfterInteractions：

   _GoCategoria(_categoria,_tipo){
            if (loading === false){
                loading = true;
                this.props.navigation.navigate("Categoria", {categoria: _categoria, tipo: _tipo});
            }
             InteractionManager.runAfterInteractions(() => {
                loading = false;
             });
    };

没有使用禁用功能、setTimeout 或安装额外的东西。

这样代码就可以毫无延迟地执行。我没有避免双击，但我保证代码只运行一次。

我使用了文档 https://reactnative.dev/docs/pressevent 中描述的 TouchableOpacity 返回的对象和一个状态变量来管理时间戳。 lastTime 是一个初始化为 0 的状态变量。

const [lastTime, setLastTime] = useState(0);
...
<TouchableOpacity onPress={async (obj) =>{
    try{
        console.log('Last time: ', obj.nativeEvent.timestamp);
        if ((obj.nativeEvent.timestamp-lastTime)>1500){  
            console.log('First time: ',obj.nativeEvent.timestamp);
            setLastTime(obj.nativeEvent.timestamp);
            //your code
            SplashScreen.show();
            await dispatch(getDetails(item.device));
            await dispatch(getTravels(item.device));
            navigation.navigate("Tab");
            //end of code
        }
        else{
            return;
        }
    }catch(e){
        console.log(e);
    }       
}}>

我

正在使用异步函数来处理实际获取数据的调度，最后我基本上导航到其他屏幕。

我在触摸之间打印出第一次和最后一次。我选择它们之间存在至少 1500 毫秒的差异，并避免任何寄生虫双击。

您还可以在等待某些异步操作时显示加载 gif。只要确保用async () => {}标记您的onPress，以便可以对其进行await。

import React from 'react';
import {View, Button, ActivityIndicator} from 'react-native';
class Btn extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: false
        }
    }
    async setIsLoading(isLoading) {
        const p = new Promise((resolve) => {
            this.setState({isLoading}, resolve);
        });
        return p;
    }
    render() {
        const {onPress, ...p} = this.props;
        if (this.state.isLoading) {
            return <View style={{marginTop: 2, marginBottom: 2}}>
                <ActivityIndicator
                    size="large"
                />
            </View>;
        }

        return <Button
            {...p}
            onPress={async () => {
                await this.setIsLoading(true);
                await onPress();
                await this.setIsLoading(false);
            }}
        />
    }
}
export default Btn;

我的包装组件实现。

import React, { useState, useEffect } from 'react';
import { TouchableHighlight } from 'react-native';
export default ButtonOneTap = ({ onPress, disabled, children, ...props }) => {
    const [isDisabled, toggleDisable] = useState(disabled);
    const [timerId, setTimerId] = useState(null);
    useEffect(() => {
        toggleDisable(disabled);
    },[disabled]);
    useEffect(() => {
        return () => {
            toggleDisable(disabled);
            clearTimeout(timerId);
        }
    })

    const handleOnPress = () => {
        toggleDisable(true);
        onPress();
        setTimerId(setTimeout(() => {
            toggleDisable(false)
        }, 1000))
    }
    return (
        <TouchableHighlight onPress={handleOnPress} {...props} disabled={isDisabled} >
            {children}
        </TouchableHighlight>
    )
}

相关内容

最新更新

热门标签：