React Native è un framework di applicazioni mobili open-source creato da Facebook. È possibile utilizzarlo per sviluppare applicazioni per dispositivi Android e iOS con una singola base di codice. React Native alimenta alcune delle app più popolari al mondo, come Instagram e Facebook, e in questo post ti mostrerò come creare la tua prima app React Native per Android.

Esempio di codice nativo React

Il codice nativo React per una tipica schermata di app mobile è simile a questo:

import * as React from 'react';import {Text, View, Stylesheet} from 'react-native';const ExampleScreen = (props) { return ( <View style = {styles.containerStyling}> <Text style = {styles.textStyling}> Hello world!</Text> </View> );}const styles = Stylesheet.create({ containerStyling:{ background: '#0000FF' }, textStyling :{ marginBottom :20, color:'#FFF' }});export default ExampleScreen

Se guardi da vicino, vedrai che React Native utilizza una combinazione di JavaScript, markup simile a HTML e CSS. Questo frammento di codice definisce una schermata con una visualizzazione di testo e uno stile.

React Native Development Environments: Expo vs. React Native CLI

Ci sono due modi per creare un’app React Native:

1. Expo CLI
2. React Native CLI

Parlerò dei pro e dei contro di ciascuna di seguito.

Expo CLI

Expo è un framework open source e una piattaforma per applicazioni React universali che fornisce un flusso di lavoro di sviluppo di app gestito. Si tratta di un insieme di strumenti e servizi basati su piattaforme native e native React che aiutano a sviluppare, creare, distribuire e iterare rapidamente su iOS, Android e app Web dalla stessa base di codice JavaScript o TypeScript.

Expo toglie tutte le complessità associate alla creazione di app native React. Alcune delle caratteristiche di Expo CLI includono:

• API universali che forniscono l’accesso a funzioni come fotocamera, mappe, notifiche, sensori, aptici e molto altro.
• Un servizio di compilazione basato su cloud che offre binari pronti per l’app store e gestisce i certificati.
• Over-the-air aggiornamenti che consentono di aggiornare la vostra applicazione in qualsiasi momento, senza il fastidio e ritardi di presentare al negozio.

React Native CLI

La React Native CLI è un ambiente di sviluppo più semplice e bare-metal. La cosa buona è che permette di costruire binari app sul proprio computer, senza fare affidamento su un servizio cloud. D’altra parte, la configurazione è molto più complicata: per creare app per Android, è necessario installare Android Studio e configurare molte funzionalità prima di iniziare. Questo processo può essere un po ‘ complesso, ma l’ambiente CLI nativo di React è più adatto agli sviluppatori di app professionali.

Per questo tutorial, useremo Expo poiché questo è il modo più semplice per iniziare a creare applicazioni native React.

Come funziona Expo

Per utilizzare Expo, devi prima installare l’app Client Expo, disponibile sul Play Store (una versione è disponibile anche sull’App Store iOS). L’applicazione Client Expo vi permetterà di eseguire l’applicazione a scopo di test in tempo reale.

Puoi codificare la tua app React Native sul tuo computer con il tuo editor di testo di programmazione preferito, quindi utilizzare Expo CLI per testare o pubblicare la tua app. Dietro le quinte, Expo impacchetterà il tuo codice nativo React e lo renderà disponibile all’app client Expo sul tuo dispositivo. Puoi anche utilizzare la CLI Expo per pubblicare l’app e renderla disponibile a chiunque possieda il client Expo o per creare una versione standalone dell’app che può essere caricata nell’app store ed eseguita senza installare il client Expo.

Creazione di un’app con Expo

In questo tutorial, useremo Expo CLI per creare la nostra app.

Prerequisiti

Per creare un’app React Native con Expo, è necessario soddisfare quanto segue:

• Nodo.js versione 12 LTS o superiore e Git sul vostro computer
• un dispositivo Android con Lollipop (Android 5) o superiore
• l’Expo applicazione client installato sul vostro dispositivo Android (download Expo client per Android dal Play Store)
• una comprensione di base di ReactJS o JavaScript

si noti, Inoltre, di sviluppo che il vostro computer e il telefono deve essere collegato alla stessa rete wireless.

Scarica Nodo.js

Visita il Nodo.js sito web e scaricare l’ultima versione di Nodo. Node è disponibile per i sistemi operativi Windows, macOS e Linux. Basta scegliere il sistema operativo e installarlo secondo le istruzioni disponibili sul sito.

Per verificare se il Nodo.js è installato, aprire una finestra di terminale e digitare:

node -v

Questo comando visualizzerà la versione del nodo installato.

Installa Expo Client

Dopo aver installato Node, sarà necessario installare anche Expo CLI client. È sufficiente eseguire il seguente comando:

 npm install expo-cli --global

Per gli utenti macOS e Linux, assicurarsi di utilizzare sudo.

sudo npm install expo-cli --global

Ignorare eventuali avvisi o errori che si verificano nel processo di installazione di Expo CLI. Dopo un’installazione riuscita, dovresti vedere il messaggio qui sotto.

Creare un To-Do List App Con React Native

Creeremo un semplice to-do list app che consente di inserire un elenco di attività è necessario ottenere fatto e li visualizza sullo schermo.

Crea un nuovo progetto con Expo

Per iniziare, esegui il seguente comando Expo CLI per creare un nuovo progetto:

expo init tasklist

tasklist è il nome del progetto. Ti verrà richiesto di scegliere un modello per il tuo progetto. Per ora, scegli il modello vuoto, che ti dà dipendenze minime.

Il comandoexpo init crea una cartella di progetto e installa tutte le dipendenze richieste dall’app React Native.

expo init tasklist-app? Choose a template: expo-template-blank📦 Using npm to install packages. You can pass --yarn to use Yarn instead.✔ Downloaded and extracted project files.✔ Installed JavaScript dependencies.✅ Your project is ready!To run your project, navigate to the directory and run one of the following npm commands.- cd tasklist-app- npm start # you can open iOS, Android, or web from here, or run them directly with the commands below.- npm run android- npm run ios # requires an iOS device or macOS for access to an iOS simulator- npm run web

Passare alla cartella del progetto ed eseguire il seguente comando:

cd tasklist-appnpm start

npm start inizierà l’Expo dev strumenti e aprire una nuova scheda nel browser che assomiglia a questo:

Questa finestra consente di eseguire l’applicazione su un simulatore o un dispositivo collegato.

Collegare un dispositivo

Ora, aprire l’applicazione client Expo sul vostro dispositivo Android fisico e selezionare la scansione del codice QR opzione, come mostrato di seguito.

Quindi, tornare alla finestra di sviluppo Expo, eseguire la scansione del codice a barre e attendere il completamento del processo di compilazione del bundle JavaScript. Questo di solito richiede un paio di minuti. Quando il processo è completo, l’applicazione dovrebbe essere in esecuzione sul telefono!

Struttura del progetto

Ora che l’ambiente di sviluppo è pronto, è possibile modificare il codice per il progetto utilizzando l’editor di codice preferito. La cartella del progetto ha un aspetto simile a questo:

• asset: contiene le immagini per l’app
• node_modules: contiene tutte le dipendenze per l’app del progetto
• .js: contiene il codice che rende l’interfaccia utente ed è un file essenziale

App.js è aperto nello screenshot qui sopra. Diamo un’occhiata più da vicino. Per prima cosa, importiamoReact dareact. Quindi importiamo i componentiText eView dareact-native. Importiamo anche Stylesheet, che aiuta con lo styling.

React Native viene fornito con componenti incorporati come<Text> e<View> al contrario dei componenti HTML standard, come<div> e<p>. Il componente<View> è il componente più fondamentale in React Native e viene utilizzato per raggruppare altri componenti figlio, come<div> in HTML. Il componente<Text> viene utilizzato per visualizzare il contenuto del testo sullo schermo, come<p> in HTML.

Nella versione boilerplate di App.js che Expo crea, c’è una vista semplice con un componente di testo e una barra di stato. Questa vista viene restituita dalla funzioneApp(). La costantestyles contiene alcuni CSS di base per lo stile della vista.

Quindi, aggiungiamo alcuni nuovi componenti e stili per l’applicazione!

Crea l’interfaccia utente dell’app

Apri l’app.file js e inserire il seguente codice.

import { StatusBar } from 'expo-status-bar';import React , {useState} from 'react';import { StyleSheet, Text, View, TextInput, Button } from 'react-native';export default function App() { return ( <View style= {styles.container}> <View style = {styles.inputContainer}> <TextInput placeholder = "Task List" style = {styles.input} /> <Button title = "+"/> </View> </View> );}const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, input :{ borderColor:"black", borderWidth:1 , padding :20, }, inputContainer :{ flexDirection :'row', justifyContent :'space-between', alignContent:'center', bottom:20 },});

Il codice sopra aggiunge un semplice input di testo e un pulsante per aggiungere nuove attività. Usiamo CSS flexbox styling per posizionare i componenti uno accanto all’altro.

Aggiungere la Gestione degli Eventi

Per ottenere l’input dell’utente, prima di importare il useState() funzione react e utilizzarlo per aggiornare lo stato di newTask() e setnewTask() funzioni. Poiché l’utente non ha ancora digitato nulla, lo stato iniziale sarà vuoto. Aggiungere il seguente codice nella parte superiore del App() funzione, solo al di sopra di return:

const = useState('');

Abbiamo quindi definire il taskInputHandler che ascolta il cambiamento in ingresso e aggiorna i contenuti del setNewTask() funzione. Aggiungi queste righe alla funzioneApp() successivo:

 const taskInputHandler = (enteredText) => { setNewTask(enteredText); };

Ora registriamo questo gestore di input con il componenteTextInput. Aggiorna il tuo componenteTextInput in modo che assomigli al seguente.

 <TextInput placeholder = "Task List" style = {styles.input} onChangeText = {taskInputHandler} value = {newTask} />

Ora dobbiamo gestire la pressione dei pulsanti. Quando l’utente preme il pulsante+, vogliamo aggiungere la nuova attività a un elenco.

Per prima cosa, definiremo il nostro stato per l’elenco delle attività:

 const = useState();

Successivamente, definiremo una funzioneaddTaskHandler per aggiungere la nuova attività (che si trova nello statonewTask) all’elenco.

 const addTaskHandler = () =>{ appTask(currentTask => ); console.log(newTask); };

E registrare quel gestore di eventi con il componente<Button> :

 <Button title = "+" onPress = {addTaskHandler} />

Infine, aggiungeremo una nuova vista per mostrare tutte le attività nell’elenco che abbiamo creato. Questo va subito dopo la vista del contenitore di input, ma ancora all’interno della vista del contenitore principale.

 <View> {appTasks.map((task) => <Text>{task}</Text>)} </View>

Codice sorgente completo per App.js

Il codice completo per App.js è mostrato di seguito. Confrontalo con quello che hai.

 import { StatusBar } from 'expo-status-bar';import React , {useState} from 'react';import { StyleSheet, Text, View, TextInput, Button } from 'react-native';export default function App() { const = useState(''); const = useState(); const taskInputHandler = (enteredText) => { setnewTask(enteredText); }; const addTaskHandler = () =>{ appTask(currentTask => ); console.log(newTask); }; return ( <View style= {styles.container}> <View style = {styles.inputContainer}> <TextInput placeholder = "Task List" style = {styles.input} onChangeText = {taskInputHandler} value = {newTask} /> <Button title = "+" onPress = {addTaskHandler} /> </View> <View> {appTasks.map((task) => <Text>{task}</Text>)} </View> </View> );}const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, input :{ borderColor:"black", borderWidth:1 , padding :20, }, inputContainer :{ flexDirection :'row', justifyContent :'space-between', alignContent:'center, bottom:20 },});

Conclusione

In questo tutorial, hai imparato come creare un’app React Native con Expo.

React Native è un ottimo framework e una piattaforma popolare sia per gli sviluppatori che per le aziende. Le app create con React Native funzionano senza problemi su qualsiasi piattaforma o sistema. React Native salva anche il lavoro di sviluppo permettendoti di codificare la tua app una volta ed eseguirla su qualsiasi piattaforma mobile.

Modelli di app mobili premium da CodeCanyon

CodeCanyon è un mercato online che ha centinaia di modelli di app mobili – per Android, iOS, React Native e Ionic. È possibile salvare giorni, anche mesi, di sforzo utilizzando uno di loro.

Che tu abbia appena iniziato con React Native o sia uno sviluppatore esperto, un modello di app React Native è un ottimo modo per risparmiare tempo e fatica sul tuo prossimo progetto di app.

Se avete problemi a decidere quale modello su CodeCanyon è giusto per te, questi articoli dovrebbero aiutare:

• 
  Mobile App
  21+ Best React Native App Templates of 2021 (Including 5 Free)
  Franc Lucas
• 
  Ionic
  15 Stunning Ionic App Templates and Ionic Themes
  Franc Lucas
• 
  React
  9 React Native App Templates for You to Study and Use
  Franc Lucas