expoでdetachしてXcodeとかAndroid Studioとかでビルドしてみたりするには的なお話。

一般的にreact nativeで開発をしていると、
iosとかandroidとかっていうフォルダがあってそれぞれの中にネイティブのコードがあったりするんだけど。
expoは煩わしいことを無くしてくれる優秀なやつだから、そういったものも全て吸収してなかったりする。
けど既存のアプリをreact nativeで書き直すとかの場合だと、各moduleをいかしつつブリッジしつつで開発をしたい場合もあって通常のreact nativeに戻したいときもある。

というわけで今日はdetachしてXcodeだったりAndroid Studioでビルドするまで的なお話をば。

expoからdetachするには

$ exp detach

// ios
$ cd ios
$ pod setup
$ pod install
生成された.xcworkspaceを開く

// android
生成されたandroidフォルダをAndroid Studioで開く

こんな感じ。
気をつけておかないといけないのはapp.jsonの中で、
androidのpackage名、およびiosのbundleIdentifierを設定しておく必要がある。
ちなみに後述してあるが、androidのpackage名にハイフンを含んではいけない。
エラーが出てきて面倒なことになってしまうので。

Xcodeでビルド

iosフォルダの中にある.xcworkspaceをXcodeで開く。
.xcodeprojを開いてビルドすると、「linker command failed with exit code」が発生してしまうので注意。

ちなみにもちろんexpo XDEと連携しているので、jsを更新すればLive Reloadしてくれるっていう。
もちろんこのinfo.plistを編集すれば色々と設定も適用できますよ的な。
でも実はexpoのapp.json内でinfoPlistとして設定が出来る。
expoでLocalization native development regionをJapanにしてDatePickerIOSを日本語にするために、app.jsonにinfoPlistを設定する的なお話に書いてあるので、参考にでも。

Android Studioでビルド

detachするとAndroidディレクトリができるので、これをAndroid Studioでひらけばよい。
なんかAndroid Studio内で必要なツールがあるっぽいけど、
それはコンソール内でリンクをクリックしてくれれば大丈夫なのでささっと進めていく感じで。

- Could not find com.github.thefuntasty:CreditCardEntry:1.4.8.4.

gradleでこういうエラーが出てダメっていうことがある。
android > app > build.gradleを開き、repositoriesの中にmaven { url 'https://jitpack.io' }を足してあげればよい。
ちなみにすでにfabricのmavenがあるので、改行してその下にっていう感じで。
下のような感じになっていればOK。

android/app/build.gradle

repositories{
  flatDir{
    dirs 'libs'
  }
  mavenLocal()
  maven { url 'https://maven.fabric.io/public' }
  maven { url 'https://jitpack.io' }
}

- attribute package has invalid character '-'.などなど

Error:(2) Tag  attribute package has invalid character '-'.
Error:(89) Tag  attribute name has invalid character '-'.
Error:(95) Tag  attribute name has invalid character '-'.
Error:(2) Tag  attribute package has invalid character '-'.
Error:(89) Tag  attribute name has invalid character '-'.
Error:(95) Tag  attribute name has invalid character '-'.

AndroidManifest.xmlにこういうエラーが出てくることがある。
これの原因は簡単にいうと、app.jsonで指定したpackageにハイフンが含まれているから。
detachするときにこれをチェックしてくれることはないので自分で気をつけないといけないのが辛いところ。
もし失敗してしまっていたら手動で直せば良い感じ。
とりあえずandroidフォルダ内のpackage名を一括置換し、sync project with gradle filesをして、clean buildをしてビルド的な。

ぶっちゃけdetachをする必要がよっぽどなければexpo上で完結させた方がかなり楽。
特にandroidのpackage名を失敗するとかかなり泣きたい状態になってしまうし、
それぞれXcodeだったりAndroid Studioでごにょごにょするとかも出てくるわけで。
expoでLocalization native development regionをJapanにしてDatePickerIOSを日本語にするために、app.jsonにinfoPlistを設定する的なお話みたいに、app.jsonのinfoPlist内で解決出来ることは多々あるみたいな。

すでに開発されているアプリをreact nativeで書き直すんだけど、
ネイティブで書かれているものをそのまま使いたいとかでdetachする必要があるよとかそういう場合だったらいいんじゃないかな的なみたいな。