Eine sehr grobe Skizze eines mobilen Webbrowsers, der mit react-native erstellt wurde (ein „Omnibar“ und ein WebView ). Der Browser ist mit einer Gateway-API verbunden (die ich eventuell auch auf GitHub veröffentlichen werde), die als Transport für (derzeit nicht unterstützte) dezentrale Protokolle (derzeit DAT ) fungiert.
const express = require ( 'express' )
const app = express ( )
const port = 3000
const host = 'localhost'
const startUpMsg = `proxy listening on port ${ port } !`
const serveIndex = require ( 'serve-index' )
const Dat = require ( 'dat-node' )
const path = require ( 'path' )
app . use ( express . static ( __dirname + '/dats' ) )
app . use ( '/' , serveIndex ( __dirname + '/dats' ) )
app . use ( function ( req , res , next ) {
const orig = req . url
const { referer , host } = req . headers
if ( referer && / ^(/) / . test ( req . url ) ) {
// account for relative asset paths
const folder = referer . replace ( `http:// ${ host } /` , '' )
res . redirect ( `/ ${ folder . replace ( '/' , '' ) } ${ req . url } ` )
}
next ( )
} )
app . get ( '/dat/:key' , ( req , res ) => {
const { key } = req . params
Dat ( `./dats/ ${ key } ` , {
key : key
} , function ( err , dat ) {
if ( err ) throw err
dat . joinNetwork ( { } , _ => {
res . json ( {
url : `http:// ${ host } : ${ port } / ${ key } `
} )
} )
} )
} )
app . listen ( port , _ => console . log ( startUpMsg ) )Dieses Projekt wurde mit Create React Native App gebootstrappt.
Nachfolgend finden Sie Informationen zur Durchführung allgemeiner Aufgaben. Die aktuellste Version dieses Leitfadens finden Sie hier.
Sie sollten die globale Installation von create-react-native-app nur sehr selten, idealerweise nie, aktualisieren müssen.
Das Aktualisieren der react-native-scripts Abhängigkeit Ihrer App sollte so einfach sein wie das Erhöhen der Versionsnummer in package.json und das Neuinstallieren der Abhängigkeiten Ihres Projekts.
Für ein Upgrade auf eine neue Version von React Native müssen die Paketversionen react-native , react und expo aktualisiert und die richtige sdkVersion in app.json festgelegt werden. Aktuelle Informationen zur Paketversionskompatibilität finden Sie im Versionsleitfaden.
Wenn Yarn bei der Initialisierung des Projekts installiert war, wurden Abhängigkeiten über Yarn installiert, und Sie sollten es wahrscheinlich auch zum Ausführen dieser Befehle verwenden. Im Gegensatz zur Abhängigkeitsinstallation ist die Befehlsausführungssyntax zum Zeitpunkt des Verfassens dieses Artikels für Yarn 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 geladen, wenn Sie Änderungen an Ihren Dateien speichern, und im Terminal werden Build-Fehler und Protokolle angezeigt.
Manchmal müssen Sie möglicherweise den Cache des React Native-Packagers zurücksetzen oder leeren. Dazu können Sie das Flag --reset-cache an das Startskript übergeben:
npm start --reset-cache
# or
yarn start --reset-cache
npm testFührt den Jest-Test-Runner für Ihre Tests aus.
npm run ios Wie npm start , versucht aber auch, Ihre App im iOS-Simulator zu öffnen, wenn Sie einen Mac verwenden und diese installiert haben.
npm run android Wie npm start , versucht aber auch, Ihre App auf einem verbundenen Android-Gerät oder Emulator zu öffnen. Erfordert eine Installation von Android-Build-Tools (detaillierte Einrichtung finden Sie in der React Native-Dokumentation). Wir empfehlen außerdem, Genymotion als Ihren Android-Emulator zu installieren. Sobald Sie die native Build-Umgebung eingerichtet haben, gibt es zwei Möglichkeiten, die richtige Kopie von adb für Create React Native App verfügbar zu machen:
adb von Android StudioSettings -> ADB . Wählen Sie „Benutzerdefinierte Android SDK-Tools verwenden“ und aktualisieren Sie mit Ihrem Android SDK-Verzeichnis. adb/Applications/Genymotion.app/Contents/MacOS/tools/ .npm run ejectDadurch wird der Prozess des „Auswerfens“ aus den Build-Skripten der Create React Native App gestartet. Ihnen werden einige Fragen dazu gestellt, wie Sie Ihr Projekt aufbauen möchten.
Warnung: Das Ausführen von „eject“ ist eine permanente Aktion (abgesehen davon, welches Versionskontrollsystem Sie verwenden). Für eine ausgeworfene App müssen Sie eine Xcode- und/oder Android Studio-Umgebung einrichten.
Sie können app.json bearbeiten, um Konfigurationsschlüssel unter dem expo -Schlüssel einzuschließen.
Um den Anzeigenamen Ihrer App zu ändern, legen Sie den expo.name -Schlüssel in app.json auf eine entsprechende Zeichenfolge fest.
Um ein App-Symbol festzulegen, legen Sie den expo.icon -Schlüssel in app.json entweder auf einen lokalen Pfad oder eine URL fest. Es wird empfohlen, eine 512 x 512 PNG-Datei mit Transparenz zu verwenden.
Dieses Projekt ist darauf ausgelegt, Jest für Tests zu verwenden. Sie können jede beliebige Teststrategie konfigurieren, aber jest funktioniert sofort. Erstellen Sie Testdateien in Verzeichnissen mit dem Namen __tests__ oder mit der Erweiterung .test damit die Dateien von Jest geladen werden. Einen Beispieltest finden Sie im Vorlagenprojekt. Die Jest-Dokumentation ist ebenfalls eine wunderbare Ressource, ebenso wie das React Native-Test-Tutorial.
Sie können einige Verhaltensweisen von Create React Native App mithilfe von Umgebungsvariablen konfigurieren.
Wenn Sie Ihr Projekt starten, sehen Sie für Ihre Projekt-URL etwa Folgendes:
exp://192.168.0.2:19000
Das „Manifest“ an dieser URL teilt der Expo-App mit, wie sie das JavaScript-Bundle Ihrer App abrufen und laden soll. Selbst wenn Sie es also über eine URL wie exp://localhost:19000 in die App laden, wird die Expo-Client-App dies trotzdem versuchen Rufen Sie Ihre App unter der IP-Adresse ab, die das Startskript bereitstellt.
In einigen Fällen ist dies nicht ideal. Dies kann der Fall sein, wenn Sie Ihr Projekt in einer virtuellen Maschine ausführen müssen und über eine andere IP-Adresse als die, die standardmäßig druckt, auf den Packager zugreifen müssen. Um die von Create React Native App erkannte IP-Adresse oder den Hostnamen zu überschreiben, 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
Windows:
set REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname'
npm start
Das obige Beispiel würde dazu führen, dass der Entwicklungsserver exp://my-custom-ip-address-or-hostname:19000 überwacht.
„Create React Native App“ leistet viel Arbeit, um die App-Einrichtung und -Entwicklung einfach und unkompliziert zu gestalten, aber es ist sehr schwierig, dasselbe für die Bereitstellung im App Store von Apple oder im Play Store von Google zu tun, ohne auf einen gehosteten Dienst angewiesen zu sein.
Expo bietet kostenloses Hosting für die von CRNA erstellten reinen JS-Apps, sodass Sie Ihre App über die Expo-Client-App teilen können. Hierzu ist die Registrierung eines Expo-Kontos erforderlich.
Installieren Sie das exp -Befehlszeilentool und führen Sie den Veröffentlichungsbefehl aus:
$ npm i -g exp
$ exp publish
Sie können auch einen Dienst wie die Standalone-Builds von Expo nutzen, wenn Sie ein IPA/APK zur 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 CRNA auswerfen und Xcode und Android Studio verwenden.
Dies ist normalerweise so einfach wie das Ausführen von npm run eject in Ihrem Projekt, das Sie durch den Prozess führt. Stellen Sie sicher, dass Sie react-native-cli installieren und die Anleitung zum Einstieg in den nativen Code für React Native befolgen.
Wenn Sie während der Arbeit an Ihrem Projekt Expo-APIs verwendet haben, funktionieren diese API-Aufrufe nicht mehr, wenn Sie zu einem regulären React Native-Projekt wechseln. Wenn Sie diese APIs weiterhin verwenden möchten, können Sie zu „React Native + ExpoKit“ wechseln, wodurch Sie weiterhin Ihren eigenen nativen Code erstellen und die Expo-APIs weiterhin verwenden können. Weitere Einzelheiten zu dieser Option finden Sie in der Auswurfanleitung.
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 miteinander erreichbar sind. Create React Native App benötigt Zugriff auf die Ports 19000 und 19001. Stellen Sie daher sicher, dass Ihre Netzwerk- und Firewall-Einstellungen den Zugriff von Ihrem Gerät auf Ihren Computer über beide Ports zulassen.
Versuchen Sie, einen Webbrowser auf Ihrem Telefon zu öffnen und die URL zu öffnen, die das Packager-Skript ausgibt. Ersetzen Sie dabei exp:// durch http:// . Wenn Sie beispielsweise unter dem QR-Code in Ihrem Terminal Folgendes sehen:
exp://192.168.0.1:19000
Versuchen Sie, Safari oder Chrome auf Ihrem Telefon zu öffnen und zu laden
http://192.168.0.1:19000
Und
http://192.168.0.1:19001
Wenn dies funktioniert, Sie Ihre App aber immer noch nicht durch Scannen des QR-Codes laden können, öffnen Sie bitte eine Ausgabe im Repository „Create React Native App“ mit Details zu diesen Schritten und allen anderen Fehlermeldungen, die Sie möglicherweise erhalten haben.
Wenn Sie die http URL nicht im Webbrowser Ihres Telefons laden können, versuchen Sie es mit der Tethering-/Mobile-Hotspot-Funktion Ihres Telefons (achten Sie jedoch auf die Datennutzung), verbinden Sie Ihren Computer mit diesem WLAN-Netzwerk und starten Sie den Packager neu. Wenn Sie ein VPN verwenden, müssen Sie es möglicherweise deaktivieren.
Wenn Sie einen Mac verwenden, gibt es einige Fehler, die Benutzern manchmal angezeigt werden, wenn sie versuchen, npm run ios :
Es gibt einige Schritte, die Sie möglicherweise unternehmen möchten, um diese Art von Fehlern zu beheben:
Command Line Tools auf etwas eingestellt ist. Wenn die CLI-Tools zum ersten Mal von Homebrew installiert werden, bleibt diese Option manchmal leer, was dazu führen kann, dass Apple-Dienstprogramme den Simulator nicht finden. Stellen Sie sicher, dass Sie npm/yarn run ios danach erneut ausführen.Reset Contents and Settings... aus. Nachdem dies abgeschlossen ist, beenden Sie den Simulator und führen Sie npm/yarn run ios erneut aus.Wenn Sie den QR-Code nicht scannen können, stellen Sie sicher, dass die Kamera Ihres Telefons richtig fokussiert ist und dass der Kontrast der beiden Farben in Ihrem Terminal hoch genug ist. Beispielsweise weisen die Standardthemen von WebStorm möglicherweise nicht genügend Kontrast auf, damit Terminal-QR-Codes mit den von der Expo-App verwendeten System-Barcodescannern gescannt werden können.
Wenn dies bei Ihnen zu Problemen führt, können Sie versuchen, das Farbthema Ihres Terminals zu ändern, um mehr Kontrast zu erzielen, oder „Create React Native App“ von einem anderen Terminal aus ausführen. Sie können die vom Packager-Skript gedruckte URL auch manuell in die Suchleiste der Expo-App eingeben, um sie manuell zu laden.
