Erste Schritte mit einer reaktiven App-Vorlage

Das Entwerfen einer reaktiven Native-App ist oftmals ein umständlicher Prozess - insbesondere der Designteil, da sowohl Android- als auch iOS-Geräte geplant werden müssen. Nicht nur das, Sie müssen auch sicherstellen, dass Ihre App auf verschiedenen Bildschirmgrößen gut aussieht. 

Hier können Vorlagen hilfreich sein. Sie behandeln das ursprüngliche Design für Sie, sodass Ihre App mit minimalem Designaufwand von Ihrer Seite schön aussieht. Bei CodeCanyon, einem Marktplatz für Vorlagen und Plugins, gibt es eine Handvoll solcher Vorlagen. Dort finden Sie verschiedene Arten von Vorlagen, die auf den jeweiligen App-Typ abgestimmt sind, den Sie erstellen möchten.

In diesem Tutorial erfahren Sie, wie Sie die BeoStore-Vorlage verwenden. Wie der Name vermuten lässt, ist BeoStore eine E-Commerce-App-Vorlage für React Native. 

Vorlage vom Marktplatz abrufen

Sie können die Vorlage herunterladen, indem Sie auf der BeoStore-Produktseite bei CodeCanyon nachschauen. Es ist eine kostenpflichtige Vorlage, aber die Investition lohnt sich, da sie über die meisten Funktionen verfügt, die in einer E-Commerce-App benötigt werden. Alles, was Sie tun müssen, ist die Vorlage zu konfigurieren und an Ihre Wünsche anzupassen. Um sich ein Bild von dem zu machen, was es aus der Box heraus bietet, sind hier einige Highlights:

• Vollständige Integration mit WooCommerce: Wenn Sie eine WooCommerce-Website betreiben, kann die App die gleichen Produkte anzeigen, die Sie auf Ihrer vorhandenen Website haben.
• Unterstützung für iOS und Android: Die App läuft und sieht sowohl auf Android- als auch auf iOS-Plattformen gut aus.
• Soziale Logins: Kunden können sich über ihr Facebook- oder Google-Konto anmelden.
• Einfache Anpassung: alles ist in komponenten zerlegt. Dadurch wird sichergestellt, dass Sie die Vorlage einfach an Ihre Marke anpassen können.
• Mitteilungen: Dadurch werden Ihre Kunden automatisch benachrichtigt, wenn der Status ihrer Bestellung aktualisiert wird. Sie können auch Push-Benachrichtigungen für Produktwerbung versenden. Push-Benachrichtigungen werden mit Firebase implementiert.  
• Mehrsprachige Unterstützung: aus der box erhalten sie englisch als hauptsprache. Vietnamesisch gibt es als zweite Option, Sie können jedoch auch Ihre eigene Sprache hinzufügen.
• Sichere Zahlungsintegration: Zahlungen erfolgen mit PayPal.

Wenn Sie noch kein Envato-Konto haben, können Sie sich hier anmelden. Melden Sie sich danach bei Ihrem neu erstellten Konto an. Dann können Sie zur BeoStore-Seite zurückkehren und auf die Schaltfläche klicken Kaufe jetzt Taste. 

Einrichten des Projekts

Nachdem Sie die Vorlage gekauft haben, erhalten Sie einen Download-Link zur Archivdatei der Vorlage. Extrahieren Sie das und Sie erhalten eine CodeCanyon Ordner, der enthält MStore 2.2.

MStore 2.2 ist das Verzeichnis für das Vorlagenprojekt. Öffnen Sie ein neues Terminalfenster in diesem Verzeichnis und führen Sie den folgenden Befehl aus:

npm installieren

Dadurch werden alle Projektabhängigkeiten installiert. Dies kann je nach Downloadgeschwindigkeit eine Weile dauern, da viele Abhängigkeiten heruntergeladen werden müssen. Schaut mal rein package.json Wenn Sie die Pakete sehen möchten, muss es heruntergeladen werden.

Sobald dies erledigt ist, gibt es einen zusätzlichen Schritt, wenn Sie für iOS-Geräte erstellen möchten. Gehe zum iOS Ordner und führen Sie Folgendes aus:

pod installieren

Verbinden Sie als nächstes Ihr mobiles Gerät für Android mit Ihrem Computer und führen Sie Folgendes aus:

ADB-Geräte

Dies listet alle an Ihren Computer angeschlossenen Android-Geräte auf. Wenn Sie das Gerät zum ersten Mal anschließen, sollten Sie gefragt werden, ob Sie den Computer für das USB-Debugging zulassen möchten. Tippen Sie einfach auf Ja Sobald Sie diese Aufforderung erhalten.

Jetzt können Sie die App auf Ihrem Android-Gerät ausführen:

reag-native run-android

Für iOS:

reaktives Run-Ios

Wenn keine Fehler aufgetreten sind, sollten Sie mit der folgenden Seite begrüßt werden:

Um Ihnen einen Eindruck von den verschiedenen Seiten zu geben, die in der Vorlage verfügbar sind, finden Sie hier einige weitere Screenshots:

Fehlerbehebung beim Projekt-Setup

In diesem Abschnitt habe ich eine Liste mit häufig auftretenden Fehlern bei der Projekteinrichtung und deren Lösungen zusammengestellt. 

Der Entwicklungsserver wurde nicht gestartet

Wenn der Entwicklungsserver bei der Ausführung nicht automatisch gestartet wurde reag-native run-android oder reaktives Run-Ios, Sie können es manuell ausführen, indem Sie Folgendes ausführen:

reaktiver Start

Es dauerte zu lange zum Laden

Wenn Sie eine Fehlermeldung erhalten, die der folgenden ähnelt:

Fehler beim Erstellen von DependencyGraph: Fehler: Watcher hat zu lange zum Laden benötigt Versuchen Sie, 'Watchman-Version' von Ihrem Terminal https://facebook.github.io/watchman/docs/trfrage.html unter [Objektobjekt] ._ onTimeout (index.js: 103: 16) bei Timer.listOnTimeout (timers.js: 89: 15)

Dies liegt daran, dass eine vorhandene Watchman-Instanz ausgeführt wird. Dies ist eine Komponente des React Native-Entwicklungsservers. Sie können diesen Fehler beheben und Watchman herunterfahren, indem Sie die folgenden Befehle ausführen:

sudo sysctl fs.inotify.max_user_instances = 99999 sudo sysctl fs.inotify.max_user_watches = 99999 sudo sysctl fs.inotify.max_queued_events = 99999 Watchman-Herunterfahren-Server

ADB-Reverse konnte nicht ausgeführt werden

Wenn Sie die folgende Fehlermeldung erhalten:

Fehler: geschlossen Adb Reverse konnte nicht ausgeführt werden: Befehl fehlgeschlagen: / Pfad / nach / Android-SDK-Linux / SDK / Plattform-Tools / ADB-S 300494a80ea22200 Reverse TCP: 8081 TCP: 8081

Dies bedeutet, dass Ihr Android-Gerät mit einer Version unter 5.0 (Lollipop) ausgeführt wird. Das ist eigentlich kein Fehler. Es bedeutet einfach, dass Ihr Android-Gerät nicht unterstützt adb umgekehrt, , über den der Entwicklungsserver über USB-Debugging mit Ihrem Gerät verbunden wird. Wenn dies nicht möglich ist, greift React Native auf das Debugging mithilfe von Wi-Fi zurück. Weitere Informationen dazu finden Sie hier: Auf Gerät laufen.

Etwas anderes könnte dazu führen, dass Ihr Build fehlschlägt. Sie können im Terminal nach oben scrollen, um zu sehen, ob zuvor Fehler aufgetreten sind.

Kann Variable nicht finden _fbBatchedBridge

Wenn Sie die folgende Fehlermeldung erhalten und der Entwicklungsserver im Wi-Fi-Modus ausgeführt wird, bedeutet dies, dass Sie die IP Ihres Computers nicht auf Ihrem Android-Gerät eingerichtet haben. (Dies kommt normalerweise nur bei Android-Geräten unter Version 5.0.)

ReferenceError: Variable kann nicht gefunden werden: _fbBatchedBridge (Zeile 1 im generierten Bundle)

Sie können Folgendes ausführen, um die React Native-Entwickleroptionen auf Ihrem Gerät anzuzeigen:

adb-shell-eingabe keyevent 82

Wählen Dev-Einstellungen aus dem Menü, das angezeigt wird. Unter dem Debugging Abschnitt, tippen Sie auf Debug-Server-Host und -Port für Gerät. Geben Sie die von Ihrem Heimrouter zugewiesene interne IP-Adresse und den Port ein, an dem der Entwicklungsserver ausgeführt wird, und drücken Sie OK

YOUR_INTERNAL_IP: 8081

Gehen Sie zurück zum Startbildschirm der App und führen Sie sie aus adb-shell-eingabe keyevent 82 nochmal. Diesmal auswählen Neu laden um die App neu zu laden.

Firebase, App Compat oder GMS Play Services konnten nicht gefunden werden

Wenn Sie erhalten, dass Fehler nicht gefunden werden, bedeutet dies, dass Sie das entsprechende Paket nicht mit dem Android SDK Manager installiert haben.

Hier sind die Pakete, die installiert werden müssen:

• Android-Support-Repository
• Android-Support-Bibliothek
• Google Play-Dienste
• Google Repository

Stellen Sie sicher, dass Sie auch vorhandene Pakete aktualisieren, wenn ein Update verfügbar ist.

Andere Probleme

Wenn Ihr Problem keines der oben genannten Probleme betrifft, können Sie Folgendes versuchen:

• Lesen Sie die Dokumentation zur Fehlerbehebung.
• Überprüfen Sie die Produktkommentare der Vorlage. Sie können nach dem Fehler suchen, den Sie erhalten. Versuchen Sie, die Fehlermeldung zu verallgemeinern und zu verkürzen. Suchen Sie nicht einfach nach der gesamten Fehlermeldung. Wenn Sie den Fehler nicht finden können, können Sie im Kommentarthread eine eigene Frage stellen. Das Support-Team antwortet normalerweise umgehend.
• Suchen Sie nach dem Fehler bei Google. Auch wenn die gefundenen Ergebnisse nicht die Verwendung der Vorlage betreffen, erhalten Sie eine Vorstellung davon, wie Sie das Problem lösen können.
• Suchen Sie in StackOverflow oder stellen Sie eine neue Frage. Stellen Sie sicher, dass Sie alle erforderlichen Details angeben (z. B. Fehlermeldung, Schritte, die Sie ausgeführt haben). Es gibt einen guten Artikel, wie man Fragen zu StackOverflow stellt.

Anpassen der Vorlage

Ein guter Ort, um zu lernen, wie man Dinge in der Vorlage macht, ist die Dokumentation:

• Projektlayout: Zeigt an, wo sich die verschiedenen Dateien in der Vorlage befinden und wozu sie verwendet werden.
• Migrieren von WooCommerce: Zeigt, wie Sie Ihre vorhandene WooCommerce-Website mit der App verbinden können. Wenn Sie die App an Ihren WooCommerce anschließen, können Sie alle Produktkategorien und Produkte in Ihrem WooCommerce-Store abrufen. 
• Migrieren von Services: Zeigt an, wie Sie den Namen der App, Firebase (für Push-Benachrichtigungen) und das soziale Login konfigurieren.
• Anpassen: Zeigt an, wie Sie die Sprache und die Themen anpassen.

Schauen Sie sich diese an! Ich werde nicht wiederholen, was in der Dokumentation erwähnt wurde. Stattdessen müssen Sie in diesem Abschnitt die Vorlage so anpassen, dass sie so aussieht, wie wir es möchten.

Die meisten Projektkonfigurationseinstellungen werden in gespeichert app / Constants.js Datei. Hier sind einige Beispiele für Dinge, die Sie in dieser Datei ändern können:

WooCommerce-Integration: Die URL des WooCommerce-Stores, der von der App verwendet wird. Standardmäßig wird mstore.io verwendet.

WordPress: Adresse: 'http://mstore.io/api', WooCommerce: url: 'http://mstore.io', consumerKey: ", consumerSecret:", wp_api: true, Version: 'wc / v1 ', Zeitüberschreitung: 10, // Zeitüberschreitung anfordern RootCategoryId: 0, Produkt: Anzeige: ProductThumbnails: Breite: 180, Höhe: 216,, CatalogImages: Breite: 300, Höhe: 360,, SingleProductImage: Breite: 600, Höhe: 720,,,

Soziale Logins: Dies wird mit Auth0, einer Authentifizierungsplattform, implementiert. Standardmäßig unterstützt die Vorlage nur Anmeldungen von Google und Facebook. Sie sollten jedoch jeden Dienst hinzufügen können, der von Auth0 unterstützt wird.

Auth0: clientId: ", Domäne:",,

Icons: Sie können ein beliebiges Symbol in Fontawesome verwenden, aber Sie sollten dem Namen das Präfix voranstellen ios-.

Symbol: // App-Symbole. Überprüfen Sie http://fontawesome.io/icons/ für weitere Symbole. Menü: 'ios-menu', Home: 'ios-home', Zurück: 'ios-arrow-back', Weiterleiten: 'ios-arrow-forward', Konfig: 'ios-settings', Mehr: 'ios-more ', SignIn:' ios-log-in ', SignOut:' ios-log-out ', ShoppingCart:' ios-cart ', ShoppingCartEmpty:' ios-cart-Gliederung ', Sortierung:' ios-trichter ', Filter: 'ios-trichter-outline', ShowItem: 'ios-arrow-dropright', HideItem: 'ios-arrow-dropup', ListMode: 'ios-list-box', GridMode: 'ios-grid', RatingFull: 'ios -star ', RatingEmpty:' ios-star-contour ', Wunschliste:' ios-heart ', WishlistEmpty:' ios-heart-contour ', Löschen:' ios-trash ', AddToCart:' ios-cart ', MyOrder: 'ios-cube', News: 'ios-paper', Mail: 'ios-mail', RatioOff: 'ios-radio-button-off', RatioOn: 'ios-radio-button-on', Suche: 'ios -search ', Schließen:' ios-close ', HappyFace:' ios-happy-outline ', SadFace:' ios-sad-contour ',,

Thema: Farben für die verschiedenen Komponenten, aus denen jede Seite besteht, können ebenfalls aktualisiert werden. Wenn Sie beispielsweise die Hintergrundfarbe des Headers ändern möchten, können Sie den Wert für aktualisieren TopBar:

Farbe: TopBar: 'white', TopBarIcon: '# 283747',

Bilder: Der Begrüßungsbildschirm und andere Bilder können auch durch Angabe eines neuen Pfads für Folgendes aktualisiert werden:

Image: Logo: required ('./ images / logo.png'), SplashScreen: required ('./ images / splash_screen.png'), CategoryPlaceholder: required ('./ images / category_odhodler.png'), DefaultAvatar: erfordern ('./ images / default_avatar.jpg'), AvatarBackground: erfordern ('./ images / avatar_background.jpg'), CheckoutStep1: erfordern ('./ images / line-1.png'), CheckoutStep2: erfordern (' ./images/line-2.png '), CheckoutStep3: required (' ./images / line-3.png '), Stripe: required (' ./images / stripe.png '), PayPal: Required ('. /images/PayPal.png '), CashOnDelivery: required (' ./ images / cash_on_delivery.png '), PlaceHolder: required (' ./ images / placeholderImage.png '),,

Diese Bilder werden im gespeichert App / Bilder können Sie sie einfach ersetzen, wenn Sie die alten Bilder nicht behalten möchten.

• Sie können auch die PayPal-Optionen in dieser Datei ändern. Stellen Sie sicher, dass Sie Ihr eigenes PayPal-Entwicklerkonto erstellen, um das zu erhalten Kunden ID und geheimer Schlüssel. Vergiss nicht zu aktualisieren Sandbox-Modus zu falsch Wenn Sie Ihre App für die Produktion bereitstellen, wird standardmäßig der Sandbox-Modus verwendet, sodass kein Geld für Transaktionen ausgegeben wird.

PayPal: clientID: ", secretKey:", sandBoxMode: true, // bei der Produktion in false ändern,

• Um einzelne Seiten anzupassen, müssen Sie auf die App / Container Verzeichnis. Hier finden Sie die Dateien für jede Seite. Wenn Sie beispielsweise die Startseite anpassen möchten, navigieren Sie zu Zuhause Ordner und öffnen Sie die index.js Datei. Nach dem Öffnen werden Sie feststellen, dass die Seite das verwendet  Komponente, um jede Produktkategorie darzustellen. Also, wenn Sie ein allgemeines Styling für das hinzufügen möchten  Komponente, müssen Sie die aktualisieren app / Komponenten / ImageCard / index.js Datei. Ansonsten können Sie die Stile einfach auf der Seite selbst aktualisieren:

this.styles = container: flex: 1, imageCard: width: Constants.Dimension.ScreenWidth (1), height: 200,, mainCategoryText: color: 'white', // die Farbe der Kategorie ändern text fontSize: 40 // Den Kategorietext größer machen, numberOfProductsText: color: 'white', fontSize: 15

Fazit

Dieses Tutorial ist keinesfalls eine umfassende Anleitung zur Verwendung der BeoStore-Vorlage. Wir haben jedoch eine ganze Reihe von Gründen besprochen, insbesondere bei der Fehlerbehebung beim Setup, die in der offiziellen Dokumentation fehlen. 

Der nächste Schritt besteht darin, diese Vorlage mit Ihrer WooCommerce-Website zu verknüpfen oder sogar neu zu verwenden, damit sie für andere Arten von Apps verwendet werden kann.

Laden Sie die Vorlage jetzt herunter oder Wenn Sie mehr darüber erfahren möchten, können Sie die Dokumentation hier lesen. Auf CodeCanyon finden Sie auch viele weitere React Native-App-Vorlagen.