MENU

【React Native初心者】Expoとの違いに苦しんだ話|ビルドエラー地獄とその回避法

React Nativeでのスマホアプリ開発を、正直なめていました。

昨日、初めてexpoを使わずにreact native単体を触り、簡単な電卓アプリを作りました。
そして、最初に問題なく起動できたので、「expoと大して変わらない?」と思ってしまったのです。

しかし、今日脳トレのアプリを作成していて、問題が発生しました。

効果音を入れたら、テスト(ビルド)が出来なくなったのです。

なんか、バージョン問題が起きているらしく、それが原因で上手く起動できない。
たくさん、chatgptにアドバイスしてもらい、直そうとしても一向に改善しない。

3時間以上四苦八苦しても無理だったので、途中で諦めて最初から作り直すことにしました。

そこでしっかりと、reactnativeとexpoの違いについて詳しく調べてみました。

すると、reactnative単体のネイティブ環境では、バージョン問題が頻繁に起きるらしく、初心者には相当難しいらしい。

なので、新しく何か機能する度に、バージョン問題をチェックして機能するかどうかが大変みたい。

今まで私は、expoでそんなバージョン問題にほとんど出くわさなかった為、reactnative単体での難しさを理解していなかった。
そして、直し方も難しい。

あと細かいことですが、SDKのバージョンも17にしておかないとダメとのこと。
環境変数の設定も地味に初心者にはわかりずらい・・・。

目次

知っておかなければならない事

まずreact nativeの導入自体のおさらい。

npx @react-native-community/cli init MyApp このコマンドでプロジェクトをつくること。

新しく、 npm○○で機能を追加したら、package.jsonに書かれているすべての ^を削除すること。
^これを消せば、自動更新が無効になり、バージョン問題が発生しづらくなるかもしれない。

もし、^ を消し忘れたままテストやビルドを実行してしまった場合は、

package-lock.json を削除(リセット)
node_modules フォルダも削除(任意だが推奨)
依存を再インストール:npm install

この3点セットを行う。

^を消しても、すでに package-lock.json に残ってるキャッシュ的な記録が「うんうん、このバージョンでいいよ」って言ってる。

ビルドエラーが発生したときの対処法

React Native単体での開発では、ビルドが急に失敗することも珍しくありません。そんなときは、まず以下の手順を試してみましょう。

Android StudioやGradleのキャッシュ掃除コマンド:gradlew.bat clean これを実行(Windowsの場合)

まとめ

初心者はなるべくnpx ○○ や npm install を多用しない方がいいという結論に達しました。

ライブラリ同士の互換性やReact Nativeとのバージョン不一致でエラーが発生しやすい。
react-native-○○ の多くはiOS/Androidのネイティブコードに依存しており、XcodeやAndroid Studioのビルドエラーが頻発する。

ということで、なるべくシンプルな機能のスマホアプリ開発から経験を積んでいくべきだと悟りました。

Expoで簡単にスマホアプリが開発出来ていたので、react native単体でもいけると甘く見ていました。
Expoが無料で制限なく使えたら、ずっと使っていたのですが。
また、admobとのバージョンエラーさえなければ・・。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次