[解決済み】react-nativeで環境変数を設定する？

質問

react-nativeを使ってクロスプラットフォームアプリを構築しているのですが、環境ごとに異なる定数を設定するための環境変数の設定方法が分かりません。

例

development: 
  BASE_URL: '',
  API_KEY: '',
staging: 
  BASE_URL: '',
  API_KEY: '',
production:
  BASE_URL: '',
  API_KEY: '',

解決方法は？

アプリの定数をハードコーディングして、環境の切り替えを行う代わりに（その方法は後ほど説明します）。 十二因子 をビルドプロセスで定義することを提案します。 BASE_URL と API_KEY .

に環境を公開する方法についてお答えします。 react-native を使用することをお勧めします。 babel-plugin-transform-inline-environment-variables .

この機能を利用するには、プラグインをダウンロードし、その中で .babelrc で、このような感じになるはずです。

{
  "presets": ["react-native"],
  "plugins": [
    "transform-inline-environment-variables"
  ]
}

というように、react-nativeのコードをトランスパイルする場合。 API_KEY=my-app-id react-native bundle (またはstart, run-ios, run-android)であれば、コードがこのようになればいいのです。

const apiKey = process.env['API_KEY'];

そして、バベルがそれを置き換えてくれます。

const apiKey = 'my-app-id';