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 non sono direttamente utilizzabili perchè attualmente non sono mantenuti aggiornati a React 18)
+ . + ── 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 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 la cartella src e le sue sottocartelle:
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
- si ripetono gli stessi
import
diApp.js
, - si copia il codice della funzione
Section
del file originaleApp.js
- si copia il codice della costante
style
s del file originaleApp.js
- si è aggiunta una ultima riga di esportazione (riga 73)
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 [↩]