react native優化重複點擊、阻止反覆點擊

作項目的時候遇到了這個需求，react native阻止重複點擊、阻止反覆點擊，第一想到的是給點擊事件一個定時，要距離上一次點擊的時間大於1秒的以後再執行

//  新建一個js文件命名爲 

//  preventDoublePress.js
const preventDoublePress = {    
    lastPressTime: 1,  //  上次點擊時間      
    reponTime: 1000,   //  間隔時間    
    onPress(callback) {        
    let curTime = Date.now();        
         if (curTime - this.lastPressTime > this.reponTime) {            
         this.lastPressTime = curTime;            
         this.reponTime = 1000;  //  這裏的時間和上面的匹配            
         callback();        
         }    
    },
};
module.exports = preventDoublePress;
複製代碼

在項目中使用這個方法

//  這個是個人文件引入路徑
import preventDoublePress from '../../global/preventDoublePress';複製代碼

在點擊函數onpress中使用preventDoublePress方法

import React, { Component } from 'react'; import { View, Button, Animated, ToastAndroid,} from 'react-native'; import styles from './Style'; import preventDoublePress from '../../global/preventDoublePress'; export default class MeScreen extends Component { constructor(props) { super(props); this.state = { fadeAnim: new Animated.Value(0) } } showAnim = () => { /* 3. 處理動畫值，並啓動動畫 * */ this.state.toValue = this.state.toValue == 1 ? 0 : 1 Animated.timing( this.state.fadeAnim, { duration: 1000, toValue: this.state.toValue, useNativeDriver: true } ).start(); ToastAndroid.show('顯示動畫效果', ToastAndroid.SHORT) } // 頁面 render() { return ( <View style={styles.container}> <Animated.Text style={{ /* 2. 將動畫值綁定到style的屬性 * */ opacity: this.state.fadeAnim }}> Simple Animated Used Animated.timing </Animated.Text> <Button title="touch me" onPress={() => preventDoublePress.onPress(() => this.showAnim())} /> </View> ) } } 複製代碼

在點擊的時候還能夠設置間隔時間進行單獨控制

import React, { Component } from 'react';
import {    View,    Button,    Animated,    ToastAndroid,} from 'react-native';
import styles from './Style';
import preventDoublePress from '../../global/preventDoublePress';

export default class MeScreen extends Component {    
    constructor(props) {        
        super(props);        
        this.state = {            
            fadeAnim: new Animated.Value(0)        
        }    
    }

    showAnim = () => {        
    /* 3. 處理動畫值，並啓動動畫 * */        
    this.state.toValue = this.state.toValue == 1 ? 0 : 1        
        Animated.timing(            
            this.state.fadeAnim,            
                {            
                    duration: 1000,            
                    toValue: this.state.toValue,            
                    useNativeDriver: true            
                }        
        ).start();        
        ToastAndroid.show('顯示動畫效果', ToastAndroid.SHORT)    
    }
    // 頁面 
    render() {        
        return (            
            <View style={styles.container}>               
                 <Animated.Text style={{                
                    /*                
                    2. 將動畫值綁定到style的屬性                
                    * */                
                        opacity: this.state.fadeAnim                
                    }}>                
                    Simple Animated Used Animated.timing                
            </Animated.Text>                    
            <Button title="touch me" onPress={() => {
                    preventDoublePress.reponTime = 5000  // 單獨設置間隔時間
                    preventDoublePress.onPress(() => this.showAnim())}}
             />            
        </View>        
        )    
    }
}


複製代碼

有好的思路歡迎評論交流。