ReactNativeConfig使ってみた&使い方

## 前提
Android向けでもiOS向けでも使うことができるReactNativeConfigですが、iOS向けにしか使ったことがないためそのような内容になってます。

## ReactNativeConfigとは
https://www.npmjs.com/package/react-native-config
Historyを見ると初版は3年ほど前にリリースされたようですね。
configファイルの内容をdevelopやreleaseなど環境ごとに切り替えたいときに用います。
本稿の内容は上記のリンクの内容を日本語に画像などを付けながら説明するものです。

## 使い方

### まずは設定
まずはyarnしてlinkします(?)
当然対象のプロジェクトのルート下で。

```
$ yarn add react-native-config
$ react-native link react-native-config
```

次にxcode上で色々設定する必要があるので**ProjectNavigator**からプロジェクトを開き、以下を開きます。
<img width="1094" alt="スクリーンショット 2019-06-29 17.51.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243544/ff07aff2-924a-eee8-e1b2-b489ee00f75a.png">
**※Allになっている点を注意してください。**

次に下記画像の赤枠部分を**YES**に設定します。検索を行うと早いです。
<img width="927" alt="スクリーンショット 2019-06-29 17.54.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243544/64b280d0-7ab1-76aa-c8d2-3e997951a5cb.png">

次にその上の`Info.plist Preprocessor Prefix File`を`${BUILD_DIR}/GeneratedInfoPlistDotEnv.h`と設定します。
`${BUILD_DIR}/GeneratedInfoPlistDotEnv.h`は書いてあるままですが、ビルド後のディレクトリのルートになるように補完してくれます。(環境ごとにビルド後のディレクトリのルートが異なってくるため。)
<img width="930" alt="スクリーンショット 2019-06-29 17.56.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243544/0a9f3af6-0aac-52bb-0f85-0ead71c5772b.png">

そして`Info.plist Other Preprocessor Flags`を`-traditional`へ
<img width="932" alt="スクリーンショット 2019-06-29 17.58.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243544/11669a50-4d79-0d8d-e722-743df3593c76.png">

### 参考コード
参考までに私は以下のように用いました。

``` Config.ts
import ReactNativeConfig from 'react-native-config';
class Config {
	static apiUrl = `${ReactNativeConfig.API_URL}`;
}

export default Config;
```

``` '.env'
API_URL='http://hogehoge'
```
``` '.env.release'
API_URL='http://fugafuga'
```

`Config.ts`の`${ReactNativeConfig.API_URL}`で環境ごとに`.env`か`.env.release`のURLを引っ張ってきます。
もちろん`.env`がベースとなり、そこからの拡張として`.env.release`を作っていますが、文字列に決まりもなく、他の設定も作ることは可能です。

### xcode上での残りの設定

`⌘+shift+< → ManageSchemes...`にてSchemesを設定します。

`⌘+shift+<押下時`
<img width="896" alt="スクリーンショット 2019-06-29 18.15.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243544/e332950d-ff5a-c3a3-9116-b4551da95341.png">

`ManageSchemes...押下時`(※一部隠してます。)
<img width="1418" alt="スクリーンショット 2019-06-29 18.14.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243544/47e4d8d1-7732-c2e7-c493-55fbe6d64a96.png">

ベースとなるプロジェクト(この画像の場合はApp)を選択した状態でDuplicateを選択します。
<img width="1421" alt="スクリーンショット 2019-06-29 18.17.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243544/e9e9c946-9cd4-07a3-dff8-75748c91e85d.png">

Duplicate後、任意の名前を付けてEditを選択します。**(ここではReleaseとします。)**

**※Profileにてビルドする時を例に説明します。**

App SchemeのProfileにてビルドする場合、デフォルト設定なので`Pre-actions`は何もないと思います。
この場合、`.env`の設定値が読み込まれます。
<img width="895" alt="スクリーンショット 2019-06-29 18.24.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243544/d00e13f6-d51c-274b-d9b5-4d85df23bb1b.png">

次にRelease Schemeの設定を修正します。
`Pre-actions`の`New Run Script Action`より`.env.release`を読み込むように設定を行います。
<img width="896" alt="スクリーンショット 2019-06-29 18.24.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243544/a199f25a-32f5-8375-9d3d-663e8df41b4b.png">

**※今回releaseとして説明しましたが、その他develop用のconfigの設定を行う場合はこちらのDuplicateをconfig分だけ行います。**

## 実際にビルドを行う際
`⌥+⌘+i`押下し、左上からビルドの対象Schemeを選択して`Profile`を実行
<img width="897" alt="スクリーンショット 2019-06-29 18.38.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243544/c8e0366d-c13d-a87b-69b5-3489b538a385.png">

### Trouble Shooting
[こちらをどうぞ](https://www.npmjs.com/package/react-native-config#troubleshooting)

## 所感
ビルド時のSchemeの切り替えがマウスしかない？嘘？って感じでそこだけめんどくさい。(見つけられてないだけかも知れん)
Duplicateしまくればいくらでも増やせるのは楽でいいと思う。