Share
React Native di Facebook è un potente framework che ti consente di creare rapidamente e senza sforzo app per Android e iOS utilizzando solo JavaScript e JSX. Le app create utilizzando React Native utilizzano i componenti dell'interfaccia utente nativa e sono quindi indistinguibili dalle app create direttamente utilizzando gli SDK di Android e iOS.
Anche la loro performance non è molto lontana da quella delle app native, perché quasi tutto il codice JavaScript viene eseguito in background su un'istanza incorporata di JavaScriptCore, lo stesso motore JavaScript che alimenta Safari di Apple.
In questo tutorial, ti aiuterò a iniziare con React Native per Android mostrandoti come creare una semplice app di dizionario inglese-tedesco.
Prima di iniziare, assicurati di aver installato quanto segue sul tuo computer:
A partire da settembre 2015, React Native è supportato solo su OS X. Tuttavia, con l'aiuto di alcuni script, React Native v0.11.4 funziona perfettamente su Ubuntu 14.04..
React Native è disponibile come pacchetto Node.js e può essere rapidamente installato utilizzando npm, Node Package Manager.
bash npm install -g react-native-cli
Per utilizzare React Native per lo sviluppo di app Android, è necessario impostare il valore di una variabile di ambiente chiamata ANDROID_HOME al percorso assoluto della directory contenente l'SDK di Android. Se si utilizza la shell di Bash, è possibile impostare la variabile usando esportare.
bash export ANDROID_HOME = / percorso / a / Android / Sdk
Per creare un progetto React Native, è necessario utilizzare l'interfaccia della riga di comando o CLI della riga di comando di React Native, a cui è possibile accedere utilizzando il reagiscono-native comando. Stiamo creando un'app per dizionari in questo tutorial, quindi chiamiamo il progetto Dizionario.
bash react-native init Dictionary
Una volta completato il comando, verrà visualizzata una nuova directory Dizionario, contenente un'app React Native starter. Inserisci la nuova directory usando CD.
bash cd Dizionario
Prima di procedere, ti suggerisco di eseguire l'app di avvio per assicurarti che il tuo ambiente di sviluppo abbia tutto ciò che serve a React Native. Per fare ciò, digitare il seguente comando:
bash react-native run-android
Ora troverai un'app chiamata Dizionario installato sul tuo emulatore. Clicca sulla sua icona per avviarlo. Se tutto è andato bene, dovresti vedere una schermata simile a questa:
Per impostazione predefinita, il punto di ingresso di un'app Android React Native è un file JavaScript chiamato index.android.js. Quando hai creato il progetto utilizzando la CLI di React Native, questo file è stato creato automaticamente. Tuttavia, contiene il codice che appartiene all'app di avviamento. Puoi modificare e utilizzare parti di quel codice per la tua app oppure puoi semplicemente cancellarlo tutto e ricominciare da capo. Per questo tutorial, ti suggerisco di fare quest'ultimo.
Una volta eliminato il contenuto di index.android.js, uso richiedere per caricare un modulo chiamato reagiscono-native. Questo modulo contiene tutte le funzioni e gli oggetti React Native necessari per creare la tua app.
javascript var React = require ('react-native');
I componenti di React sono oggetti JavaScript responsabili del rendering e dell'aggiornamento automatico dell'interfaccia utente di un'app React Native. In effetti, quasi ogni elemento dell'interfaccia utente di un'app React Native è un componente React. Ciò significa che, per creare l'interfaccia utente della tua app, devi creare il tuo componente React personalizzato. Per fare ciò, utilizzare il createClass funzione di Reagire. Il codice seguente crea un componente chiamato Dizionario:
"Dizionario javascript var = React.createClass (
);"
Puoi pensare a questo componente come prima schermata della tua app.
React Native chiama automaticamente il rendere funzione ogni volta che è necessario disegnare o aggiornare un componente. Pertanto, è necessario aggiungere questa funzione al componente. All'interno della funzione, è possibile definire il layout del componente utilizzando JSX, un'estensione di sintassi JavaScript che consente di combinare facilmente tag XML con codice JavaScript.
React Native offre diversi componenti che è possibile utilizzare per comporre il layout. Per ora, useremo a React.View come un contenitore, a React.Text per visualizzare il testo e a React.TextInput per accettare l'input dell'utente. Aggiungi il seguente codice al componente:
"javascript render: function () var layout =
Scrivi qualcosa in inglese: Il suo equivalente tedesco è: ; layout di ritorno; ,"
Se hai familiarità con HTML, puoi pensare a vista come HTML div, il Testo come HTML campata, e il L'immissione di testo come HTML ingresso elemento.
Nello snippet di codice precedente, diversi componenti hanno un stile attributo. Il stile l'attributo è abbastanza simile all'HTML classe attributo. Tuttavia, invece di fare riferimento a una classe CSS in un foglio di stile, fa riferimento a un oggetto JSON in un'istanza di React.StyleSheet.
Per creare un React.StyleSheet oggetto per la tua app, è necessario utilizzare il React.StyleSheet.create funzione. Come unico argomento, si aspetta un oggetto JSON contenente gli stili dei singoli componenti. Ecco gli stili che ho usato per la nostra app di esempio:
"javascript var styles = React.StyleSheet.create (
// Per il contenitore Visualizza genitore: padding: 16, // Per l'etichetta di testo germanLabel: marginTop: 20, fontWeight: 'bold', // Per il testo che significa germanWord: marginTop: 15, fontSize: 30 , fontStyle: 'italic'); "
Affinché React Native sappia che dovrebbe rendere il tuo componente all'avvio della tua app, devi registrarlo usando il React.AppRegistry.registerComponent funzione. Per fare ciò, aggiungi il seguente codice alla fine di index.android.js:
javascript React.AppRegistry.registerComponent ('Dictionary', () => Dizionario);
Se non hai familiarità con le funzioni freccia ES6, puoi semplicemente utilizzare il seguente codice JavaScript convenzionale:
javascript React.AppRegistry.registerComponent ('Dictionary', function () return Dictionary;);
Se lo desideri, puoi ora ricaricare la tua app per vedere il nuovo layout. Per fare ciò, premere il pulsante menu del proprio emulatore e fare clic su Ricarica JS.
Tutti i componenti hanno una variabile membro speciale chiamata stato, che è un oggetto JSON. È speciale, perché non appena il stato di un componente cambia, React Native esegue automaticamente il rendering del componente in modo che rifletta la modifica. Questa è una funzionalità molto utile e, se utilizzata correttamente, puoi eliminare o aggiornare manualmente i contenuti degli elementi dell'interfaccia utente della tua app.
Aggiungiamo due chiavi, ingresso e produzione, al Dizionario componente di stato. Per fare ciò, dovrai usare una funzione chiamata getInitialState. Il valore di ritorno di questa funzione diventa il stato del componente.
javascript getInitialState: function () return input: ", output:"; ,
Ora puoi associare il L'immissione di testo con ingresso e l'ultimo Testo componente con produzione. Dopo averlo fatto, il tuo layout dovrebbe assomigliare a questo:
"xml
Scrivi qualcosa in inglese: Il suo equivalente tedesco è: this.state.output
"
Come avrai intuito, ingresso conterrà la parola inglese che l'utente inserisce mentre produzione conterrà il suo equivalente tedesco.
Sebbene i cambiamenti nel stato vengono automaticamente inviati all'interfaccia utente, il contrario non è vero. Questo significa, il nostro componente stato non cambia se l'utente inserisce qualcosa nel L'immissione di testo. Per aggiornare il stato manualmente, dovresti usare il componente setState metodo.
Per inviare il valore del L'immissione di testo a ingresso, puoi aggiungere un onChangeText ascoltatore al L'immissione di testo e fare una chiamata a setState dentro. Utilizzando ES6, il L'immissione di testo il tag sarà simile a questo:
javascript
A questo punto, qualsiasi cosa l'utente digiti nella tua app L'immissione di testo è immediatamente disponibile in ingresso. Tutto quello che resta da fare è mappare il ingresso al suo equivalente tedesco e aggiornamento produzione. Per fare ciò, è possibile utilizzare un dizionario chiamato Mr.'s Beginner's Dictionary (tedesco-inglese) di Winfried Honig. Scarica l'equivalente JSON del dizionario da GitHub e aggiungilo al tuo progetto.
Per caricare il dizionario all'interno index.android.js, uso richiedere.
javascript var english_german = require ('./ english_german.json');
Come english_german non è altro che un oggetto JSON globale in cui le parole inglesi sono chiavi e i loro equivalenti tedeschi sono valori, tutto ciò che devi fare ora è controllare se ingresso è disponibile come chiave e, in caso affermativo, chiama setState per assegnare il valore associato a produzione. Il codice per farlo potrebbe apparire come questo:
"javascript showMeaning: function () // Utilizza l'operatore ternario per verificare se la parola // esiste nel dizionario. var meaning = this.state.input in english_german? english_german [this.state.input]:" Not Found " ;
// Aggiorna lo stato this.setState (output: meaning); ,"
Ora puoi assegnare showMeaning al onSubmitEditing ascoltatore del L'immissione di testo in modo che venga chiamato solo quando l'utente ha terminato di digitare.
javascript
La tua app del dizionario è pronta. Puoi ricaricarlo e digitare una parola inglese per vedere immediatamente la sua traduzione in tedesco.
In questo tutorial, hai imparato come installare React Native e utilizzarlo per creare la tua prima app per Android, un dizionario inglese-tedesco, usando solo JavaScript e JSX. Mentre facevi così, hai imparato come comporre un componente personalizzato, modificarlo e usarne uno stato per controllare ciò che mostra.
Per saperne di più su React Native, puoi consultare la sua documentazione.
Accentsconagua