Nella pagina github di TheCodingMachine si possono osservare altri template1 . 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 fileComponents
contiene le definizioni dei componenti da renderingHooks
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 fileSection.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
diApp.js
, - si copia il codice della funzione
Section
del file originaleApp.js
- si copia il codice della costante
styles
del file originaleApp.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
- https://github.com/thecodingmachine/react-native-boilerplate/tree/main/template [↩]