2016-04-15 19 views
11

Ho un problema con JavaScript e non sono sicuro di come risolverlo.Passa una funzione anonima a onPanResponderMove

Nella mia applicazione React Native, ho un panResponder e sto usando questo hook per chiamare Animated.event.

this.panResponder = PanResponder.create({ 
    /* ... some other methods ... */ 
    onPanResponderMove: Animated.event([null, { dx: this.state.x, dy: this.state.y }]), 
}); 

Anche se, mi piacerebbe che l'hook fosse una funzione anonima, invece, per poter fare altre cose. Ho provato un modo diverso di utilizzare una funzione anonima, ma non riesco a farlo funzionare.

this.panResponder = PanResponder.create({ 
    /* ... some other methods ... */ 
    onPanResponderMove: (event, gestureState) => { 
     this.callSomething(); 
     return Animated.event([null, { /* I'm not sure what to pass here to map with gestureState... */ }]); 
    }, 
}); 

Ho letto la documentazione ma anche con quella non lo so ancora.

Potete aiutarmi?

Grazie.

Aggiornamento:

ho finalmente fatto qualcosa di simile:

let valueY; 
this.panResponder = PanResponder.create({ 
    /* ... some other methods ... */ 
    onPanResponderGrant:() => { 
     valueY = this.state.y._value; 
    }, 
    onPanResponderMove: (event, gestureState) => { 
     this.callSomething(); 
     let panY = valueY + gestureState.dy; 
     this.state.y.setValue({ y: panY }); 
    }, 
}); 

non credo che sia il modo migliore per farlo se ...

+0

Qual è esattamente il problema? La sintassi nella seconda versione sembra corretta. C'è un errore reale? La funzione non viene chiamata? "non può farlo funzionare" è troppo vago. – rooftop

+0

La sintassi semplicemente non funziona senza errori, quando provo a spostarlo non si muove più – alexmngn

risposta

8

Nel caso in cui questo è utile a chiunque, ho appena avuto lo stesso problema. Ho finito con, più o meno:

let mover = Animated.event([ null, { dy: this.state.pan.y }]) ; 
let repsponder = PanResponder.create({ 
    .... 
    onPanResponderMove: (e, gesture) => { 
     this.doSomething() ; 
     return mover(e, gesture) ; 
     }, 
    }) ; 

Il bit importante sembra essere chiamata Animated.event di fuori del codice onPanResponderMove. Si noti che negli esempi che compaiono di solito, il codice è onPanResponderMove: Animated.event (...) per cui un singolo Animated.event cosa viene creato, ma se si è all'interno del codice onPanResponderMove (come in alexmngn di primo tentativo), una nuova cosa (qualunque cosa sia!) viene creata su ogni chiamata del codice onPanResponderMove - che credo sia il problema.

+1

Sì signore, questo mi ha graffiato la testa per un po 'su questo. Grazie. – Soheil

23

Il fatto è che Animated.event (...) è in realtà tornando una funzione in modo di richiamare immediatamente quello che dovete fare qualcosa di simile:

this.panResponder = PanResponder.create({ 
    ... 
    onPanResponderMove: (e, gestureState) => { 
    // custom logic here 
    ... 

    Animated.event([null, { 
     dx: this.state.pan.x, 
     dy: this.state.pan.y, 
    }])(e, gestureState); // <<--- INVOKING HERE! 
    }, 
}); 
+1

ottima risposta, grazie! – Laker

+2

Genio! Vorrei aver capito la funzionalità di base come te. Funziona alla grande. –

Problemi correlati