React Native template (3)

Nella pagina github di TheCodingMachine si possono osservare altri template¹ . Possiamo prendere le idee di questi template per migliorare il nostro progetto.

Purtroppo questi template oggi (gennaio 2023) non sono direttamente utilizzabili perchè attualmente la versione di React Native (18) non corrisponde alle dipendenze del template.

Questo è l’albero delle cartelle del progetto:

+ .
+ ── android
+ ── ios
+ ── node_modules
+ ── plugin
- ── src
|     + ── Asset 
|     + ── Components
|     + ── Config
|     + ── Containers
|     + ── Hooks
|     + ── Navigators
|     + ── Services
|     + ── Store
|     + ── Theme
|     + ── Translations
|     └─── App.js
├─── app.json
├─── index.js
├─── jest.setup.js
├─── jsconfig.js
├─── package.json
└─── tsconfig.json

Anche se questo template oggi non è direttamente utilizzabile, si può comunque cercare di trasformare il template del post precedente in modo da avere una struttura delle cartelle simile a questo. (In fondo al post viene allegato un file .zip da confrontare)

È facile notare la presenza della nuova cartella “src” dove vengono organizzati tutti i file sorgente. Tutti tranne index.js.

Questo è il nuovo contenuto di index.js.

import { AppRegistry } from 'react-native'
import App from './src/App'
import { name as appName } from './app.json'

AppRegistry.registerComponent(appName, () => App)

Osservare il cambiamento nella riga 2, rispetto al precedente template:

• cambia il percorso del file App.js.
• L’estensione .js è opzionale per i file.
• Il punto iniziale nel path name è obbligatorio (altrimenti Node.js cercherà un modulo nella cartella node_modules

Si possono creare quindi sia la cartella src che le sue sottocartelle, ad esempio:

• Asset è una cartella per le immagini e per altri file
• Components contiene le definizioni dei componenti da rendering
• Hooks contiene funzioni per la gestione di proprietà
• Navigators contiene funzioni che usano una libreria React Navigation per passare da una schermata all’altra

Si può osservare che il file App.js è stato spostato nella nuova cartella src e che anche il suo contenuto è cambiato:

• È stata eleminata la funzione Section che è stata spostata nel file Section.js
• Al posto della funzione Section è stata aggiunta questa riga (riga 29)

import Section from './components/Section.js';

Infine, questa è la modifica da fare al codice sorgente di Section.js, dove è necessario fare delle ripetizioni:

• si ripetono gli stessi import di App.js,
• si copia il codice della funzione Section del file originale App.js
• si copia il codice della costante styles del file originale App.js
• si è aggiunta una ultima riga di esportazione (riga 73), riportata qui sotto:

export default Section;

Si allega la soluzione di una boilerplate solution aggiornata, si riferisce comunque alla data di gennaio 2023, quindi prima di usarla bisogna verificare la disponibilità di nuove versioni delle varie dipendenze

1. https://github.com/thecodingmachine/react-native-boilerplate/tree/main/template [↩]