Zenn
🧑‍💻

React Native アプリ開発初期設定（2020/10 版）

2020/10/10に公開
React Native
tech

他の人の知見も知りたく，zenn にもマルチポストします．オリジナルはこちら．
React Native アプリ開発初期設定（2020/10 版）

Expo に Bare Workflow というのが出来てからなんとなく自分の中で React Native アプリ開発の初期設定の型が固まってきた感じがするので，一旦以下の項目について現状のやり方と次の機会に確認すべきポイントをまとめておく．

  • プロジェクトの作成
  • App Name / Package Name / Bundle ID の変更
  • バージョン管理方法

なおこの構成で 3 つほどアプリを作ってきてはいるが，どれも実際にストアに出すには至っていない．商用アプリ向けにはもっといい方法があるかもしれない（知りたい）．

TL;DR

Expo bare workflow + unimodules + Typescript なプロジェクトを作成

npm install -g expo-cli # if you don't have expo command
expo init --template expo-template-bare-typescript

アプリ名と id を変更 （+マニュアル修正）

npx react-native-rename "My App" -b io.github.yaeda.myapp

react-native-versionでバージョン管理

"scripts": {
  "postversion": "react-native-version
}

プロジェクトの作成

React Native でアプリを作るとなるとまず Expo が使えるかを検討する．Expo には managed workflow と bare workflow という二通りの使い方があり，managed workflow の方が使えれば話は早く，何も考えずに巻かれておけばよいと思う．ただし managed workflow には制約があり，一部の Native 機能が使えない．それぞれの workflow や制約については以下のリンクを参照．

自分の場合は Bluetooth を使うことが多く，managed workflow が使えないので bare workflow を愛用している．bare workflow を使うと，普通の React Native アプリとして開発しながら unimodules という仕組みを利用して Expo 関連のライブラリを使えるようになる．完全に Expo から離れるという選択肢もあるとは思うが，経験上 Expo 関連のライブラリを使いたくなるケースが多く，後から対応するのはやや大変（後述）なので最初から bare workflow を使うと決めてかかったほうが幸せになれる．

ということで以下のコマンドで Expo bare workflow + unimodules + Typescript なプロジェクトを作成する．

npm install -g expo-cli # if you don't have expo command
expo init --template expo-template-bare-typescript

確認ポイント: 既存アプリのマイグレーションについて

既に出来上がっている React Native アプリに unimodules 対応を入れる場合は以下のページを参照．

Installing react-native-unimodules - Expo Documentation

現状はマニュアルで書き換える必要のあるファイル・変更数が多く，つらい．今後マイグレーションスクリプトなどができる可能性があるのでタイミングをみて確認すると良さそう．

確認ポイント: create-react-native-appコマンドについて

また，上記の unimodules 導入ページでおすすめされているnpx create-react-native-appというコマンドは実行後の選択肢で「Default new app」を選ぶと unimodules 入りの bare workflow のプロジェクト（非 typescript）が生成されるが，「Template from expo/examples」を選ぶともれなく managed workflow になるので注意．今後 template の追加などで改善されるかもしれないのでここも確認ポイント．

App Name / Package Name / Bundle ID の変更

expo initコマンドで指定できるアプリ名には（空白が使えない等の）制約があったり，Package Name（Android）や Bundle ID（iOS）が自動で付与されるので変更する必要がある．

ということで以下のコマンドでアプリ名と id を変更する．

npx react-native-rename "My App" -b io.github.yaeda.myapp

が，対応不十分でかなりマニュアルでの修正が必要．みんなこれどうやってるのか教えて欲しい．

確認ポイント: expo initのオプション

expo initのオプションは以下のページで解説がある．

Expo CLI - Expo Documentation

--nameは「The name of your app visible on the home screen.」とあるが空白が入れられないなどの制約がある．昔はキャメルケースしかサポートしていなかったが，スネークケースやケバブケースも使えるようになったという経緯があるので今後さらなる改善があるかもしれない．

また，--android-packageや--ios-bundle-identifierのようなオプションも検討された形跡がある．

このあたり公式でサポートされれば使いたいので要チェック．

確認ポイント: ライブラリのアップデート

公式の方法がない場合は 3rd party ライブラリが存在しないかチェックする．現時点で有力なreact-native-renameやreact-native-ci-toolsは開発が止まっている．

バージョン管理方法

マルチプラットフォーム展開時のバージョン管理について，は今の所全てに共通のバージョンを付与する方針でやっている．pacakge.json のpostversionにreact-native-versionを使うと楽．

"scripts": {
  "postversion": "react-native-version
}

こうするとyarn versionすると連動して android と ios のバージョンも上げくれる．

ただし，app.json に expo フィールドが存在すると managed workflow だと勘違いされて正しくバージョン更新がされない問題がある．

そのため，app.json から expo フィールドを削除するか，以下の Pull Request 版を使うと良い．

確認ポイント: Issue #105

上で説明した問題が解決されているかを確認する．早く対応してほしいので，同意できる人はコメントするなり action 付けるなりして欲しい．

確認ポイント: OTA について

実は OTA を使ったことがないので，OTA を真面目にやるとバージョン周りで考えることが増える気がしている．

最後に

一旦まとめた．他にも CI とかも固まりつつあるのでこのあたりも今後まとめたい．

Discussion