React Nativeで環境変数を設定する方法

React NativeでiOSアプリを開発する際、開発環境と本番環境で環境変数を分けたい場合があると思います。 それ用のパッケージを導入する方法もありますが、ここでは環境変数を設定するシンプルな方法を解説します。

__DEV__で分岐させる

React Nativeでは、Debugモードでビルドすると、グローバル変数__DEV__にtrueがセットされます。 Releaseモードでは、これがfalseになります。

基本的な考え方としては、これを条件分岐させて、変数や処理を振り分ければよいです。

ただ、振り分けるすべてに分岐処理を入れると、コードの見通しが悪くなってしまいます。 そのため、1つのファイルにまとめる方法などがおすすめです。

1. 環境変数を設定する

以下に、環境変数を設定する例を示します。

変数ENVに、DebugモードとReleaseモードの両方のものを定義し、__DEV__の値に応じてexportしています。

config/env.js:

const ENV = {
  development: {
    API_KEY: '123456789...'
  },
  production: {
    API_KEY: 'abcdefghi...'
  }
};

const environment = (__DEV__) ? 'development' : 'production';

export default ENV[environment];

環境変数を参照する

環境変数を参照するには、まず変数を参照したいファイルで設定ファイルをimportします。

あとは、以下のようにキーを指定することで、環境に応じた値を取得することができます。

index.ios.js:

import ENV from './config/env';

console.log(ENV.API_KEY);

Releaseモードの動作を確認する

通常の手順でアプリをビルドすると、ビルドモードがDebugになっています。

Releaseモードでの動作を確認したい場合は、Xcodeで以下より設定ウィンドウを開き、Build ConfigurationをReleaseにします。

Product -> Scheme -> Edit Scheme...

おわりに

上記の方法は、環境変数を「開発環境かそれ以外」の二択でしか設定できません。

ステージング環境など、その他の設定も行ないたい場合は、環境変数設定用のパッケージを導入した方がよいと思います。