0

Originalmente en mi proyecto tengo dos bloques de código que se repiten casi en su totalidad, por lo que quisiera saber si es posible, a través de una sintaxis determinada, crear una función para unificarlos que reciba un método como argumento. Por ejemplo:

BLOQUE 1

navigation.addListener('beforeRemove', (e) => {
                const action = e.data.action;
        
                e.preventDefault();
        
                Alert.alert(
                'Discard changes?',
                'You have unsaved changes. Are you sure to discard them and leave the screen?',
                [
                    { text: "Don't leave", style: 'cancel', onPress: () => {} },
                    {
                    text: 'Discard',
                    style: 'destructive',
                    onPress: () => navigation.dispatch(action),
                    },
                ]
                );
            });

BLOQUE 2

navigation.removeListener('beforeRemove', (e) => {
                const action = e.data.action;
        
                e.preventDefault();
        
                Alert.alert(
                'Discard changes?',
                'You have unsaved changes. Are you sure to discard them and leave the screen?',
                [
                    { text: "Don't leave", style: 'cancel', onPress: () => {} },
                    {
                    text: 'Discard',
                    style: 'destructive',
                    onPress: () => navigation.dispatch(action),
                    },
                ]
                );
            });

FUNCIÓN DESEADA

const StatusNavigation = (statementArg) => {
        navigation.statementArg('beforeRemove', (e) => {
            const action = e.data.action;
            e.preventDefault();
            Alert.alert(
              'Discard changes?',
              'You have unsaved changes. Are you sure to discard them and leave the screen?',
              [
                { text: "Don't leave", style: 'cancel', onPress: () => {} },
                {
                  text: 'Discard',
                  style: 'destructive',
                  onPress: () => navigation.dispatch(action),
                },
              ]
            );
        });
    }

Luego, en mi proyecto llamaría a la función como StatusNavigation('addListener'); o StatusNavigation('removeListener'); según lo necesite.

Dentro de la función, la expresión navigation.statementArg('beforeRemove' (...) genera el error TypeError: undefined is not a function (near '...navigation.statementArg...')

Quisiera saber cuál es la sintaxis correcta para tomar el valor del argumento.


.: SOLUCIÓN IMPLEMENTADA, basada en las ideas sugeridas :.

const StatusNavigation = (statementArg, stateFlag) => {
        setFlagModify(stateFlag);
        navigation[statementArg]('beforeRemove', (e) => { 
            const action = e.data.action;
            e.preventDefault();
            Alert.alert(
              'Discard changes?',
              'You have unsaved changes. Are you sure to discard them and leave the screen?',
              [
                { text: "Don't leave", style: 'cancel', onPress: () => {} },
                {
                  text: 'Discard',
                  style: 'destructive',
                  onPress: () => navigation.dispatch(action),
                },
              ]
            );
        });
    }

Luego desde mi código, simplemente llamo a la función según mi necesidad:

flagModify ? StatusNavigation('removeListener', 'false') : StatusNavigation('addListener', 'true')
3
  • Al escuchar un evento se ejecuta una función, así que solo tienes que crear una función con el código que se repite y luego esa función pasársela a los escuchadores
    – Christian
    el 3 jul. 2021 a las 12:45
  • Sí, perfecto, entiendo @Christian. Aún así, si quisiera hacer esto de todos modos, o tal vez aplicarlo a otro tipo de función, ¿se puede hacer?,¿cuál sería la sintaxis correcta?. Por ejemplo: he probado con navigation.{statementArg}('beforeRemove' (...) y tira error.
    – Raul
    el 3 jul. 2021 a las 14:21
  • en todo caso es [statementArg] el 3 jul. 2021 a las 14:49

2 respuestas 2

1

Es posible, aunque no creo que recomendable en este caso, usando ["metodo_como_string"] en lugar de .metodo

const metodo = "addEventListener";

const boton = document.getElementById("boton")[metodo]("click", (e)=>console.log("evento"));
<button id="boton">
click
</button>

navigation[statementArg]('beforeRemove' ... en tu código.

1
import React from 'react';
import { Alert } from 'react-native';

const useListenner = ( navigation, isremove ) => {
  // Your logic
  function eventHandle(e){
      e.preventDefault();
      Alert.alert(
        'Discard changes?',
        'You have unsaved changes. Are you sure to discard them and leave the screen?',
        [
          { text: "Don't leave", style: 'cancel', onPress: () => {} },
          {
            text: 'Discard',
            style: 'destructive',
            onPress: () => navigation.dispatch(e.data.action),
          },
        ]
      );
  }
  
  return isremove ? navigation.removeListener('beforeRemove', eventHandle) : navigation.addListener('beforeRemove', eventHandle);
}

// usage
// useListenner(navigation, true) // removeListener
// useListenner(navigation) // addListener

export default useListenner;

Espero te ayude.

1
  • Efectivamente Diego y @Emmeus, pude solucionarlo con los corchetes y removiendo el punto luego de navigation, en línea con el código que vengo desarrollando. Diego, tu modo también es válido, y creo que está en concordancia con lo expresado por Christian. Agradezco a todos por sus aportes. Editaré mi pregunta y colocaré la solución.
    – Raul
    el 3 jul. 2021 a las 15:52

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.