TutorialReactNative
1.0.0
Der Zweck dieses Tutorials besteht darin, Sie in den ersten Schritten mit React Native zu führen.
Erstellen wir eine App mit der TV -Labyrinth -API und folgen Sie dem folgenden Prototyp:
Dieses Tutorial befindet sich im Bau. Bisher deckt er die folgenden Punkte ab:
Repository mit dem Code bereit, ebenfalls im Konstruktion : https://github.com/erbuen/favtvshow :)
Bevor Sie mit dem Schreiben von Code beginnen, ist es wichtig, die mit jedem Bildschirm verbundenen Verhaltensweisen zu verstehen.
Dies ist der Bildschirm, den der Benutzer beim Starten der Anwendung anzeigt.
Sie sollte eine Suchleiste haben und auf der rechten Seite der Balken einen Knopf.
Die Suchleiste sollte einen Platzhalter haben. Wenn Sie ein Wort eingeben, das gesucht werden soll, müssen wir die Schaltfläche verwenden, die die Tastatur zur Verfügung stellt, um die Suche zu starten, wie wir auftreten, wenn wir eine URL im mobilen Browser eingeben.
Ergebnisse finden, sollte unter der Suchleiste und unter dem Titel "Suchergebnis" nach einer Zeile angezeigt werden. Wenn Sie keine Ergebnisse erhalten, sollten Sie die Meldung "Keine Ergebnisse gefunden" anzeigen.
Die Ergebnisse sollten als "Karten" angezeigt werden, die das Bild, den Namen der Serie und die ihm zugeschriebenen Genres enthalten (siehe Abschnitt 1.3).
Wenn der Benutzer eines der Ergebnisse auswählt, sollte er auf einen anderen Bildschirm gebracht werden, der die vollständigen Informationen der Serie anzeigt. Wir werden diesen Bildschirm bald beschreiben.
Die rechte Schaltfläche der Suchleiste sollte, wenn sie geklickt wird, die Lieblingsserie des Benutzers unter dem Titel "Favoriten" anzeigen.
Wenn keine Suche in Arbeit ist, zeigen Sie auf dem Bildschirm nichts an.
Wenn es keine Lieblingsserie gibt, anzeigen Sie die Meldung "Sie haben noch keine Lieblingsserie".
Wenn der Benutzer auf eine Serie klickt, entweder in den Suchergebnissen oder zugunsten, sollte sie auf diesen Bildschirm gebracht werden.
In diesem Bildschirm sollte ein Bild angezeigt, das der Serie, dem Namen, den Genres und der Zusammenfassung zugeordnet ist.
Neben dem Namen und der Genres sollten Sie eine Schaltfläche haben, damit der Benutzer die Serie bevorzugen kann.
Wenn der Benutzer auf die Schaltfläche klickt, um die Serie zu bevorzugen, sollten die Daten im internen globalen Speicher der Anwendung gespeichert werden, und es sollte eine visuelle Rückkehr an den Benutzer geben, der ein "Toast" oder ähnliches sein könnte.
Über dem Bild der Serie sollten Sie eine Rückgabetaste haben, die zum vorherigen Bildschirm aufgenommen wird.
Der Benutzer sollte in der Lage sein, den Bildschirm zu rollen, da der Inhalt der Zusammenfassung größer ist als die Bildschirmgröße des Geräts.
Sie sehen eine Serienliste, wenn Sie mindestens ein Ergebnis suchen und wenn Sie auf Ihre bevorzugte Serie zugreifen.
Zu diesem Zweck sollten wir eine Kartenkomponente als Bild unten erstellen:
Karten sollten auf eine Flatlist angeklickt und angezeigt werden.
Es ist an der Zeit gekommen, das Projekt zu starten! Besuchen Sie dazu die React Native -Seite und klicken Sie auf den Einstieg .
Auf der Seite Erste Schritte finden Sie alle Informationen, die Sie benötigen, um mit React Native zu beginnen. Für dieses Tutorial empfehlen wir Ihnen, die Option React Native ClickStart -Option zu wählen.
Wählen Sie dann die beste Option, die zu Ihrem Profil passt. In meinem Fall werde ich mich mit einem Mac entwickeln. In der Entwicklung habe ich sie ausgewählt und wie ich mit dem iPhone testen werde, habe ich das Ziel als iOS gewählt, hätte aber Android auswählen können.
Sie können nur Ziel als iOS auswählen, wenn Sie einen Mac verwenden. Für Windows und Linux müssen Sie notwendigerweise Android wählen.
Befolgen Sie nach Auswahl der Optionen nach Ihrem Betriebssystem die Anweisungen zur Installation der für die Verwendung von React Native erforderlich.
Nach Abschluss der Installation aller Abhängigkeiten gemäß Schritt für Schritt der React Native Site können Sie Ihr Projekt mit dem folgenden Befehl starten:
npx react-native init NomeDoProjetoDie Erstellung des Projekts kann einige Minuten dauern, keine Sorgen machen und den Protokollen durch das Terminal folgen :)
Wenn der Vorgang abgeschlossen ist, können Sie Ihr Projekt mit den folgenden Befehlen ausführen:
cd NomeDoProjeto
npx react-native run-iosWenn Sie macOS verwenden. Oder wenn Sie Windows oder Linux verwenden:
cd NomeDoProjeto
npx react-native run-androidNach einer Weile - und das erste Mal, dass wir diesen Befehl ausführen, kann man wirklich lange dauern - Sie werden so etwas sehen (abhängig vom Ziel -Betriebssystem ):
Wichtig: Beachten Sie, dass der Standard -Projekttext in der First Execution (No Change) Optionen erwähnt, damit Sie Ihre Änderungen (neu laden) und auch debuggen können. Dies bedeutet, dass Sie den Code ändern und die Änderungen sehen und in Echtzeit Debuggen vornehmen können.
Damit Sie das Projekt ändern können, müssen Sie einen Code -Editor Ihrer Wahl verwenden:
Wenn Sie das Projekt im Code -Editor Ihrer Wahl öffnen, sehen Sie diese Ordner- und Dateistruktur:
Hinweis: Dies ist die Seitenleiste meines Visual Studio -Code. Ich verwende ein anderes Thema als Standard und habe auch eine Erweiterung, die die Bilder der Symbole ändert, die jeder Datei oder jedem Ordner zugeordnet sind. Der Name, den ich meinem Projekt gegeben habe, ist favtvshow .
Was hier wichtig ist:
Android- und iOS -Ordner enthalten den generierten nativen Code. Sie können Ihre Anwendung auf Android Studio oder Xcode ausführen, die diese Ordner in jeder IDE öffnen. Diese Ordner sind wichtig, um die Veröffentlichung Ihrer Anwendung zu generieren.
Der Ordner node_modules enthält alle vom NPM installierten Projekteinrichtungen.
Die Anwendung kann ursprünglich über die App.js -Datei bearbeitet werden.
Die Datei index.js sucht und zeichnet die globale Komponente unserer Anwendung auf, dh die erste zu geladene Komponente. Es ist wichtig für den Inhalt der App.js -Datei und auf dem Bildschirm.
Die Datei package.json enthält alle Daten in den Räumlichkeiten und auch von Skripten, die sich auf Ihr Projekt beziehen.
Löschen Sie den gesamten Inhalt der App.js -Datei und ersetzen Sie sie durch::
import React , { Component } from 'react' ; // 1
import { Text , View , StyleSheet } from 'react-native' ; // 2
// 3
export default class App extends Component {
render ( ) {
return (
// 4
< View style = { styles . hello } >
< Text > Hello, world! </ Text >
</ View >
) ;
}
}
// 5
const styles = StyleSheet . create ( {
hello : {
flex : 1 ,
justifyContent : 'center' ,
alignItems : 'center' ,
} ,
} ) ;Wenn Sie den Inhalt von App.js entfernen, setzen Sie diesen neuen Inhalt ein und speichern Sie die Datei. Wenn Sie den Simulator ausgeführt haben, lädt er die Ansicht automatisch auf.
Lesen Sie unbedingt die offizielle Dokumentation über den Text- und Ansichtskomponenten und das Abstraktionsstilheet.
Ändern wir den Stil des Textes in der Textkomponente ein wenig. Schreiben Sie zunächst die Textzeile so um, dass sie so ist:
< Text style = {styles.text} > Hello, world! </ Text >Fügen Sie dann den Textstil in Stilen hinzu . Es wird so sein:
const styles = StyleSheet . create ( {
hello : {
flex : 1 ,
justifyContent : 'center' ,
alignItems : 'center' ,
} ,
text : {
fontSize : 30 ,
color : 'blue' ,
} ,
} ) ;Sehen Sie sich das Ergebnis im Simulator an, wenn Sie die Datei speichern! :)
Wir müssen unserem Projekt nach dem Prototyp ein Gesicht geben. Wir werden dies zumindest anfangs so einfach wie möglich tun.
Wie können wir die notwendigen Elemente des Startbildschirms hinzufügen? Einer von ihnen ist eine Suchleiste. Es gibt Bibliotheken mit dieser fertigen Komponente, aber damit wir lernen können, wie es geht, werden wir sie nicht verwenden.
Fügen wir die Textinputkomponente zu unserer zweiten Importlinie hinzu. Siehe die Dokumentation dieser Komponente hier.
import { Text , View , StyleSheet , TextInput } from 'react-native' ;Ändern wir die Code -Passage, die sich um den Bildschirm so umsetzt, wie folgt:
export default class App extends Component {
render ( ) {
return (
< View style = { styles . screen } >
< View style = { styles . search } >
< TextInput style = { styles . input } />
</ View >
< View style = { styles . results } >
< Text > Os resultados aparecerão aqui </ Text >
</ View >
</ View >
) ;
}
}Wir haben eine Ansichtskomponente , die alle Elemente des Bildschirms zusammenfasst und den Bildschirmstil erhält.
Innerhalb dieser Komponente haben wir zwei weitere Ansichtskomponenten : einen oben (weißer Hintergrund), der den Suchstil und einen unten (vorübergehend hellgrau für die Visualisierung) empfängt, die die Ergebnisse erhält.
In der oberen Komponente haben wir die Textview -Komponente. Und innerhalb der Komponente am unteren Bildschirm -Bildschirm haben wir die Textkomponente .
Ändern wir nun die Stile, damit sie so sind:
const styles = StyleSheet . create ( {
screen : {
flex : 1 ,
flexDirection : 'column' ,
} ,
search : {
flex : 1 ,
justifyContent : 'center' ,
alignItems : 'center' ,
} ,
input : {
marginTop : 55 ,
height : 40 ,
width : 250 ,
borderColor : 'lightgray' ,
borderWidth : 1 ,
padding : 10 ,
fontSize : 20 ,
} ,
results : {
flex : 4 ,
backgroundColor : 'lightgray' ,
alignItems : 'center' ,
} ,
} ) ;Nehmen Sie die Änderungen vor und speichern Sie die Datei. Sehen Sie nun die Erläuterung für jeden Artikel an:
Die Ansichtskomponente , die alle anderen Komponenten ( Bildschirmnamenstil ) umfasst, entspricht Flex zu 1. Dies macht alles auf dem Bildschirm, da sie alle anderen umfasst. Es hat FlexDirection entspricht der Spalte , da wir möchten, dass die darin enthaltenen Komponenten vertikal organisieren.
Wir haben die Suchansichtskomponente im Stil von Suchansicht nach oben und die Ergebnisse mit Ergebnissen , die unten bleiben. Sie befinden sich in der View -Komponente mit Bildschirmstil und organisieren vertikal. Sie müssen den gleichen Raum teilen. Wir tun dies mit dem Flex. Das Obermaterial hat Flex 1 und den Boden 4. Dies bedeutet, dass wir 5 proportionale Teile (1+4) haben, die Flex von 1 1/5 und der Flex von 4/5 belegen. Wichtig: Siehe React Native Dokumentation, um mehr über Flexbox zu erfahren :)
Wenn wir uns die Suchstil -Ansichtskomponente ansehen, setzen wir die Textview -Komponente ein, die mit dem Eingabestil angepasst wird. Damit konnten wir seine Höhe (Höhe), Breite (Breite), Abstand vom oberen Rand des Bildschirms (Margintop), der BorderColor -Farbe, der Grenzbreitendicke, der Rückwärts- (Polsterung) und der Feldquelle (Schriftgröße) definieren.
Wenn Sie im Simulator auf TextInput klicken, wird die Tastatur automatisch angezeigt. Sie können etwas eingeben und auf "zurückgeben" klicken (im Fall von iOS). Im Moment wird nichts passieren, weil wir das Verhalten noch implementieren müssen.
Fügen wir eine Variable, die als Status bezeichnet wird, vor der Funktion render () hinzu, die den im TextInput eingegebenen Text empfängt.
state = {
searchText : '' ,
}Wir werden auch Textinput ändern, um einen Platzhalter zu haben und ihn in die staatliche Variable des typisierten Textes zu speichern. Er wird so sein:
< TextInput
placeholder = { 'Procure uma série' }
style = { styles . input }
onChangeText = { ( text ) => this . setState ( { searchText : text } ) }
/>Beachten Sie die OnchangetExt -Methode der Komponente. Es empfängt den Wert des Textes und speichert (this.setState) in SearchText . Wir können dies in Echtzeit überprüfen, um eine kleine Änderung in einer anderen Komponente vorzunehmen.
Wo wir haben:
< Text > Os resultados aparecerão aqui </ Text >Änderung für:
< Text > {this.state.searchText} </ Text >Speichern und testen Sie, um etwas in TextInput einzugeben :)
Wenn Sie unsere Textinput ein wenig ändern, verwenden wir die OnSubMitititing -Methode, um die Suche aufzuführen, wenn der Benutzer die Rückgabetaste (oder gleichwertig auf Android) drückt. Im Moment werden wir noch keine Anfrage an die API stellen, aber wir werden die Dinge weiterleiten lassen!
Unser Textinput wird so sein:
< TextInput
placeholder = { 'Procure uma série' }
style = { styles . input }
onChangeText = { ( text ) => this . setState ( { searchText : text } ) }
onSubmitEditing = { ( ) => this . submitSearch ( ) }
/>Wir müssen die Funktion ubMitsearch () hinzufügen, dies kann direkt unter dem Zustand erfolgen. Es wird so sein:
state = {
searchText : '' ,
}
submitSearch ( ) {
alert ( 'Buscar: ' + this . state . searchText ) ;
}Da wir die Anfrage noch nicht stellen, setze ich eine Warnung ein, damit Sie feststellen, dass der im Textfeld eingegebene Inhalt in der Suche verwendet wird, wie es in der Funktion ubMitsearch () auftritt.
Damit wir unsere App mit Daten beliebten können, verwenden wir das API -TV -Labyrinth, das eine offene REST -API ist (wir müssen keine Authentifizierung haben), kostenlos und gibt die Daten im JSON -Format zurück.
Schauen wir uns ein Suchbeispiel mit dieser API an. Wenn wir eine Suche mit der Wortanatomie durchführen möchten, werden wir den folgenden Endpunkt verwenden:
[GET] http://api.tvmaze.com/search/shows?q=anatomy
Infolgedessen werden wir den JSON unten (nur eine Strecke gezeigt), die alle Einträge enthalten, die eine Anatomie haben oder wie folgt:
[
{
"score" : 20.919525 ,
"show" : {
"id" : 67 ,
"url" : " http://www.tvmaze.com/shows/67/greys-anatomy " ,
"name" : " Grey's Anatomy " ,
"type" : " Scripted " ,
"language" : " English " ,
"genres" : [
" Drama " ,
" Romance " ,
" Medical "
],
"status" : " Running " ,
"runtime" : 60 ,
"premiered" : " 2005-03-27 " ,
"officialSite" : " http://abc.go.com/shows/greys-anatomy/ " ,
"schedule" : {
"time" : " 21:00 " ,
"days" : [
" Thursday "
]
},
"rating" : {
"average" : 8.3
},
"weight" : 99 ,
"network" : {
"id" : 3 ,
"name" : " ABC " ,
"country" : {
"name" : " United States " ,
"code" : " US " ,
"timezone" : " America/New_York "
}
},
"webChannel" : null ,
"externals" : {
"tvrage" : 3741 ,
"thetvdb" : 73762 ,
"imdb" : " tt0413573 "
},
"image" : {
"medium" : " http://static.tvmaze.com/uploads/images/medium_portrait/211/529884.jpg " ,
"original" : " http://static.tvmaze.com/uploads/images/original_untouched/211/529884.jpg "
},
"summary" : " <p>The doctors of Grey Sloan Memorial Hospital deal with life-or-death consequences on a daily basis -- it's in one another that they find comfort, friendship and, at times, more than friendship. Together they're discovering that neither medicine nor relationships can be defined in black and white. Real life only comes in shades of grey.</p> " ,
"updated" : 1576320037 ,
"_links" : {
"self" : {
"href" : " http://api.tvmaze.com/shows/67 "
},
"previousepisode" : {
"href" : " http://api.tvmaze.com/episodes/1749376 "
},
"nextepisode" : {
"href" : " http://api.tvmaze.com/episodes/1760391 "
}
}
}
},
{
"score" : 15.932307 ,
"show" : {
"id" : 34388 ,
"url" : " http://www.tvmaze.com/shows/34388/greys-anatomy-b-team " ,
"name" : " Grey's Anatomy: B-Team " ,
"type" : " Scripted " ,
"language" : " English " ,
"genres" : [
" Drama " ,
" Romance " ,
" Medical "
],
"status" : " Ended " ,
"runtime" : 3 ,
"premiered" : " 2018-01-11 " ,
"officialSite" : " http://abc.go.com/shows/greys-anatomy-b-team " ,
"schedule" : {
"time" : " " ,
"days" : [
" Thursday "
]
},
"rating" : {
"average" : null
},
"weight" : 80 ,
"network" : null ,
"webChannel" : {
"id" : 95 ,
"name" : " ABC.com " ,
"country" : {
"name" : " United States " ,
"code" : " US " ,
"timezone" : " America/New_York "
}
},
"externals" : {
"tvrage" : null ,
"thetvdb" : null ,
"imdb" : null
},
"image" : {
"medium" : " http://static.tvmaze.com/uploads/images/medium_portrait/142/355662.jpg " ,
"original" : " http://static.tvmaze.com/uploads/images/original_untouched/142/355662.jpg "
},
"summary" : " <p>A fresh crop of interns face their first day at Grey Sloan Memorial Hospital. Can these new surgeons survive the pressures of high-stakes medicine, intimidating attendings, and cut throat competition?</p> " ,
"updated" : 1526845476 ,
"_links" : {
"self" : {
"href" : " http://api.tvmaze.com/shows/34388 "
},
"previousepisode" : {
"href" : " http://api.tvmaze.com/episodes/1390266 "
}
}
}
}
]Sie können eine freundlichere Version des Inhalts dieses JSON mit JSON Editor Online anzeigen. Ich habe gespeichert, damit Sie alles anzeigen können! Klicken Sie hier ;)
Im JSON -Editor Online war es leicht zu erkennen, dass es sich um ein Array mit 9 Objekten handelt und jedes Objekt eine Serie ist.
Nach dem Prototyp und dem, was wir bisher implementiert haben:
Lassen Sie uns dies im nächsten Abschnitt mit Axios in die Praxis umsetzen.
Wir müssen die Axios -Bibliothek im Projekt installieren. Wir werden dies tun, indem wir den folgenden Befehl am Terminal eingeben:
$ npm install axiosLassen Sie uns danach einen Serviceordner und eine API.js -Datei darin erstellen. Lassen Sie uns den folgenden Code in die Datei einfügen:
import axios from 'axios' ; // 1
// 2
const api = axios . create ( {
baseURL : 'http://api.tvmaze.com/' ,
} ) ;
export default api ;Lassen Sie uns in App.js die Datei api.js importieren:
import api from './service/api' ;Und ändern wir die UntermitSearch -Funktion () so, dass sie wie folgt sein:
submitSearch = async ( ) => { // 1
if ( this . state . searchText != '' ) { // 2
try { // 3
const response = await api . get ( '/search/shows' , { // 4
params : { q : this . state . searchText } // 5
} ) ;
alert ( JSON . stringify ( response ) ) ;
} catch ( error ) {
alert ( JSON . stringify ( error ) ) ;
}
}
}Warnungen im Try -Block und im Fangblock sind nützlich, um die in der Anfrage erhaltenen Antworten anzuzeigen. In einem anderen Zeitpunkt werden wir diese Antworten auf andere Weise verwenden :)
Weitere Informationen zu asynchronen Funktionen finden Sie hier und über Versprechen hier.
Beginnen wir mit der Implementierung der Flatlist , um die Liste der Suchergebnisse anzuzeigen. Lassen Sie uns unseren Import dafür ändern:
import { Text , View , StyleSheet , TextInput , FlatList } from 'react-native' ;Anschließend werden wir den Status und die Funktion von SubMitSearch () so ändern, dass sie:
state = {
searchText : '' ,
searchResults : null , // 1
}
submitSearch = async ( ) => {
if ( this . state . searchText != '' ) {
try {
const response = await api . get ( '/search/shows' , {
params : { q : this . state . searchText } ,
} ) ;
this . setState ( { searchResults : response . data } ) ; // 2
} catch ( error ) {
alert ( JSON . stringify ( error ) ) ;
}
}
}Wir müssen auch den Render () ändern und die Flatlist darin einfügen:
render ( ) {
return (
< View style = { styles . screen } >
< View style = { styles . search } >
< TextInput
placeholder = { 'Procure uma série' }
style = { styles . input }
onChangeText = { ( text ) => this . setState ( { searchText : text } ) }
onSubmitEditing = { ( ) => this . submitSearch ( ) }
/>
</ View >
< View style = { styles . results } >
< FlatList
data = { this . state . searchResults }
renderItem = { ( { item } ) => < Text > { item . show . name } </ Text > }
keyExtractor = { item => item . show . id }
/>
</ View >
</ View >
) ;
}Beachten Sie, dass wir nur den Namen der Serie mit der Textkomponente machen. Lassen Sie uns jedoch hier unseren Kartentyp gemäß Abschnitt 1.3 erstellen.
In einem Projekt werden wir möglicherweise mehr als eine Komponente erstellen. Um die Organisation zu erleichtern, erstellen wir einen Komponentenordner und alle von uns erstellten Komponenten werden darin gespeichert.
In diesem Ordner erstellen wir eine Datei namens Card.js mit folgenden Inhalten:
import React , { Component } from 'react' ;
import { Text , View , TouchableOpacity , Image , StyleSheet } from 'react-native' ;
export default class Card extends Component {
render ( ) {
return (
< TouchableOpacity style = { styles . container } >
< View style = { styles . cardView } >
< View >
< Image
style = { styles . image }
source = { { uri : this . props . info . image == null ? 'https://i.ibb.co/YfZFr7k/noimg.png' : ( this . props . info . image . original || this . props . info . image . medium ) } }
/>
</ View >
< View style = { { flexDirection : 'column' } } >
< Text style = { styles . name } > { this . props . info . name || 'Sem nome' } </ Text >
< Text style = { styles . genres } > { this . props . info . genres || 'Sem gênero' } </ Text >
</ View >
</ View >
</ TouchableOpacity >
) ;
}
}
const styles = StyleSheet . create ( {
container : {
padding : 10 ,
} ,
cardView : {
alignItems : 'center' ,
flexDirection : 'row' ,
} ,
image : {
width : 80 ,
height : 120 ,
resizeMode : 'contain' ,
} ,
name : {
fontSize : 20 ,
marginLeft : 10 ,
} ,
genres : {
fontSize : 16 ,
marginLeft : 10 ,
} ,
} ) ;Beachten Sie, dass der Name der Komponente eine Karte ist und dass ich ein Bild verwendet habe, um als Platzhalter zu dienen, wenn die Serie keine gültige URL hat.
Importieren wir nun unsere neue Komponente in die Datei App.js :
import Card from './components/card' ;Und in der Flatlist werden wir den aktuellen Inhalt ersetzen durch:
< FlatList
data = { this . state . searchResults }
renderItem = { ( { item } ) => < Card info = { item . show } /> }
keyExtractor = { item => item . show . id }
/>Anstatt die Textkomponente zu verwenden, verwenden wir jetzt die Karte und übergeben sie sie über das Info -Attribut, das das Show -Objekt empfängt.
Sehen Sie sich die Datei card.js an, die wir mehrmals den Ausdruck verwenden. Um den Namen der Serie zu erhalten, verwenden wir beispielsweise dies.Props.info.name .
