Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React Native

Einfachere Reaktion auf native Entwicklung mit Expo

by
Read Time:15 minsLanguages:

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

Expo ist eine Sammlung von Tools, die das Codieren von React Native-Apps erleichtern. In diesem Tutorial zeige ich Ihnen, wie Sie mit Expo schnell React Native-Apps erstellen können.

Mit Expo können Entwickler React Native-Apps erstellen, ohne die Frustrationen, die mit der Installation und Konfiguration von Softwareabhängigkeiten wie Android Studio, Xcode oder allen anderen Tools verbunden sind, die zum Entwickeln und Ausführen einer React Native-App erforderlich sind.

In diesem Tutorial werde ich Ihnen zeigen, wie Sie mit Expo ein einfaches Memory-Spiel erstellen. Unterwegs lernen Sie auch Folgendes:

  • Verwendung der von Expo bereitgestellten Tools. Dies umfasst die CLI, das SDK und die Expo-Client-App.
  • So erstellen Sie eine React Native-App mit Expo.

Was ist Expo?

Die Expo ist ein Framework für die schnelle Entwicklung von React Native-Apps. Es ist wie Laravel oder Symphony für PHP-Entwickler oder Ruby on Rails für Ruby-Entwickler. Expo bietet eine Ebene über den React Native-APIs, um deren Verwendung und Verwaltung zu vereinfachen. Es bietet auch Tools, die das Booten und Testen von React Native-Apps erleichtern. Schließlich werden UI-Komponenten und -Dienste bereitgestellt, die normalerweise nur verfügbar sind, wenn Sie eine React Native-Komponente eines Drittanbieters installieren. All dies wird über das Expo SDK zur Verfügung gestellt.

Einschränkungen der Expo

Bevor Sie fortfahren, ist es wichtig, einige der Einschränkungen der Expo zu kennen:

  1. Expo-Apps unterstützen die Ausführung von Hintergrundcode nicht. Dies bedeutet, dass Sie beispielsweise keinen Code ausführen können, der beim Schließen der App auf Standortänderungen wartet.
  2. Expos-Apps sind auf die nativen APIs beschränkt, die vom Expo SDK unterstützt werden. Dies bedeutet, dass wenn Ihre App einen ganz bestimmten Anwendungsfall hat, z. B. die Kommunikation mit einem Bluetooth-Peripheriegerät, die einzige Möglichkeit, diese Funktionalität zu implementieren, die Verwendung von React Native oder das Schreiben von nativem Code mithilfe einer Bibliothek namens ExpoKit ist.
  3. Expo sperrt Sie in ihr Toolset. Dies bedeutet, dass Sie die meisten der für die React Native-Entwicklung verfügbaren großartigen Tools wie Befehlszeilentools, Gerüste und UI-Frameworks nicht einfach installieren und verwenden können. Das Gute ist jedoch, dass das Expo SDK mit einfachen React Native-Apps kompatibel ist, sodass Sie keine Probleme haben, wenn Sie Ihre App von der Expo auswerfen.
  4. Standalone-Binärdateien von Expo-Apps können nur online erstellt werden. Expo bietet ein Befehlszeilentool namens Exp. Auf diese Weise können Entwickler den Erstellungsprozess auf Expo-Servern starten. Sobald dies erledigt ist, wird eine URL zum Herunterladen der .apk- oder .ipa-Datei bereitgestellt.

Trotz dieser Einschränkungen ist es wichtig zu beachten, dass Expo ein voll funktionsfähiges Framework ist, das häufig verwendete Android- oder iOS-APIs unterstützt. Dies bedeutet, dass Sie die meisten Funktionen kennen, die Apps normalerweise benötigen. Daher müssen Sie häufig nicht außerhalb von Expo suchen, um die native Funktionalität zu implementieren.

App-Übersicht

Die App, die wir erstellen werden, ist ein Memory-Spiel. Möglicherweise kennen Sie diese Art von Spiel - der Benutzer muss passende Paare finden, indem er zwei Karten gleichzeitig umdreht. So sieht der Standardbildschirm aus:

Memory game default app screenMemory game default app screenMemory game default app screen

Und so sieht es aus, wenn alle Paare geöffnet wurden:

Game completedGame completedGame completed

Sobald das Spiel gelöst ist, kann der Benutzer auf die Schaltfläche zum Zurücksetzen tippen, um die Elemente auf ihren Ausgangszustand zurückzusetzen. Dadurch können sie das Spiel von vorne beginnen.

Expo installieren

Anders als bei React Native, wo Sie Android Studio oder Xcode und andere Abhängigkeiten installieren und konfigurieren müssen, müssen Sie bei Expo nur wenige Schritte ausführen, um mit der Entwicklung von Apps zu beginnen:

  1. Downloaden Sie Node.js herunter und installieren Sie es. Die Expo hängt von der Node.js-Plattform für ihre Befehlszeilentools und das Abhängigkeitsmanagement ab.
  2. Installieren Sie den Expo Client auf Ihrem iOS- oder Android-Gerät. Dies wird verwendet, um eine Vorschau der App anzuzeigen, während Sie sie entwickeln.
  3. Installieren Sie das Befehlszeilentool. Auf diese Weise können Sie ein neues Expo-Projekt erstellen, einen Erstellungsprozess initiieren und vieles mehr. Führen Sie den folgenden Befehl aus, um es zu installieren:

Generieren einer neuen Expo-App

Nachdem Sie alle Abhängigkeiten installiert haben, können Sie jetzt eine neue Expo-App erstellen:

Sobald dies erledigt ist, wird ein neuer Ordner namens MemoryGame erstellt. Navigieren Sie darin und starten Sie den Entwicklungsserver:

Alternativ können Sie auch die Expo XDE verwenden. Auf diese Weise können Sie Expo-Apps über eine grafische Benutzeroberfläche erstellen und ausführen. Sie können das Installationsprogramm vom Expo GitHub-Repo herunterladen. Derzeit werden nur Windows und Mac unterstützt. Wenn Sie also unter Ubuntu oder Linux arbeiten, ist es besser, vorerst bei der Befehlszeile zu bleiben.

Sobald der Entwicklungsserver ausgeführt wird, sollten Sie nun Folgendes sehen können:

Running the dev serverRunning the dev serverRunning the dev server

Das ist der QR-Code, der auf die Live-Vorschau des Projekts verweist. Öffnen Sie die Expo-Client-App auf Ihrem Telefon und scannen Sie den Code mit dem QR-Scanner. Zu diesem Zeitpunkt sollten Sie nun in der Lage sein, den Standardbildschirm anzuzeigen. Jedes Mal, wenn Sie Control-S in einer der Projektdateien drücken, sollte die Vorschau automatisch neu geladen werden, um die Änderungen widerzuspiegeln.

Den vollständigen Quellcode des Projekts finden Sie auf seinem GitHub-Repo. Wenn Sie die App ausprobieren möchten, können Sie sich die Demo ansehen. Wählen Sie einfach den QR-Code aus und scannen Sie ihn mit der Expo-Client-App auf Ihrem Telefon.

Codierung der App

Jetzt können wir die App codieren. Beginnen wir mit einigen UI-Komponenten, bevor wir zurückgehen und die Hauptkomponente implementieren.

Header-Komponente

In der Kopfzeile wird der Titel der App angezeigt. Erstellen Sie einen Komponentenordner. Erstellen Sie darin eine Header.js-Datei und fügen Sie Folgendes hinzu:

Dies ist nur eine grundlegende React Native-Komponente mit einem Stil, der der Benutzeroberfläche unserer App entspricht.

Score-Komponente

Als nächstes folgt die Komponente zum Anzeigen der Partitur (components/Score.js):

Wieder nur eine einfache Anzeigekomponente mit einer Textansicht und einigen grundlegenden Stilen.

Kartenkomponente

Die Kartenkomponente (components/Card.js) zeigt die Karten an. Diese Karten verwenden Symbole aus dem Expo-Vektorsymbolsatz. Dies ist eine der Funktionen, die bei der Verwendung von Expo sofort verfügbar sind: Sie enthält Symbole aus Symbolsätzen wie FontAwesome, Entypo und Ionicons.

Im folgenden Code sehen Sie, dass wir nur FontAwesome verwenden. Es hat das Symbol, das wir für die Anzeige des Standardstatus der Karte wünschen: ein Fragezeichen. Wie Sie später in der Haupt-App-Komponente sehen werden, verwenden wir auch Symbole von Entypo und Ionicons. Der Verweis auf diese Symbolquellen wird an diese Komponente übergeben, sodass Sie sie hier nicht angeben müssen:

Innerhalb der render() -Methode verwenden wir die Quelle und das Symbol nur dann als Requisiten, wenn die Karte geöffnet ist. Standardmäßig wird nur das Fragezeichen von FontAwesome angezeigt. Wenn die Karte jedoch geöffnet ist, werden die Symbolquelle, das Symbol und die Farbe verwendet, die als Requisiten übergeben wurden.

Jede der Karten kann getippt werden. Beim Tippen wird die Funktion clickCard() ausgeführt, die auch über die Requisiten übergeben wird. Später werden Sie sehen, was die Funktion tut, aber jetzt wissen Sie nur, dass sie den Status aktualisiert, um das Symbol auf der Karte anzuzeigen:

Vergessen Sie nicht, die Stile hinzuzufügen:

Helfer

Wir werden auch eine Hilfsfunktion namens shuffle() verwenden. Auf diese Weise können wir die Kartenreihenfolge in zufälliger Reihenfolge sortieren, sodass ihre Reihenfolge bei jedem Zurücksetzen des Spiels unterschiedlich ist:

Hauptbestandteil

Die Hauptkomponente (App.js) enthält die Haupt-App-Logik und bringt alles zusammen. Fügen Sie zunächst die React- und Expo-Pakete hinzu, die wir verwenden werden. Dieses Mal verwenden wir alle Symbolquellen aus Expo-Vektorsymbolen:

Fügen Sie als Nächstes die Komponenten und den Helfer hinzu, die wir zuvor erstellt haben:

Innerhalb des Konstruktors erstellen wir zuerst das Array, das die eindeutigen Karten darstellt. src ist die Symbolquelle, name ist der Name des Symbols (Sie können die Namen auf GitHub finden, wenn Sie andere Symbole verwenden möchten) und color ist natürlich die Farbe des Symbols:

Beachten Sie, dass wir anstelle der direkten Angabe des src als FontAwesome, Entypo oder Ionicons für jedes der Objekte die im sources objekt verwendeten Eigenschaftsnamen verwenden. Dies liegt daran, dass wir eine Kopie des Kartenarrays erstellen müssen, damit jede Karte ein Paar hat. Wenn Sie eine Kopie mit Array-Methoden wie slice() erstellen, wird eine Kopie des Arrays erstellt. Das Problem besteht jedoch darin, dass beide Arrays ebenfalls geändert werden, sobald die einzelnen Objekte entweder in der Kopie oder im Original geändert wurden.

Dies bringt uns zu der folgenden Lösung, bei der ein völlig neues Objekt erstellt wird, indem das cards array in eine Zeichenfolge konvertiert und anschließend analysiert wird, um es wieder in ein Array zu konvertieren. Dies ist der Grund, warum wir Strings verwenden, da Funktionen nicht in Strings konvertiert werden können. Wir kombinieren dann die beiden, um das Array zu erstellen, das alle Karten enthält, die wir benötigen:

Gehen Sie als Nächstes dieses Array durch und generieren Sie für jedes Array eine eindeutige ID, legen Sie die Symbolquelle fest und setzen Sie sie dann standardmäßig in einen geschlossenen Zustand:

Sortieren Sie die Karten nach dem Zufallsprinzip und legen Sie den Standardstatus fest:

Die render() -Methode rendert den Header, die Karten, die Punktzahl und die Schaltfläche zum Zurücksetzen des aktuellen Spiels. Es verwendet die Funktion renderRows(), um die einzelnen Kartenzeilen zu rendern. Der Bildschirm hat sechs Zeilen mit jeweils vier Karten:

Hier ist der Code für die Funktion renderRows(). Hierbei wird die Funktion getRowContents() verwendet, die für die Erstellung eines Arrays von Arrays mit jeweils vier Elementen verantwortlich ist. Auf diese Weise können wir jede Zeile rendern und dann für jede Iteration der map() - Funktion eine andere Funktion zum Rendern von Karten verwenden:

Hier ist die Funktion getRowContents():

Als nächstes folgt die Funktion renderCards(). Dies akzeptiert das Array von Kartenobjekten und rendert sie über die Card komponente. Hier müssen wir lediglich die einzelnen Eigenschaften jedes Kartenobjekts als Requisiten übergeben. Dies wird dann verwendet, um das richtige Symbol zu rendern, wie Sie im Code für die Card komponente gesehen haben. Die Funktion clickCard() wird auch als Requisite übergeben. Die Karten-ID wird an diese Funktion übergeben, damit die eindeutige Karte identifiziert und aktualisiert werden kann:

In der Funktion clickCard() erhalten wir die Details der ausgewählten Karte und prüfen, ob sie weiter verarbeitet werden soll:

Geben Sie nun den Code für die Handhabung einer ausgewählten Karte ein.

Zuerst öffnen wir die Karte und fügen sie dem Array der aktuell ausgewählten Karten hinzu:

Sobald sich zwei Elemente im Array der aktuell ausgewählten Karten befinden, prüfen wir, ob die Symbolnamen identisch sind. Wenn dies der Fall ist, bedeutet dies, dass der Benutzer das richtige Paar ausgewählt hat. Wenn sie nicht gleich sind, ist es ein falsches Paar. In diesem Fall schließen wir die erste ausgewählte Karte und fügen dann eine Verzögerung hinzu, bevor wir die zweite Karte schließen. (Auf diese Weise kann der Benutzer das Kartensymbol sehen, bevor es in den geschlossenen Zustand zurückkehrt.)

Das Letzte, was wir im Click-Event-Handler tun müssen, ist, den Status zu aktualisieren, um die Änderungen in der Benutzeroberfläche widerzuspiegeln:

Eine verwandte Funktion ist der Reset Event Handler. Wenn Sie auf die Schaltfläche zum Zurücksetzen tippen, stellen wir einfach den Standardstatus wieder her, indem wir alle Karten schließen und mischen.

Schließlich werden wir einige grundlegende Stile hinzufügen, damit unsere App gut aussieht.

Testen Sie die App

Da Ihr Expo-Entwicklungsserver die ganze Zeit ausgeführt wurde, sollte jede Änderung beim Live-Neuladen auf Ihr Mobilgerät übertragen werden. Probieren Sie die App aus und stellen Sie sicher, dass sie ordnungsgemäß funktioniert.

Abschluss

Das ist es! In diesem Tutorial haben Sie gelernt, wie Sie mit der Expo XDE schnell eine React Native-App verkabeln können. Die Expo ist ein guter Weg, um mit der Entwicklung von React Native-Apps zu beginnen, da nicht mehr viel Software installiert werden muss, was insbesondere für Anfänger häufig frustrierend ist. Es bietet auch Tools, die es wirklich einfach machen, eine Vorschau der App während der Entwicklung anzuzeigen. Schauen Sie sich unbedingt die auf der Expo-Website genannten Ressourcen an, wenn Sie mehr erfahren möchten.

In der Zwischenzeit können Sie sich auch einige unserer anderen Beiträge zur Entwicklung von React Native-Apps ansehen!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.