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...
おわりに
上記の方法は、環境変数を「開発環境かそれ以外」の二択でしか設定できません。
ステージング環境など、その他の設定も行ないたい場合は、環境変数設定用のパッケージを導入した方がよいと思います。