Evitar doble toque en React native

Luego de de una extensa recopilación de información hemos podido solucionar esta dificultad que tienen algunos de nuestros usuarios. Te brindamos la respuesta y deseamos resultarte de gran apoyo.

Solución:

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

Utilice este HOC para ampliar los componentes táctiles como 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 ;
    
  

  PreventDoubleClick.displayName = `withPreventDoubleClick($)`
  return PreventDoubleClick;

Uso

import  Button  from 'react-native';
import withPreventDoubleClick from './withPreventDoubleClick';

const ButtonEx = withPreventDoubleClick(Button);

Usar propiedad 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 (
         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);

Si está utilizando la navegación de reacción, utilice este formato para navegar a otra página.
this.props.navigation.navigate(key:"any",routeName:"YourRoute",params:param1:value,param2:value)

El StackNavigator evitaría que las rutas tengan el mismo keys para ser empujado en la pila de nuevo. Podrías escribir algo único como el key y el params prop es opcional si desea pasar parámetros a otra pantalla.

valoraciones y reseñas

Tienes la posibilidad comunicar este escrito si te valió la pena.

---

---

Utiliza Nuestro Buscador