Ich verwende react-native, um eine plattformübergreifende App zu erstellen, aber ich weiß nicht, wie ich die Umgebungsvariable so einstellen soll, dass ich unterschiedliche Konstanten für unterschiedliche Umgebungen haben kann.
Beispiel:
development:
BASE_URL: '',
API_KEY: '',
staging:
BASE_URL: '',
API_KEY: '',
production:
BASE_URL: '',
API_KEY: '',
react-native
Damon Yuan
quelle
quelle
import {Platform} from 'react-native';
console.log(Platform);
Antworten:
Anstatt Ihre App-Konstanten fest zu codieren und die Umgebung zu wechseln (ich werde gleich erklären, wie das geht), empfehle ich, den Zwölf-Faktoren- Vorschlag zu verwenden, mit dem Ihr Erstellungsprozess Ihre
BASE_URL
und Ihre definiertAPI_KEY
.Um zu beantworten, wie Sie Ihre Umgebung aussetzen können
react-native
, schlage ich vor, Babels Babel-Plugin-Transformation-Inline-Umgebungsvariablen zu verwenden .Damit dies funktioniert, müssen Sie das Plugin herunterladen und dann ein einrichten.
.babelrc
Es sollte ungefähr so aussehen:Wenn Sie also Ihren reaktionsnativen Code durch Ausführen
API_KEY=my-app-id react-native bundle
(oder Starten, Ausführen von ios oder Ausführen von Android) transpilieren, müssen Sie Ihren Code nur so aussehen lassen:Und dann wird Babel das ersetzen durch:
Hoffe das hilft!
quelle
process.env
istNODE_ENV
.process.env.API_KEY
...process.env['API_KEY']
stattdessen auf die Variable zugreifenreact-native start --reset-cache
jedes Mal ausführen, wenn Sie die Umgebungsvariablen ändern.Die einfachste (nicht die beste oder ideale ) Lösung, die ich gefunden habe, war die Verwendung von react-native-dotenv . Sie fügen einfach die Voreinstellung "react-native-dotenv" zu Ihrer
.babelrc
Datei im Projektstamm hinzu:Erstellen Sie eine
.env
Datei und fügen Sie Eigenschaften hinzu:Dann in Ihrem Projekt (JS):
quelle
base_url
für beidestaging
und zu konfigurierenproduction
?.env
Dateien (pro Umgebung) oder nach der Wiederverwendung einiger Ihrer Werte in verschiedenen.env
Dateien, damit Sie sie nicht beispielsweise in Staging und Produktion duplizieren?.env
Dateien pro Umgebung, sagen wir malstaging
undproduction
.Meiner Meinung nach ist die beste Option die Verwendung von react-native-config . Es unterstützt 12 Faktor .
Ich fand dieses Paket äußerst nützlich. Sie können mehrere Umgebungen festlegen, z. B. Entwicklung, Bereitstellung, Produktion.
Bei Android sind Variablen auch in Java-Klassen, gradle, AndroidManifest.xml usw. verfügbar. Bei iOS sind Variablen auch in Obj-C-Klassen, Info.plist, verfügbar.
Sie erstellen einfach Dateien wie
.env.development
.env.staging
.env.production
Sie füllen diese Dateien mit Schlüsselwerten wie
und dann benutze es einfach:
Wenn Sie verschiedene Umgebungen verwenden möchten, setzen Sie die Variable ENVFILE grundsätzlich wie folgt:
oder zum Zusammenstellen der App für die Produktion (Android in meinem Fall):
quelle
React native hat nicht das Konzept globaler Variablen. Der modulare Geltungsbereich wird strikt durchgesetzt , um die Modularität und Wiederverwendbarkeit der Komponenten zu fördern.
Manchmal benötigen Sie jedoch Komponenten, um sich ihrer Umgebung bewusst zu sein. In diesem Fall ist es sehr einfach, ein
Environment
Modul zu definieren, das Komponenten aufrufen können, um Umgebungsvariablen abzurufen, zum Beispiel:Umwelt.js
my-component.js
Dadurch wird eine Singleton- Umgebung erstellt, auf die von überall im Bereich Ihrer App zugegriffen werden kann. Sie müssen
require(...)
das Modul explizit aus allen Komponenten entfernen, die Umgebungsvariablen verwenden, aber das ist eine gute Sache.quelle
getPlatform()
. Ich habe eine Datei wie diese erstellt, kann aber die Logik hier in React Nativestaging
oder was ichproduction
meine, weil es von Ihrer Umgebung abhängt. Wenn Sie beispielsweise verschiedene Varianten für IOS und Android möchten, können Sie Environment initialisieren, indem Sie Ihreindex.ios.js
undindex.android.js
Dateien importieren und die Plattform dort einstellen, zEnvironment.initialize('android')
.env.js
Datei erstellen, ignorieren Sie diese beim Einchecken in das Repository und kopieren Sie die verwendeten Schlüssel mit leeren Zeichenfolgenwerten in eine andereenv.js.example
Datei, die Sie einchecken, damit andere Ihre App einfacher erstellen können. Wenn Sie versehentlich Projektgeheimnisse einchecken, sollten Sie den Verlauf neu schreiben , um ihn nicht nur aus der Quelle, sondern auch aus dem Verlauf zu entfernen.Ich habe die
__DEV__
Polyfill verwendet, die in React-Native integriert ist, um dieses Problem zu lösen. Es wird automatisch auf eingestellt,true
solange Sie keine native Reaktion für die Produktion erstellen.Z.B:
Dann nur
import {url} from '../vars'
und Sie werden immer die richtige bekommen. Leider funktioniert dies nicht, wenn Sie mehr als zwei Umgebungen möchten, aber es ist einfach und beinhaltet nicht das Hinzufügen weiterer Abhängigkeiten zu Ihrem Projekt.quelle
Die spezifische Methode zum Festlegen von Umgebungsvariablen hängt vom CI-Service, dem Build-Ansatz, der Plattform und den von Ihnen verwendeten Tools ab.
Wenn Sie Buddybuild for CI zum Erstellen einer App und zum Verwalten von Umgebungsvariablen verwenden und Zugriff auf die Konfiguration von JS benötigen, erstellen Sie einen
env.js.example
mit Schlüsseln (mit leeren Zeichenfolgenwerten) zum Einchecken in die Quellcodeverwaltung und verwenden Sie Buddybuild zum Erstellen einerenv.js
Datei zur Erstellungszeit impost-clone
Schritt, wobei der Dateiinhalt wie folgt aus den Erstellungsprotokollen ausgeblendet wird:Tipp: Vergessen Sie nicht, diese hinzuzufügen
env.js
,.gitignore
damit Konfiguration und Geheimnisse während der Entwicklung nicht versehentlich in die Quellcodeverwaltung eingecheckt werden.Anschließend können Sie verwalten , wie die Datei , die geschrieben wird mit Buddybuild Variablen wie
BUDDYBUILD_VARIANTS
zum Beispiel eine größere Kontrolle über zu gewinnen , wie Sie Ihre Konfiguration bei der Erstellung erzeugt wird.quelle
env.js.example
Teil? Angenommen, ich möchte die App in meiner lokalen Umgebung starten. wenn meineenv.js
Datei in gitignore ist undenv.js.example
wird als Umriss verwendet, dasenv.js.example
ist kein legitimer JS - Erweiterung, so dass ich bin nur ein wenig verwirrt darüber , was Sie von diesem Teil gemeintenv.js.example
Datei befindet sich in der Codebasis als Referenzdokument, eine kanonische Quelle der Wahrheit darüber, welche Konfigurationsschlüssel die App verwenden möchte. Es beschreibt sowohl die zum Ausführen der App erforderlichen Schlüssel als auch den Dateinamen, der nach dem Kopieren und Umbenennen erwartet wird. Das Muster ist in Ruby-Apps üblich, die das Juwel dotenv verwenden , von dem ich das Muster entfernt habe.Ich denke, so etwas wie die folgende Bibliothek könnte Ihnen helfen, das fehlende Teil des Puzzles, die Funktion getPlatform (), zu lösen.
https://github.com/joeferraro/react-native-env
Das einzige Problem, das ich dabei sehe, ist, dass es sich um asynchronen Code handelt. Es gibt eine Pull-Anfrage zur Unterstützung von getSync. Probieren Sie es auch aus.
https://github.com/joeferraro/react-native-env/pull/9
quelle
Ich habe ein Pre-Build-Skript für das gleiche Problem erstellt, da ich einige verschiedene API-Endpunkte für die verschiedenen Umgebungen benötige
Und ich habe eine benutzerdefinierte erstellt
npm run scripts
, um reaktionsnativen Lauf auszuführen .Mein Paket-json
Importieren Sie dann in meinen Servicekomponenten einfach die automatisch generierte Datei:
quelle
Schritt 1: Erstellen Sie eine separate Komponente wie diese. Komponentenname: pagebase.js
Schritt 2: Verwenden Sie in diesem Code diesen Code
Schritt 3: Verwenden Sie es in einer beliebigen Komponente. Um es zu verwenden, importieren Sie zuerst diese Komponente und verwenden Sie sie dann. Importieren Sie es und verwenden Sie es:
quelle
Ich benutze
babel-plugin-transform-inline-environment-variables
.Ich habe Konfigurationsdateien in S3 mit meinen verschiedenen Umgebungen abgelegt.
JEDE env-Datei:
Danach habe ich ein neues Skript hinzugefügt
package.json
, das ein Skript zum Bündeln ausführtIn Ihrer App haben Sie wahrscheinlich eine Konfigurationsdatei mit:
welches durch babel ersetzt wird zu:
Denken Sie daran, Sie müssen
process.env['STRING']
NOT verwenden, sonstprocess.env.STRING
wird es nicht richtig konvertiert.quelle
REMEMBER you have to use process.env['STRING'] NOT process.env.STRING or it won't convert properly.
Vielen Dank! Dies ist derjenige, der mich stolpert !!![Quelle] Nach dem, was ich gefunden habe, sieht es standardmäßig so aus, dass nur Produktions- und Entwicklungskonfigurationen möglich sind (kein Staging oder andere Umgebungen) - stimmt das?
Im Moment habe ich eine Datei environment.js verwendet, mit der Expo-Release-Kanäle erkannt und die darauf zurückgegebenen Variablen geändert werden können. Zum Erstellen muss ich jedoch die Nicht- DEV- Variable aktualisieren, die entweder als Staging oder als Staging zurückgegeben wird prod:
Alternativen
Hat jemand Erfahrung mit React-Native-Dotenv für Projekte, die mit expo erstellt wurden? Ich würde gerne deine Gedanken hören
https://github.com/zetachang/react-native-dotenv
quelle
Sie können auch verschiedene Env-Skripte verwenden: Production.env.sh Development.env.sh Production.env.sh
Und geben Sie sie dann ein, wenn Sie mit der Arbeit beginnen [was nur an einen Alias gebunden ist], sodass die sh-Datei nur für jede env-Variable exportiert wird:
Wenn Sie dann babel-plugin-transform-inline-Umgebungsvariablen hinzufügen, können Sie im Code darauf zugreifen:
quelle
@ Chapinkapas Antwort ist gut. Ein Ansatz, den ich gewählt habe, da Mobile Center keine Umgebungsvariablen unterstützt, besteht darin, die Build-Konfiguration über ein natives Modul verfügbar zu machen:
Auf Android:
oder auf ios:
Sie können die Build-Konfiguration synchron lesen und in Javascript entscheiden, wie Sie sich verhalten möchten.
quelle
Es ist möglich, auf die Variablen mit
process.env.blabla
statt auf zuzugreifenprocess.env['blabla']
. Ich habe es kürzlich zum Laufen gebracht und kommentiert, wie ich es bei einem Problem auf GitHub gemacht habe, weil ich aufgrund der akzeptierten Antwort einige Probleme mit dem Cache hatte. Hier ist das Problem.quelle
Für die neuesten RN-Versionen können Sie dieses native Modul verwenden: https://github.com/luggit/react-native-config
quelle