create react native app redux auth
1.0.0
Dies ist eine Kesselplatte für erstellte Reaktionen mit integriertem Redux & Local Auth & React Navigation.
create-react-native-app-redux-auth generiert alle grundlegenden Dateien für eine neue React Native App mit Redux-Einbindungen (für die staatliche Verwaltung) sowie die React-Navigation und die lokale Authentifizierung vollständig gemacht!
Sie können mit allen Komponenten und APIs in React Native zusammenarbeiten, sowie die meisten JavaScript -APIs, die die Expo -App bietet.
create-react-native-app-redux-auth !Hier finden Sie ein volles geschriebenes Tutorial.
Dieses Projekt wurde mit React Native App und FSG erstellen.
Stellen Sie sicher, dass Sie über den Knoten V6 oder höher sowie die aktuelle Version von Expo Client 2.5.0 auf Ihrem mobilen Gerät installiert sind, um React Native 0,55 zu unterstützen. Es ist keine Xcode- oder Android Studio -Installation erforderlich.
$ npm install -g create-react-native-app-redux-auth Das Befehlszeilen-Tool create-react-native-app-redux-auth kann auf verschiedene Arten verwendet werden.
$ create-react-native-app-redux-auth Einfach ausgeführtes create-react-native-app-redux-auth in einem Verzeichnis generated einen Unterordner, der Ihre neuen Anwendungsdateien enthält.
Alternativ kann create-react-native-app-redux-auth einen Dateipfad einnehmen (relativ oder absolut und sogar einen, der noch nicht existiert), und es wird den Zielordner verwendet/erstellen und mit Ihren neuen Anwendungsdateien füllen.
$ create-react-native-app-redux-auth path/to/any/directory/you/prefer Wenn Sie bereits in ein Verzeichnis gemacht und cd 'D gemacht haben und es mit den neuen App -Dateien füllen möchten, verwenden Sie einfach die . Weg.
$ create-react-native-app-redux-auth . # caution, this will put the new files in your current folder! Wenn Sie die Dateien generiert haben, stellen Sie sicher, dass die folgenden Befehle im Projektstamm ausgeführt werden ( generated/ es sei denn, Sie haben ein Pfadargument verwendet, wie oben erläutert):
$ npm installÄndern Sie zu schnell 2 Dingen : 2 Dinge:
package.json den "Namen" in den Namen Ihrer App.IP.js die IP in die vollständige IP -Adresse Ihres Backends, unabhängig davon, ob dies in localhost:PORT oder irgendwo eingesetzt wird, wie Heroku.Um die integrierte lokale Authentifizierung zu ermöglichen, setzt das generierte Projekt eine laufende Datenbank an. Sie müssen Ihren Server für die Axios -Aufrufe von Redux konfigurieren:
${IP}/auth/login mit der Nutzlast {E -Mail: E -Mail, Passwort: Passwort} an.${IP}/auth/signup mit der Nutzlast {E -Mail: E -Mail, Passwort: Passwort} an.${IP}/auth/logout ohne Nutzlast durchgeführt. $ npm startDanke fürs Spiel! Hadoken. ?
Im Folgenden finden Sie Informationen über die Ausführung gemeinsamer Aufgaben. Die neueste Version dieses Handbuchs ist hier verfügbar.
Sie sollten nur die globale Installation von create-react-native-app aktualisieren müssen, sehr selten, idealerweise nie.
Die Aktualisierung der Abhängigkeit react-native-scripts Ihrer App sollte so einfach sein wie die Versionsnummer in package.json und die Neuinstallation der Abhängigkeiten Ihres Projekts.
Das Upgrade auf eine neue Version von React Native erfordert die Aktualisierung der Versionen react-native , react und expo Paket sowie die korrekte sdkVersion in app.json . Weitere Informationen zur Kompatibilität für die Paketversion finden Sie im Versioning-Handbuch für aktuelle Informationen zur Paketversion.
Wenn das Garn bei der Initialisierung des Projekts installiert wurde, wurden die Abhängigkeiten über Garn installiert, und Sie sollten es wahrscheinlich auch verwenden, um diese Befehle auszuführen. Im Gegensatz zur Abhängigkeitsinstallation ist der Befehls -Syntax zum Zeitpunkt dieses Schreibens für Garn und NPM identisch.
npm startFührt Ihre App im Entwicklungsmodus aus.
Öffnen Sie es in der Expo -App auf Ihrem Telefon, um es anzuzeigen. Es wird neu laden, wenn Sie Änderungen in Ihren Dateien speichern und im Terminal Fehler und Anmeldungen erstellen.
Manchmal müssen Sie möglicherweise den Cache des React Native Packager zurücksetzen oder löschen. Dazu können Sie das Flag --reset-cache Flag an das Startskript übergeben:
npm start --reset-cache
# or
yarn start --reset-cache
npm testFährt den Scherz -Testläufer für Ihre Tests aus.
npm run ios Wie npm start , aber auch versucht, Ihre App im iOS -Simulator zu öffnen, wenn Sie auf einem Mac sind und sie installieren lassen.
npm run android Wie npm start , versucht aber auch, Ihre App auf einem angeschlossenen Android -Gerät oder Emulator zu öffnen. Erfordert eine Installation von Android -Build -Tools (siehe React Native Docs für ein detailliertes Setup). Wir empfehlen auch, Genymotion als Ihren Android -Emulator zu installieren. Sobald Sie die native Build -Umgebung eingerichtet haben, gibt es zwei Optionen, um die richtige Kopie von adb zur Verfügung zu stellen, um die native React -App zu erstellen:
adbSettings -> ADB . Wählen Sie "benutzerdefinierte Android -SDK -Tools verwenden" und mit Ihrem Android SDK -Verzeichnis aktualisieren. adb von Genymotion/Applications/Genymotion.app/Contents/MacOS/tools/ Genymotion.app/contents/macos/tools/.npm run ejectDadurch wird der Prozess des "Aussagens" aus dem Erstellen von React Native Apps Build -Skripten gestartet. Sie werden ein paar Fragen darüber gestellt, wie Sie Ihr Projekt aufbauen möchten.
WARNUNG: Ausführen von Eject ist eine dauerhafte Aktion (abgesehen von jedem von Ihnen verwendeten Versionskontrollsystem). Eine ausgestoßene App erfordert, dass Sie eine Xcode- und/oder Android Studio -Umgebung einrichten.
Sie können app.json so bearbeiten, dass Sie Konfigurationsschlüssel in die expo -Taste aufnehmen.
Um den Anzeigenamen Ihrer App zu ändern, setzen Sie den Taste aus expo.name in app.json auf eine entsprechende Zeichenfolge.
Um ein App -Symbol festzulegen, setzen Sie den expo.icon -Schlüssel in app.json auf einen lokalen Pfad oder eine URL. Es wird empfohlen, dass Sie eine 512x512 -PNG -Datei durch Transparenz verwenden.
Dieses Projekt ist eingerichtet, um Scherz für Tests zu verwenden. Sie können die von Ihnen gefallene Teststrategie konfigurieren, aber der Scherz funktioniert nicht in der Box. Erstellen Sie Testdateien in Verzeichnissen namens __tests__ oder mit der .test -Erweiterung, damit die Dateien mit dem Scherz geladen werden. Ein Beispiel -Test finden Sie im Vorlageprojekt. Die Scherzdokumentation ist ebenso eine wunderbare Ressource, ebenso wie das Tutorial für native React Native.
Sie können ein Teil der Verhaltensweisen von React Native -App mithilfe von Umgebungsvariablen konfigurieren.
Wenn Sie Ihr Projekt starten, sehen Sie so etwas für Ihre Projekt -URL:
exp://192.168.0.2:19000
Das "Manifest" in dieser URL teilt der Expo -App mit, wie Sie das JavaScript -Bundle Ihrer App abrufen und laden. Selbst wenn Sie es über eine URL wie exp://localhost:19000 in die App laden, versucht die Expo -Client -App weiterhin, Ihre App an der IP -Adresse abzurufen, die das Startskript bietet.
In einigen Fällen ist dies weniger als ideal. Dies ist möglicherweise der Fall, wenn Sie Ihr Projekt in einer virtuellen Maschine ausführen müssen und über eine andere IP -Adresse auf den Packager zugreifen müssen als die standardmäßig. Um die IP -Adresse oder den Hostnamen zu überschreiben, der durch die native React -App erstellt wird, können Sie Ihren eigenen Hostnamen über die Umgebungsvariable REACT_NATIVE_PACKAGER_HOSTNAME angeben:
Mac und Linux:
REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname' npm start
Fenster:
set REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname'
npm start
Das obige Beispiel würde dazu führen, dass der Entwicklungsserver auf exp://my-custom-ip-address-or-hostname:19000 zuhört.
React Native App erstellen leistet eine Menge Arbeit, um die App -Setup und -entwicklung einfach und unkompliziert zu gestalten. Es ist jedoch sehr schwierig, das gleiche für die Bereitstellung im App Store von Apple oder Google Play Store zu tun, ohne sich auf einen gehosteten Dienst zu verlassen.
Expo bietet kostenlose Hosting für die von CRNA erstellten JS-Apps, mit denen Sie Ihre App über die Expo-Client-App freigeben können. Dies erfordert eine Registrierung für ein Expo -Konto.
Installieren Sie das exp -Befehlszeilen-Tool und führen Sie den Befehl veröffentlichen aus:
$ npm i -g exp
$ exp publish
Sie können auch einen Service wie Standalone -Builds von Expo verwenden, wenn Sie einen IPA/APK für die Verteilung erhalten möchten, ohne den nativen Code selbst erstellen zu müssen.
Wenn Sie Ihre App selbst erstellen und bereitstellen möchten, müssen Sie aus CRNA auswerfen und Xcode und Android Studio verwenden.
Dies ist normalerweise so einfach wie das Ausführen npm run eject in Ihrem Projekt, wodurch Sie durch den Prozess führen. Stellen Sie sicher, dass Sie react-native-cli installieren und dem nativen Code-Erstenhandbuch für React Native befolgen.
Wenn Sie bei der Arbeit an Ihrem Projekt Expo -APIs verwendet haben, werden diese API -Anrufe nicht mehr funktionieren, wenn Sie an ein regelmäßiges reagiertes natives Projekt ausgeworfen werden. Wenn Sie diese APIs weiterhin verwenden möchten, können Sie "Native + Expokit reagieren" auswerfen, wodurch Sie weiterhin Ihren eigenen nativen Code erstellen und die Expo -APIs weiterhin verwenden können. Weitere Informationen zu dieser Option finden Sie im Ausweichhandbuch.
Wenn Sie Ihre App aufgrund eines Netzwerk -Timeouts oder einer abgelehnten Verbindung nicht auf Ihr Telefon laden können, besteht ein guter erster Schritt darin, zu überprüfen, ob sich Ihr Telefon und Ihr Computer im selben Netzwerk befinden und sich gegenseitig erreichen können. Erstellen Sie den React Native App benötigt Zugriff auf Ports 19000 und 19001. Stellen Sie also sicher, dass Ihre Netzwerk- und Firewall -Einstellungen auf beiden Ports Zugriff von Ihrem Gerät auf Ihren Computer ermöglichen.
Öffnen Sie einen Webbrowser auf Ihrem Telefon und öffnen Sie die URL, die das Packager -Skript druckt, und ersetzt exp:// durch http:// . Wenn Sie beispielsweise unter dem QR -Code in Ihrem Terminal sehen, sehen Sie:
exp://192.168.0.1:19000
Versuchen Sie, Safari oder Chrom auf Ihrem Telefon zu öffnen und zu laden
http://192.168.0.1:19000
Und
http://192.168.0.1:19001
Wenn dies funktioniert, aber Sie können Ihre App jedoch nicht durch Scannen des QR -Codes laden, öffnen Sie ein Problem im Reposit von React React App -App -Repository mit Details zu diesen Schritten und anderen erhaltenen Fehlermeldungen, die Sie möglicherweise erhalten haben.
Wenn Sie die http -URL nicht in den Webbrowser Ihres Telefons laden können, verwenden Sie die Funktion "Tethering/Mobile Hotspot" auf Ihrem Telefon (jedoch vor der Datennutzung), die Verbindung Ihres Computers an dieses WiFi -Netzwerk herstellen und den Packager neu starten. Wenn Sie ein VPN verwenden, müssen Sie es möglicherweise deaktivieren.
Wenn Sie auf einem Mac sind, gibt es einige Fehler, die Benutzer manchmal sehen, wenn Sie versuchen, npm run ios :
Es gibt einige Schritte, die Sie unternehmen möchten, um diese Art von Fehlern zu beheben:
Command Line Tools auf etwas gesetzt ist. Manchmal, wenn die CLI -Tools zum ersten Mal per Homebrew installiert werden, bleibt diese Option leer, wodurch die Suche nach Apple -Dienstprogrammen den Simulator nicht finden kann. Stellen Sie sicher, dass Sie npm/yarn run ios erneut abführen.Reset Contents and Settings... . Danach ist der Simulator beendet und npm/yarn run ios erneut ausgeführt.Wenn Sie den QR -Code nicht scannen können, stellen Sie sicher, dass sich die Kamera Ihres Telefons korrekt konzentriert, und stellen Sie sicher, dass der Kontrast zu den beiden Farben in Ihrem Terminal hoch genug ist. Beispielsweise haben die Standardtheme von Webstorm möglicherweise nicht genügend Kontrast, damit die terminalen QR -Codes mit den System -Barcode -Scannern, die die Expo -App verwendet, scannbar sind.
Wenn dies zu Problemen für Sie führt, möchten Sie möglicherweise versuchen, das Farbthema Ihres Terminals so zu ändern, dass sie mehr Kontrast haben, oder leiten Sie die React -native App von einem anderen Terminal aus. Sie können die vom Packager -Skript in der Suchleiste der Expo -App vom Packager -Skript gedruckte URL auch manuell eingeben, um sie manuell zu laden.
