[vc_row][vc_column][vc_column_text]Consultando la documentazione della libreria React Navigation siamo abituati a vedere i componenti che fungono da Screen definiti in termini di class components:[/vc_column_text][vc_column_text]
|
1 2 3 4 5 6 7 |
class HomeScreen extends React.Component { static navigationOptions = { title: 'Home', }; /* render function, etc */ } |
[/vc_column_text][vc_column_text]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:[/vc_column_text][vc_column_text]
|
1 2 3 4 5 6 7 8 9 10 |
const HomeScreen = () => { return ( /* jsx della schermata */ ); }; HomeScreen.navigationOptions = { title: 'Home', }; |
[/vc_column_text][vc_column_text]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.[/vc_column_text][vc_column_text]
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.[/vc_column_text][vc_column_text]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// Prima della compilazione class HomeScreen { static navigationOptions = { title: 'Home', }; } // Dopo la compilazione function _classCallCheck(instance, Constructor) { /* implementazione omessa per semplicità */ } function _defineProperty(obj, key, value) { /* implementazione omessa per semplicità */ } var HomeScreen = function HomeScreen() { _classCallCheck(this, HomeScreen); }; _defineProperty(HomeScreen, "navigationOptions", { title: 'Home' }); |
[/vc_column_text][vc_column_text]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.[/vc_column_text][vc_column_text]
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.[/vc_column_text][/vc_column][/vc_row]
