Via G. Falcone 5, Pollenza (MC), Italy
+39 0733 203595

React Navigation: Screens tramite function components

Consultando la documentazione della libreria React Navigation siamo abituati a vedere i componenti che fungono da Screen definiti in termini di class components:

Per questo motivo credo venga naturale utilizzare la sintassi riportata nell’esempio, ma come fare qualora volessimo usare i popolarissimi hooks?

Non lo nego, la mia prima idea è stata quella di utilizzare un class component come wrapper per un function component e sviluppare tutto lo Screen da li 🤦 , la soluzione in realtà è più semplice, ma forse non banale per chi si è avvicinato a Javascript da poco.

Possiamo definire uno Screen tramite function component in questa maniera:

Tutto si riduce a dichiarare un function component nella maniera canonica per poi aggiungere le navigationOptions semplicemente come proprietà.

Assegnare una proprietà ad una funzione può lasciare perplessi, ma tutto diventa chiaro se pensiamo che in Javascript anche le funzioni sono oggetti e le classi non sono altro che zucchero sintattico.

Bonus: babel insegna

Per avvalorare la nostra tesi a scopo puramente didattico vediamo come viene compilata una classe da Babel.

Per chi non lo conoscesse, Babel è una sorta di compilatore che trasforma la sintassi del moderno Javascript in una sintassi più “vecchia” comprensibile da versioni di browsers datate.

Come possiamo vedere la classe HomeScreen viene trasformata in una semplice funzione. Il metodo _classCallCheck si preoccupa semplicemente di lanciare un’eccezione qualora la classe venga invocata senza la keyword new.

Successivamente, tramite il metodo _defineProperty, viene assegnata la proprietà navigationOptions proprio come abbiamo fatto sopra.

Conclusione

In questo articolo abbiamo visto come creare uno Screen della libreria React Navigation utilizzando i function components e nel mentre ripassato qualche piccolo fondamento di Javascript.

Leave a reply


This site uses Akismet to reduce spam. Learn how your comment data is processed.