フリーランス 技術調査ブログ

フリーランス/エンジニア Ruby Python Nodejs Vuejs React Dockerなどの調査技術調査の備忘録

React Native開発方法やexpoについて、覚えたことをまとめてみた。

ReactNative 開発環境設定

-vscode拡張機能で「prettier」をインストールしておくと、コードを自動的にインデントやシングルクォートなどに統一したフォーマットに保管してくれる prettier.io

.prettierrcファイルをルート配下に設置してファイルの中身を下記のように記述する

{
    "trailingComma": "es5",
    "tabWidth": 2,
    "semi": false,
    "singleQuote": true
}

React Native開発方法

  • expoを使う方法と使わない方法がある

expoとは

  • OTAアップデート、クラウドビルドなどのメリットがある
  • 開発できるアプリの機能に制限がかかる。例えば、expoを使用しているとReactNativeからネイティブのコードにアクセスすることができない
メリット
  • 変更がリアルタイムに反映される
  • Apple審査なしでアップデートできる。(最初の審査だけは必要)
  • 本番のビルドがコマンド1つXcodeすら不要
expo build ios
expo build android
デメリット
  • ネイティブモジュールが使えない
  • サードパティ製 npmモジュールには使えないもの
  • ネイティブSDK使えない 例えばアプリ内課金、Bluethoothなど
  • expoの開発からexpoを利用しない開発に変更したい場合、下記のコマンドを実行することができるが、一度戻したら、再度、expoを利用した状態に戻すことができない。
expo eject
expo使う時に気にすること
  • expoで提供されている機能は下記となる
  • 下記の記載されている機能でも「Bare workflow」しか対応していないものが記載されている。例えば「InAppPurchases」は課金処理のため、expoを利用していると使えない。 docs.expo.io

  • サードパーティ製のモジュールを利用する際に利用方法にiOSでは「Podfile」、Androidでは「manifesto」などに追加して利用するようなモジュールはexpoでは利用できない。

※余談:Bare workflowとは 基本的には、React Native CLIでプロジェクトを作成するのと同じ経験です。ベアワークフローを使用すると、任意のネイティブライブラリまたは独自のネイティブコードを使用してExpoアプリをカスタマイズできます。

下記の記事を参考にexpoでの実績などの過去の経験者の意見を参考にする

  • 結局はexpoを捨てることになると思いますが初めてのアプリ開発をする上ではexpoで一度ならしてからrejectするのも良いかと言い聞かせてexpoで何かアプリを作成してみる
導入当初の不安って、やっぱり Expo に殆ど乗っかるっていう部分ですよね。それって、Expo が頑張らなくなったら絶望的じゃないですか。それでも、今のところ取り越し苦労な感じで。

tech.kitchhike.com