Corso di Formazione Professionale su React Native

A cura di Be Engineering srl, Docente Christian Chiama

per Innovaformazione di Dario Carrassi

Esercitazione 1

• Prima App con React Native

Esercitazione 2

L App utilizza le RESTful API online disonibili al seguente indirizzo: https://randomuser.me , utilizzando il metodo fetch semplice, e visualizza l insimee dei dati in una FlatList. Sono utiizzati anche i metodi che implementano il pull-to-refresh, e l infinite-scrolling grazie alla possibilità di paginare le richieste.

Componenti Utilizzati:

• FlatList (React Native)
• ListItem (React Native Elements)
• Animazioni con Lottie Arbnb (Lottie)

Esercitazione 3

L App utilizza le RESTful API online disonibili al seguente indirizzo: https://randomuser.me , utilizzando il metodo fetch semplice, e visualizza l insimee dei dati in una FlatList. Sono utiizzati anche i metodi che implementano il pull-to-refresh, e l infinite-scrolling grazie alla possibilità di paginare le richieste. Implemenetazione della navigazione con React Navigation, utilizzando il Drawer, Tab e BottomTab navigation con stack.

Componenti Utilizzati e argomenti trattati per l esercitazione

• FlatList (React Native)
• ListItem (React Native Elements)
• Animazioni con Lottie Arbnb (Lottie)
• React Navigation (React Navigation)
  • Tab Navigation (doc)
  • Drawer Navigation (doc)
  • BottomTab Navigation (doc)
  • Material BottomTab Navigation (doc)
  • Material Top Tab Navigation (doc)

Esercitazione Module Nativi

• Implemenetazione di moduli nativi attraverso il bridge di React -native. La lezione verte sulla creazione di due mudili scritti in java, e la scrittura di una semplice App che li utilizza. E' una delle parti più complicate, ma allo stesso tempo interessante, rispetto ad i classici argomenti trattati nei corsi precedenti. E' necessario avere dei rudimenti di sviluppo Android.

Link Uili

• Redux
• Expo
• React Navigation
• React Native Navigation
• App Expo React Navigation

Alias da insere nella sezione script del package.json

• "start": "node ./script/start.js" -> da terminale yarn start oppure npm start
• "android": "react-native run-android" -> da terminale yarn android oppure npm run android
• "ios": "react-native run-ios" -> da terminale yarn ios oppure npm run ios
• "emu:android": "node ./script/emulator.js" -> da terminale yarn emu:android oppure npm run emu:android
• "xcode": "open ios/[nome progetto].xcworkspace/" -> da terminale yarn android oppure npm run android
• "build:ios": ". ./script/ios/build.sh" -> da terminale yarn build:android oppure npm run build:android
• "build:android": ". ./script/ios/build.sh" -> da terminale yarn build:ios oppure npm run build:ios
• "clean": "node ./script/clean.js" -> da terminale yarn clean oppure npm run clean

Procedura di Release

Link Utili per il processo di Relase (Android)

• Generate an upload key and keystore;
• Sign your app with your key;
• Upload to Google Play Console;