Reactネイティブのダブルタップを防止する

Question

ユーザーがReact nativeでボタンを2回タップしないようにするにはどうすればいいですか？ユーザーすなわち

は触れることができるハイライト

Answer 1

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

使用このHOCを触れるを拡張するためにすばやく2回できタップしてはなりませんTouchableHighlight、Buttonなどのコンポーネント...

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" /> 

Answer 2

使用プロパティButton.disabled

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);