Jump Start Reagieren Sie nativ mit der Expo

Nativ reagieren ist eine Plattform, mit der Sie native mobile Apps mit JavaScript erstellen können. Wie der Name impliziert, verwendet es Reagieren , das Komponieren von mobilen Schnittstellen ist also ähnlich der Verwendung von Reaging auf dem Web. Anstatt Komponenten mithilfe von HTML-Tags zu erstellen, verfügt es über einen eigenen Satz von Komponenten, die an native UI-Komponenten binden.

Native reagieren kann schwierig sein, um eingerichtet zu werden, insbesondere wenn es um Push-Benachrichtigungen geht. Sie müssen Zertifikate einrichten und für iOS und Java für Android in Ziel-C tauchen. Jedoch, Messe Beseitigt das Bedürfnis dafür.

Erstellen einer Website anstelle einer App? Sie könnten einen anständigen Webseitenersteller . Und um die Website zu erhalten, holen Sie sich Ihre Web-Hosting Platz auf.

• 30 Webdesign-Tools, um Ihren Workflow zu beschleunigen

EXPO bedeutet, dass Sie reagierten native Apps erstellen und mit nur JS in den App-Speicher bereitstellen. Darüber hinaus bietet es ein SDK mit Zugriff auf native Funktionen wie Benachrichtigungen, Kameras, Kontakte, Ort und so weiter. Es bietet auch Zugriff auf einige UI-Komponenten, die nicht in dem nativen Reait-Kern enthalten sind, jedoch häufig verwendet werden, wie beispielsweise Symbole, unscharfe Ansichten und so weiter, ohne eine Zeile nativem Code zu schreiben.

EXPO kann auch submissionsabhängige App-Builds erstellen, ohne dass Sie mit Xcode oder Android-Studio erstellen müssen. Wenn Sie auch nicht zuvor verwendet haben, können sie ein gruseliger Ort sein, insbesondere wenn Sie nur mit der Reaktionsnamanlage beginnen oder nicht sicher sind So erstellen Sie eine App . Apps (oder Projekte) können auch zur Expo veröffentlicht werden, anstatt in einen App Store einzureichen, mit dem Benutzer das Projekt über den Expo Mobile Client ausprobieren können. Mach dir keine Sorgen, das wird später behandelt!

Bauen Sie Ihre App mit einem Team? Speichern Sie Ihre Dateien in erreichbar, zuverlässig Cloud-Speicherung. .

01. EXPO einrichten

Die Installation von Expo ist ein unkomplizierter Prozess. Kopf zum Seite? ˅ und Laden Sie die neueste XDE herunter und installieren Sie die mobile App auf Ihrem Telefon oder Tablet. Der mobile Client ermöglicht das laufende Apps auf einem echten Gerät über ihre App, ohne dass Entwicklerlizenzen oder ein Zertifikat-Setup im Voraus erforderlich sind.

Sie können dann Apps an den EXPO-Dienst veröffentlichen, sodass Benutzer Ihre fertigen Projekte über den Expo Mobile Client ausführen können, ohne den App Store- und Google Play-Überprüfungsvorgänge durchzuführen.

Die EXPO unterstützt Building-eigenständige Apps, die manuell in den App Store- oder Play-Store veröffentlicht werden können. Sie benötigen jedoch Entwickler-Konten für die von Ihnen losgelassenen Plattformen. Apples Entwicklerprogramm kostet £ 79 pro Jahr und Google's Play Console kostet eine einmalige Gebühr von 25 USD.

02. Erstellen Sie Ihre erste App

Lassen Sie uns ins Geschäft kommen und unsere erste App mit EXPO erstellen. Öffnen Sie die Expo XDE, wählen Sie Projekt & GT; Neues Projekt und wählen Sie die leere Vorlage aus. Installieren Sie alle Abhängigkeiten und starten Sie den ordnungsgemäßen Native Packager, der alle Vermögenswerte bündelt.

Von hier aus können Sie die App veröffentlichen, die App teilen Sie den APP mit dem Expo Mobile Client oder führen Sie die App auf einem Simulator aus. Diese App wird mit der Erstellung von Push-Benachrichtigungen beinhalten, sodass Sie den Expo Mobile Client freigeben, da Simulatoren sie nicht unterstützen. Klicken Sie auf die Schaltfläche Freigabe, um einen QR-Code zu scannen oder die Option zum Senden eines Links über SMS oder E-Mails zu senden. Scannen Sie den QR-Code mit dem EXPO-Client. Dadurch wird die App über den EXPO-Client ausgeführt und eröffnet bis zu einem Bildschirm mit: 'Öffnen Sie app.js, um mit der Arbeit an Ihrer App zu arbeiten! "

Öffnen Sie mit der App-Laufen das Projekt in Ihrem bevorzugten Code-Editor und öffnen Sie app.js. Finden Sie den obigen Text und ändern Sie es in die klassische 'Hallo World!', Dann speichern Sie es. Sie sollten die App automatisch neu laden und den Text "Hallo World" haben, jetzt sichtbar. Magie!

Während Sie sich entwickeln, zeigt das Gerät das Gerät ein Entwickler-Menü auf, das hilfreiche Optionen zum Debuggen hat. In diesem Menü können Sie auch in die EXPO-Startseite zurückkehren - hilfreich, um die App auszurufen oder in einen anderen wechseln.

03. Benachrichtigungen hinzufügen.

Jetzt haben Sie eine grundlegende App-Einrichtung und Laufen, lassen Sie uns die Möglichkeit hinzufügen, Benachrichtigungen zu senden und zu empfangen. Dies würde normalerweise objektiv-c und java erfordern, in der Integration eines Drittanbietersdienstes, um die Benachrichtigungen zu senden, und Sie müssen auch Zertifikate für iOS einrichten und Schlüssel für Android erstellen.

Erstens müssen Sie Berechtigungen und Benachrichtigungen von Expo importieren und eine neue Funktion in der App-Klasse erstellen:

 Import {Berechtigungen, Benachrichtigungen} von 'EXPO';
Die Standardklasse-App exportieren Erweiterungen exportieren React.component {
  Async-RegisterForpushnotifications () {
  }
} 

Hier verwenden Sie das Async-Schlüsselwort, um die ES2017 Async / Wait-Feature zu nutzen - Native React HAT BABEL arbeitet unter der Haube, sodass Sie alle neuen JavaScript-Güte nutzen können. Bitten Sie nun nach Benachrichtigungsberechtigungen und rufen Sie das Expo-Push-Token ab, um das Gerät zu identifizieren - damit die Expo weiß, wo Druckbenachrichtigungen gesendet werden sollen:

 Async-RegisterForpushnotifications () {
  b c conser result = warten von Berechtigungen.Askasync (Berechtigungen.Remote_notifications);
  if (result.status! == 'gewährt') {
    Rückkehr;
  }
  const Token = erwarten Sie Benachrichtigungen.Getexpopushokenasync ();
  console.log (token);
} 

Hier fragen Sie nach der Benachrichtigungserlaubnis mit der Berechtigungsversion.Askasync () -Methode. Die Warnung wird nur auf iOS angezeigt, wenn Android standardmäßig Benachrichtigungen ergibt. Trotzdem müssen Sie immer noch dieselbe Logik auf Android durchführen, da es möglich ist, Benachrichtigungen auszuschalten.

Überprüfen Sie als nächstes die Antwort. Wenn die Benachrichtigungen nicht erteilt werden, können Sie aufhören und aus der Funktion zurücksenden. Wenn Benachrichtigungen erteilt werden, erhalten Sie das Push-Token vom EXPO-Service. Schließlich können Sie das Token herausfinden, um die Benachrichtigungen zu testen, und dies wird an der Expo XDE protokolliert.

Es lohnt sich, an diesem Punkt zu bemerken, dass - auf iOS - dieser Alarm nur einmal durch Design ausgelöst werden kann; Wenn also ein Benutzer die Erlaubnis bestreitet, möchten Sie vielleicht in Betracht ziehen, eine benutzerdefinierte Hinweise oder Benachrichtigung hinzuzufügen, bevor Sie aus der Funktion herausgeben. Um zu diesem Zeitpunkt Benachrichtigungen zu aktivieren, muss der Benutzer zu den App-Einstellungen gehen (in unserem Fall wird dies expo) & gt; Benachrichtigungen und ermöglichen sie von dort. Daher müssen Sie den Expo Mobile Client löschen und erneut installieren, wenn Sie die Erlaubniswarnung auf iOS mehr als einmal testen möchten.

Zusätzlich bietet Expo eine Methode namens Berechtigungen.Getasync () und dies funktioniert auf ähnliche Weise wie die Berechtigungen.Askasync (), nur ohne den IOS-Alarm abzufeuern. Dies kann nützlich sein, wenn Sie den Status zuerst überprüfen möchten, um einen benutzerdefinierten Fluss zu erstellen, der Sie beispielsweise nach Berechtigungen bitten. Wenn der iOS-Alarm zuvor ausgelöst wurde (Denken Sie daran, kann es nur einmal pro App installiert werden), die Berechtigungen.Askasync () werden dieselben Informationen wie Berechtigungen zurückgeben.Getasync (), also benötigen wir nicht Berechtigungen verwenden.GETASYNC ().

Sie müssen diese Funktion dann in der KomponenteDIDMount-Lebenszyklus-Methode anrufen, sodass er auf App-Start ausgeführt wird:

 componentdidmount () {
  dies.RegistrierenPushnotifications ();
} 

Wenn Sie als Nächstes die Benachrichtigungsberechtigung akzeptieren, kann Ihre App lokale und remote-Benachrichtigungen empfangen. Lokale Benachrichtigungen werden dann eingerichtet und über das Gerät direkt an die App gesendet und benötigen keine Internetverbindung. Remote-Benachrichtigungen stammen von einem Server und senden die Benachrichtigung über das Apple Push Notification System (APNs) oder Google Cloud Messaging (GCM) -Dienstleistungen. Dieser Prozess erfordert auch Zugriff auf eine Internetverbindung, um sie zu empfangen.

Expo verfügt über einen Dienst, um Benachrichtigungen unter https://exp.host/-/api/v2/push/end zu senden; Alles, was Sie tun müssen, ist, einige Daten zu senden. Dies wird dann ein wenig wie folgt aussehen:

 {{
  // das Push-Token.
  "Bis": & lt; Token von der App & gt;
  // der Benachrichtigungs-Titel.
  "Titel": "Benachrichtigungs-Titel",
  // der Benachrichtigungskörper.
  "Körper": "Benachrichtigungskörper",
  // Daten in Daten als Objekt weitergeben, kann dies beim Umgang mit der Benachrichtigung verwendet werden.
  "Daten": {"Wert": "Hallo Welt!" }
} 

Bevor wir eine Benachrichtigung testen, konfigurieren wir unsere App, um Benachrichtigungen zu handhaben, wenn die App geöffnet ist. Mit Design, iOS und Android zeigen keine Benachrichtigung, wenn eine App geöffnet ist. Sie können auch alle in der Push-Nachricht gesendeten Daten mithalten, falls wir darauf handeln müssen. Lassen Sie uns eine neue Funktion erstellen, um dies zu handhaben, und die Benachrichtigung der Datenwert-Eigenschaft:

 Handlenotifizierung (Benachrichtigung) {
  Alarm (Benachrichtigung.Data.Value);
} 

In unserer KomponenteDIDMount-Lebenszyklusmethode müssen Sie dann einen Zuhörer einrichten, der den gerade erstellten Benachrichtigungshandler anruft:

 componentdidmount () {
  dies.RegistrierenPushnotifications ();
  Benachrichtigungen.addlistener (diese.handlenotifizierung);
} 

Du bist jetzt eingestellt. Senden wir eine Push-Benachrichtigung mit einer Curl-Anforderung:

 Curl \
  -X Post \
  -H "Content-Type: Application / JSON" \
  -d '{{
    "Zu": "& lt; token & gt;",
    "Titel": "Benachrichtigungs-Titel",
    "Körper": "Benachrichtigungskörper",
    "Daten": {"Wert": "Hallo Welt!" }
  } '\
  https://exp.host/-/api/v2/push/send

Sie können diesen Curl-Befehl ergreifen Hier . Wenn Sie mit Curl nicht vertraut sind, können Sie die Anforderung mit etwas ansenden Postbote , die eine GUI zum Senden von Anfragen verwendet.

Sobald die Anfrage gesendet hat, sollten Sie nun die Benachrichtigung durchführen. Verwenden Sie den Expo-Push-Service keine Einschränkungen. In einem echten Szenario ist es aufgefordert, die Batch-API zu verwenden, indem er ein Array von Push-Benachrichtigungen, in Chargen von 100 sendet, aus Effizienz gesendet wird:

 [
  {// Benachrichtigungsobjekt wie oben},
  {// ein anderes Benachrichtigungsobjekt}
] 

04. Veröffentlichen Sie mit EXPO

Also, jetzt, da wir eine glänzende neue reagierende native App haben (auch wenn es noch nicht viel ist!), Wie können wir andere verwenden, ohne sie von Expo XDE zu leiten? Der einfachste Weg ist, indem Sie auf die Veröffentlichung von der XDE klicken. Dadurch wird das Projekt auf Expo veröffentlichen, und in Ihrem Profil erscheint ein Link, das Sie unter https://expo.io/@<username> finden können.

Wenn Sie den veröffentlichten Projektlink besuchen, wird ein QR-Code zum Scannen (in denselben Optionen wie XDE) mit dem Expo Mobile Client, genau wie während der Entwicklung, scannen. Wenn wir die App aktualisieren möchten, müssen wir alle veröffentlichen, und die Änderungen stehen dem Benutzer zur Verfügung, wenn Sie die App erneut ausführen.

Dieser Artikel wurde ursprünglich in Ausgabe 297 von Net, dem weltweit besten Verkaufsmagazin für Webdesigner und Entwickler, veröffentlicht. Abonnieren Sie hier das Netz .

Möchten Sie mehr erfahren, wie Sie den Master reagieren können?

Wenn Sie daran interessiert sind, mehr darüber zu reagieren, stellen Sie sicher, dass Sie Ihr Ticket abgeholt haben Generieren Sie London von 19. bis 21. September 2018 . Nachdem Sie die React Academy gegründet haben, um die Welt auf der ganzen Welt zu unterrichten und auf den Markt zu bringen Sizzy.co. und okgoogle.io. Kristijan Ristovski wird seinen Workshop liefern - erfahren Sie, wie Sie in React denken können

Generieren von London findet vom 19. bis 21. September 2018 statt. Holen Sie sich jetzt Ihr Ticket .

Zum Thema passende Artikel:

• Bring deinen Kopf mit diesen fünf Faktoren um reagieren
• 10 Experte Reactjs Tipps, die Sie heute kennen müssen
• Erstellen Sie eine native mobile App mit Native React Native