Un tuffo freddo in React Native (Tutorial per principianti)

Quando è stato annunciato React Native, le prime reazioni sono state estremamente positive. Tradizionalmente, quando pensiamo alle tecnologie web nello spazio mobile, vengono in mente cose come Apache Cordova, che ci permettono di impacchettare siti web o applicazioni web come applicazioni per piattaforme mobili. In questo tutorial per principianti, daremo un'occhiata all'architettura di React Native, alla filosofia alla base di React Native ea come differisce da altre soluzioni nello stesso spazio. Entro la fine dell'articolo, avremo trasformato un'applicazione React "Hello World" in una React Native.

Cominciamo col dire che React Native è una tecnologia relativamente nuova. È ufficialmente disponibile da marzo 2015, essendo in beta privata dall'inizio di quell'anno e utilizzato internamente su Facebook per un po' di tempo prima. Il detto “Roma non è stata costruita in un giorno” si applica generalmente anche alla tecnologia. Strumenti come grunt e piattaforme come Node.js hanno impiegato anni per maturare. Nel mondo del web, le cose si stanno muovendo rapidamente e con un numero enorme di framework, pacchetti e strumenti che escono ogni giorno, gli sviluppatori tendono a diventare un po' più scettici e non vogliono saltare su ogni carrozzone pubblicitario solo per rendersi conto che sono finiti in una situazione di blocco del fornitore. Analizzeremo ciò che rende React Native speciale, perché è una tecnologia in cui vale la pena entrare e tratteremo alcuni casi in cui non sono tutti unicorni e arcobaleni.

Sotto il cappuccio

Quando si parla di tecnologie web su dispositivi mobili, le soluzioni disponibili di solito rientrano in una delle seguenti categorie.

Raggruppamento di applicazioni Web in un browser Web mobile

L'applicazione Web risiede in un browser mobile, in genere chiamato WebView. Senza alcun refactoring importante, un sito Web o un'applicazione Web funziona sul dispositivo mobile. Potrebbe essere necessario considerare eventi del browser mobile come toccare o ascoltare le modifiche all'orientamento del dispositivo e lo schermo più piccolo per un'esperienza utente completa, ma abbiamo una versione mobile funzionante con il minimo sforzo. Cordova/PhoneGap è l'opzione più popolare in questa categoria. Sfortunatamente questa opzione ha un grosso svantaggio: in alcuni casi, le applicazioni sviluppate usando Cordova sono significativamente più lente delle applicazioni native, specialmente per applicazioni grafiche pesanti. In altri casi, il sistema operativo mobile in realtà non fornisce tutte le funzionalità in WebView disponibili nel browser mobile. L'esperienza dell'utente può anche differire dalle applicazioni native; ciò può accadere a causa dell'applicazione o della piattaforma stessa. Questo problema può variare da barre di scorrimento non uguali a un notevole ritardo quando si toccano gli elementi.

Compilazione su tecnologie native

Una soluzione completamente diversa consiste nel creare una base di codice nativa alla fine. Ciò avviene trasformando il codice sorgente originale in un altro linguaggio di programmazione. Scambiamo la performance nativa con uno strato di astrazione con alcune incertezze. Nei casi di soluzioni closed-source, non siamo nemmeno sicuri di cosa accada sotto il cofano e con che tipo di scatola nera abbiamo a che fare. In altri casi non siamo sicuri di quanto il prossimo aggiornamento del sistema operativo mobile interromperà il nostro codice e quando saranno disponibili correzioni o aggiornamenti. Un esempio popolare di questa categoria sarebbe Haxe.

Utilizzo di un livello JavaScript

Qui utilizziamo il motore JavaScript dell'ambiente mobile ed eseguiamo lì il nostro JavaScript. I controlli nativi sono mappati su oggetti e funzioni JavaScript, quindi quando dovessimo chiamare una funzione chiamata fancyButtonRightHere() , sullo schermo appariva un pulsante. NativeScript o Appcelerator Titanium sono esempi ben noti di questa categoria.

React Native potrebbe essere classificato come qualcosa della terza categoria. Per le versioni iOS e Android, React Native utilizza JavaScriptCore sotto il cofano, che è il motore JavaScript predefinito su iOS. JavaScriptCore è anche il motore JavaScript nei browser Safari di Apple. Gli sviluppatori OS X e iOS possono effettivamente interfacciarsi direttamente con esso, se lo desiderano.

Una grande differenza è che React Native esegue il codice JavaScript in un thread separato, quindi l'interfaccia utente non si blocca e le animazioni dovrebbero essere setose e fluide.

Reagire è la caratteristica chiave

Vale la pena notare che "React" in React Native non viene inserito per caso. Per React Native, abbiamo bisogno di una comprensione di cosa offre esattamente React. I concetti seguenti funzionano allo stesso modo sia in React che in React Native, sebbene questi esempi di codice siano personalizzati per essere eseguiti nel browser.

Punto di ingresso del rendering singolo

Quando diamo un'occhiata a un semplice componente React, la prima cosa che possiamo notare è che il componente ha una funzione di render . In effetti, React genera un errore se non esiste una funzione di rendering definita all'interno del componente.

 var MyComponent = function() { this.render = function() { // Render something here }; };

La cosa speciale è che qui non scherziamo con gli elementi DOM, ma restituiamo un costrutto basato su XML che rappresenta ciò che verrà visualizzato nel DOM. Questo costrutto basato su XML è chiamato JSX.

 var MyComponent = function() { this.render = function() { return <div className="my-component">Hello there</div>; }; };

Uno speciale trasformatore JSX prende tutto quel codice dall'aspetto XML e lo converte in funzioni. Ecco come apparirà il componente dopo la trasformazione:

 var MyComponent = function() { this.render = function() { return React.createElement("div", { className: "my-component" }, "Hello there"); }; };

Il più grande vantaggio è che dando una rapida occhiata al componente, sappiamo sempre cosa dovrebbe fare. Ad esempio, un componente <FriendList /> potrebbe eseguire il rendering di un numero di componenti <Friend /> . Non possiamo eseguire il rendering dei nostri componenti da nessun'altra parte se non all'interno della funzione di render , quindi non c'è mai la preoccupazione di non sapere esattamente da dove provenga il nostro componente renderizzato.

Flusso di dati unidirezionale

Per costruire il contenuto di un componente, React fornisce proprietà o oggetti di scena in breve. Simile agli attributi XML, passiamo gli oggetti di scena direttamente a un componente e possiamo quindi utilizzare gli oggetti di scena all'interno del componente costruito.

 var Hello = function(props) { this.render = function() { return <div className="my-component">Hello {props.name}</div>; }; }; var Greeter = function() { this.render = function() { return <Hello name="there" /> } };

Ciò fa sì che i nostri componenti si trovino in una struttura ad albero e siamo autorizzati a passare i dati solo durante la costruzione di elementi figlio.

Re-rendering sulle modifiche

Oltre agli oggetti di scena, i componenti possono anche avere uno stato interno. L'esempio più evidente di tale comportamento sarebbe un contatore di clic che aggiorna il suo valore quando viene premuto un pulsante. Il numero di clic stesso verrebbe salvato nello stato.

Ciascuna modifica di prop e di stato attiva un re-rendering completo del componente.

DOM virtuale

Ora, quando tutto viene ridisegnato quando gli oggetti di scena o lo stato cambiano, come mai React stesso si comporta così bene? L'ingrediente magico è il "DOM virtuale". Ogni volta che è necessario ridisegnare qualcosa, viene generata una rappresentazione virtuale del DOM aggiornato. Il DOM virtuale consiste in rappresentazioni luminose di elementi modellati sull'albero dei componenti, rendendo il processo di generazione degli stessi molto più efficiente rispetto alla generazione di elementi DOM reali. Prima di applicare le modifiche al DOM reale, vengono effettuati controlli per determinare dove esattamente nell'albero dei componenti sono avvenute le modifiche, viene creata una differenza e vengono applicate solo quelle modifiche specifiche.

Guida introduttiva a questo tutorial React Native

Ci sono alcuni prerequisiti che i principianti dovranno impostare per poter sviluppare per React Native. Poiché iOS è stata la prima piattaforma supportata e quella che stiamo trattando in questo tutorial, abbiamo bisogno di macOS e Xcode, almeno la versione 6.3. È necessario anche Node.js. Ciò che aiuta è l'installazione di Watchman tramite il gestore di pacchetti Brew con brew install watchman . Anche se questo non è necessariamente necessario, aiuta quando si tratta di molti file all'interno del nostro progetto React Native.

Per installare React Native, dobbiamo semplicemente installare l'applicazione da riga di comando React Native con npm install -g react-native-cli . Chiamare il comando react-native ci aiuta quindi a creare una nuova applicazione React Native. L'esecuzione react-native init HelloWorld crea una cartella chiamata HelloWorld in cui è possibile trovare il codice standard.

Trasformare un'applicazione React

Poiché React è la caratteristica chiave e i principi fondamentali provenienti dalla libreria React, diamo un'occhiata a ciò di cui abbiamo bisogno per trasformare un'applicazione React "Hello World" minima in una React Native.

In questo esempio di codice utilizziamo alcune funzionalità di ES2015, in particolare le classi. È del tutto possibile attenersi a React.createClass o utilizzare un modulo di funzione simile al popolare modello di modulo.

 var React = require('react'); class HelloThere extends React.Component { clickMe() { alert('Hi!'); } render() { return ( <div className="box" onClick={this.clickMe.bind(this)}>Hello {this.props.name}. Please click me.</div> ); } } React.render(<HelloThere name="Component" />, document.getElementById('content'));

Passaggio 1: abbraccia i moduli CommonJS

Nel primo passaggio è necessario modificare la richiesta al modulo React di utilizzare invece react-native .

 var React = require('react-native'); class HelloThere extends React.Component { clickMe() { alert('Hi!'); } render() { return ( <div className="box" onClick={this.clickMe.bind(this)}>Hello {this.props.name}. Please click me.</div> ); } } React.render(<HelloThere name="Component" />, document.getElementById('content'));

Ciò che di solito fa parte della pipeline di strumenti durante lo sviluppo di un'applicazione Web React è parte integrante di React Native.

Passaggio 2: non esiste DOM

Non sorprende che non ci siano DOM sui dispositivi mobili. Laddove in precedenza abbiamo utilizzato <div /> , è necessario utilizzare <View /> e dove abbiamo utilizzato <span /> , il componente di cui abbiamo bisogno qui è <Text /> .

 import React from 'react'; import {View, Text, Alert} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert('hi!'); } render() { return ( <View className="box" onClick={this.clickMe.bind(this)}>Hello {this.props.name}. Please click me.</View> ); } } React.render(<HelloThere name="Component" />, document.getElementById('content'));

Sebbene sia abbastanza conveniente inserire il testo direttamente negli elementi <div /> , nel mondo nativo il testo non può essere inserito direttamente in un <View /> . Per questo abbiamo bisogno di inserire un componente <Text /> .

 import React from 'react'; import {View, Text, Alert} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert('hi!'); } render() { return ( <View className="box" onClick={this.clickMe.bind(this)}> <Text>Hello {this.props.name}. Please click me.</Text> </View> ); } } React.render(<HelloThere name="Component" />, document.getElementById('content'));

Passaggio 3: gli stili in linea sono la strada da percorrere

React Native ci consente di utilizzare la modellazione Flexbox invece di scherzare con float e inline-block cui siamo così familiari nel mondo del web. La cosa interessante è che React Native non usa CSS.

 import React from 'react'; import {View, Text, StyleSheet, Alert} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert('hi!'); } render() { return ( <View style={styles.box} onClick={this.clickMe.bind(this)}> <Text>Hello {this.props.name}. Please click me.</Text> </View> ); } } var styles = StyleSheet.create({ box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 } }); React.render(<HelloThere name="Component" />, document.getElementById('content'));

L'uso di stili in linea sembra sconcertante per i principianti. È simile alla transizione che gli sviluppatori di React hanno dovuto affrontare quando si sono confrontati con JSX e in precedenza utilizzavano motori di creazione di modelli come Handlebars o Jade.

L'idea è che non abbiamo fogli di stile a livello globale nel modo in cui utilizziamo i CSS. Dichiariamo i fogli di stile direttamente a livello di componente, e quindi abbiamo tutte le informazioni di cui abbiamo bisogno per vedere cosa fa il nostro componente, il layout che crea e gli stili che applica.

 import React from 'react'; import {Text} from 'react-native'; var Headline = function(props) { this.render = () => <Text style={headlineStyle.text}>{props.caption}</Text>; }; var headlineStyles = StyleSheet.create({ text: { fontSize: 32, fontWeight: 'bold' } }); module.exports = Headline;

Passaggio 4: gestione degli eventi

L'equivalente di fare clic su pagine Web è toccare un elemento sul dispositivo mobile. Cambiamo il nostro codice in modo che venga visualizzato "avviso" quando tocchiamo l'elemento.

 import React from 'react'; import {View, Text, StyleSheet, TouchableOpacity, Alert} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert("Hi!") } render() { return ( <TouchableOpacity onPress={this.clickMe()}> <View style={styles.box}> <Text>Hello {this.props.name}. Please click me.</Text> </View> </TouchableOpacity> ); } } var styles = StyleSheet.create({ box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 } }); React.render(<HelloThere name="Component" />, document.getElementById('content'));

Anziché gli eventi direttamente disponibili sui componenti <View /> , è necessario utilizzare esplicitamente gli elementi che attivano gli eventi, nel nostro caso un evento touch quando si preme la vista. Sono disponibili diversi tipi di componenti tangibili, ognuno dei quali fornisce un feedback visivo diverso.

Passaggio 5: personalizza il comportamento su più piattaforme

È possibile rilevare su quale piattaforma è in esecuzione l'applicazione React Native, accedendo al valore di Platform.OS . Diciamo che, nell'esempio sopra, volevamo visualizzare un messaggio di avviso diverso in base alla piattaforma su cui stiamo girando. Possiamo farlo in questo modo:

 ... clickMe() { var message = ''; if(Platform.OS == 'ios') { message = 'Welcome to iOS!'; } else if(Platform.OS == 'android') { message = 'Welcome to Android!'; } Alert.alert(message); } ...

In alternativa, è disponibile anche il metodo select , che fornisce una sintassi simile a un interruttore:

 … clickMe() { Alert.alert(Platform.select({ ios: 'Welcome to iOS!', android: 'Welcome to Android!' }) ); } ...

Passaggio 6: caratteri personalizzati e react-native link

Per aggiungere un carattere personalizzato, dobbiamo saltare attraverso alcuni cerchi. Prima di tutto, assicurati che il nome completo del carattere e il nome del file del carattere siano gli stessi: iOS utilizzerà il nome completo del carattere per prelevare il carattere, mentre Android utilizzerà il nome del file.

Quindi, se il nome completo del tuo font è myCustomFont , assicurati che il nome del file del font sia myCustomFont.ttf .

Dopodiché, dobbiamo creare una cartella delle risorse e puntare ad essa con npm. Possiamo farlo creando prima la cartella, in assets/fonts nella directory principale dell'applicazione. Qualsiasi altra directory andrà bene, ma questo è il nome convenzionale utilizzato per la directory dei font.

Possiamo dire a npm dove abbiamo le nostre risorse aggiungendo una proprietà Assets nella sezione di integrazione npm di React, rnpm:

 "rnpm": { "Assets": [ "./assets/fonts/" ] }

Dopo aver fatto tutto ciò, possiamo finalmente eseguire react-native link . Ciò copierà i caratteri nelle directory corrette e aggiungerà l'xml necessario a info.plist su iOS.

Una volta fatto, possiamo usare il nostro font semplicemente facendo riferimento ad esso in qualsiasi foglio di stile con il suo nome completo. Usiamolo sul nostro elemento di Text :

 import React from 'react'; import {View, Text, StyleSheet, TouchableOpacity, Alert} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert("Hi!") } render() { return ( <TouchableOpacity onPress={this.clickMe()}> <View style={styles.box}> <Text style={styles.message}>Hello {this.props.name}. Please click me.</Text> </View> </TouchableOpacity> ); } } var styles = StyleSheet.create({ box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 }, message: { fontFamily: 'myCustomFont' } }); React.render(<HelloThere name="Component" />, document.getElementById('content'));

Passaggio 7: spostare le cose

React Native utilizza le stesse regole di Flexbox per la disposizione dei componenti. Supponiamo di voler posizionare il nostro pulsante nella parte inferiore dello schermo: avvolgiamo il nostro TouchableOpacity con un contenitore View :

 <View style={styles.container}> <TouchableOpacity onPress={this.clickMe.bind(this)}> <View style={styles.box}> <Text style={styles.message}>Hello {this.props.name}. Please click me.</Text> </View> </TouchableOpacity> </View>

E ora definiamo lo stile container , insieme agli altri stili già definiti:

 container: { flex: 1, justifyContent: 'center', alignItems: 'center' }

Concentriamoci su justifyContent e alignItems . Queste due proprietà controllano come il componente è allineato rispettivamente lungo il suo asse primario e il suo asse secondario. Per impostazione predefinita, l'asse principale è quello verticale e l'asse secondario è l'asse orizzontale (è possibile modificarlo impostando la proprietà flexDirection su row ).

justifyContent ha sei possibili valori che possono essere impostati su:

• flex-start posizionerà tutti gli elementi insieme, all'inizio del riquadro di delimitazione del componente.
• flex-end posizionerà tutti gli elementi alla fine.
• center posizionerà tutti gli elementi al centro del rettangolo di selezione.
• space-around distribuirà i componenti in modo uniforme e centra i componenti nei riquadri di delimitazione creati.
• space-evenly distribuirà anche i componenti in modo uniforme, ma cercherà di lasciare una quantità uguale di spazio tra i componenti e gli altri contorni.
• space-between diffonderà i componenti mantenendo uguale la spaziatura tra i componenti adiacenti.

alignItems può essere impostato su quattro valori possibili: flex-start , flex-end , center e stretch . I primi tre si comportano come per justifyContent , mentre stretch imposterà il componente in modo che occupi tutto lo spazio disponibile lungo l'asse, in modo che l'asse sia completamente riempito.

Quindi, poiché vogliamo che il nostro TouchableOpacity sia visualizzato in basso e centrato lungo l'asse orizzontale, possiamo cambiare lo stile in questo modo:

 container: { flex: 1, justifyContent: 'flex-end', alignItems: 'center' }

Ulteriori informazioni sui valori che possono avere justifyContent e alignItems sono disponibili qui e qui.

Passaggio 8: registrazione dell'applicazione

Durante lo sviluppo con React per il browser, dobbiamo solo definire un punto di montaggio, chiamare React.render e lasciare che React faccia la sua magia. In React Native, questo è un po' diverso.

 import React from 'react'; import {View, Text, StyleSheet, TouchableOpacity, Alert, Platform} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert(Platform.select({ ios: 'Welcome to iOS!', android: 'Welcome to Android!' })); } render() { return ( <View style={styles.container}> <TouchableOpacity onPress={this.clickMe.bind(this)}> <View style={styles.box}> <Text style={styles.message}>Hello {this.props.name}. Please click me.</Text> </View> </TouchableOpacity> </View> ); } } var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'flex-start', alignItems: 'center' }, box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 }, message: { fontFamily: 'myCustomFont' } }); var MainComponent = function() { this.render = function() { return <HelloThere name="Component" />; } }; AppRegistry.registerComponent('MainComponent', function() { return MainComponent; });

Dobbiamo registrare il componente per il lato delle cose Objective-C, che viene eseguito utilizzando l'oggetto AppRegistry . Il nome che diamo deve corrispondere al nome all'interno del progetto Xcode.

La nostra applicazione Hello World React Native ha molte più righe di codice rispetto alla sua controparte web, ma d'altra parte, React Native porta la separazione delle preoccupazioni un po' più lontano, soprattutto perché gli stili sono definiti con il componente.

Come nota a margine, non dovremmo ricollegare il metodo clickMe a this contesto nel metodo di render , specialmente se la nostra applicazione React (nativa) diventa un po' più complessa. Ricollega il metodo ad ogni chiamata di rendering che può diventare parecchio. L'alternativa è associare il metodo all'interno del costruttore.

Esecuzione dell'applicazione

Per eseguire l'applicazione, dobbiamo sostituire il contenuto del file index.ios.js con la parte di codice della nostra applicazione trasformata dall'ultimo passaggio. Quindi dobbiamo solo aprire il progetto Xcode e premere il grande pulsante Esegui. Innanzitutto, si aprirà un terminale con il server React Native, quindi apparirà la finestra del simulatore. Il server React Native crea un bundle, che l'applicazione nativa recupererà. Ciò consente un ciclo di sviluppo rapido simile allo sviluppo Web, in cui le modifiche si rifletteranno quasi istantaneamente nel simulatore.

Per Android, è sufficiente aggiungere quanto segue al file package.json , in scripts :

 "android-linux": "react-native bundle --platform android --dev false --entry-file index.ios.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/ main/res && react-native run-android"

E poi esegui npm run android-linux . Assicurati che la directory android/app/src/main/assets esista in anticipo.

Dopo che il terminale è apparso, la nostra applicazione apparirà nel simulatore. Premendo CMD+D verrà visualizzato un menu di sviluppo. Cliccando sulla casella verrà quindi visualizzato un avviso. La versione iOS:

E Android rende qualcosa del genere:

Per la distribuzione, avere un'applicazione che punta a un server di sviluppo locale non funzionerebbe per noi. Per questo motivo, possiamo creare il bundle per l'utilizzo quando il server React Native non è in esecuzione con il comando react-native bundle . In tal caso, è necessario aggiornare il metodo didFinishLaunchingWithOptions di AppDelegate per utilizzare il bundle offline.

Questa applicazione di esempio è disponibile anche su Github.

Lavorare con React Native

Un'altra cosa degna di nota è che non solo utilizziamo i concetti di React e JavaScript per le nostre applicazioni mobili, ma alcuni dei flussi di lavoro a cui sono abituati gli sviluppatori Web sono disponibili anche con React Native. Quando proveniamo dallo sviluppo web, siamo abituati a strumenti per sviluppatori, ispezionare elementi e ricaricare in tempo reale.

Il modo in cui React Native funziona è che mette tutti i nostri file JavaScript in un pacchetto. Questo pacchetto viene servito da un server o fornito insieme all'applicazione. Il primo è incredibilmente utile per lo sviluppo nel simulatore, poiché possiamo abilitare il ricaricamento in tempo reale. Il menu sviluppatore fornito da React non è affatto potente come gli Strumenti per sviluppatori di Chrome, ma offre un'esperienza per sviluppatori molto simile al Web con ricarica e debug in tempo reale con gli strumenti di sviluppo/debugger di Chrome (o Safari).

Gli sviluppatori Web hanno familiarità con JSFiddle o JSBin, un parco giochi online per test Web rapidi. Esiste un ambiente simile che ci consente di provare React Native in un browser web.

React Native: una scelta solida e moderna

Inizialmente avevo suggerito un approccio più cauto a React Native. Oggi è una scelta matura e solida.

Uno dei grandi vantaggi di React è che non si impone sul flusso di lavoro, poiché rappresenta solo il livello di visualizzazione. Vuoi definire la tua pipeline Grunt? O preferisci usare Webpack? E utilizzerai Backbone.js per le tue esigenze di modello? O vuoi andare con semplici oggetti JavaScript? Le risposte a tutte queste domande dipendono totalmente da te, perché React non pone alcuna restrizione a queste scelte. Come aveva affermato il sito ufficiale: "Dato che React non fa ipotesi sul resto del tuo stack tecnologico, è facile provarlo su una piccola funzionalità in un progetto esistente".

In una certa misura, questo vale anche per React Native. Gli sviluppatori mobili possono integrare React Native come parte della loro applicazione, sfruttare il flusso di lavoro di sviluppo ispirato al Web e scegliere di integrare la libreria su scala più ampia, se necessario.

In ogni caso, una cosa è certa: React Native non se ne andrà. Facebook ha un interesse enorme nel fatto di avere più applicazioni React Native negli app store. La comunità attorno a React Native è enorme e continua a crescere.