Categories
Android gradle Linux Node.js npm

Verificare l’ambiente di sviluppo (1)

A distanza di un anno circa, proviamo a riassumere (e ripetere) i passaggi necessari per realizzare e verificare il funzionamento di un ambiente di sviluppo per compilare un semplice progetto React Native di un’applicazione Android composto da una sola pagina.

Sarà cambiato qualcosa rispetto all’anno scorso?

Categories
boilerplate solution Node.js npm package,json

npx init

Esistono dei template open source nel web, anche se purtroppo molti hanno Expo tra le dipendenze.

Categories
boilerplate solution iOS Node.js npm package,json piattaforme

File package.json

Quando si crea un nuovo progetto si devono conservare molte informazioni utili al progetto, come ad esempio:

  • la licenza d’uso del software
  • l’autore
  • la versione
  • le dipendenze (di vario tipo)
  • e molto altro
Categories
accessibilità boilerplate solution linguaggio javascript React Navigation

Starter

React Native ha pochi template o boilerplate solution. Può essere utile aggiungere una ulteriorie interfaccia da linea di comando chiamata rn-cli (ma non sostituisce react-native cli).

Ci installa anche molte librerie utili.

Categories
iOS React Native

React Native con iOS (1)

Per provare a compilare ed eseguire un progetto React Native su iPhone/iOS (è obbligatorio possedere anche un macOS) si devono usare due comandi sul terminale (il secondo aprirà il simulatore).

Questo è il primo dei comandi sul terminale di macOS:

Categories
button component JSX React Native stile

Stile per bottone

Grazie allo stile (simile al CSS) si può facilmente posizionare un’area di testo ovunque nella schermata di React Native, ma posizionare un bottone è meno intuitivo.

Categories
accessibilità React Native

Accessibilità

Per le persone non vedenti, Android usa TalkBack, mentre iOS usa VoiceOver. React Native permette di accedere alle loro funzioni, con approcci leggermenti diversi.

Categories
component React Native react-native-vision-camera

Fotocamera 3

In un precedente articolo1 si è semplicemente aperta la schermata della fotocamera, ora si aggiungerà un pulsante per attivare lo scatto (e il flash).

  1. https://www.cancellino.org/2023/02/fotocamera-2/ []
Categories
hooks React react-native-vision-camera

Ref Hooks

Dopo aver visto Context e State hook123 , per usare alcune funzioni della fotocamera è utile vedere anche Ref Hooks. Si usa in modo simile a State hook, ma senza far ripetere il rendering.

  1. https://www.cancellino.org/category/linguaggio/javascript/react/hooks/ []
  2. https://www.cancellino.org/2023/01/state-hooks/ []
  3. https://www.cancellino.org/2023/01/context-hooks/ []
Categories
async React Native react-native-vision-camera

Fotocamera (2)

Nel precedente post1 si è installata la libreria per usare la fotocamera e si è corretto un bug durante la compilazione. Ora si attiveranno i permessi e si aprirà la fotocamera (posta sul retro).

  1. https://www.cancellino.org/2023/02/fotocamera/ []