Vue NativeにRealmを組み込んだ時のエラーを解決してみた
はじめに
前回のブログではVue Nativeを用いてiOSアプリを作ってみました。
次はモバイルアプリ側にデータを永続化したいため、Realmを組み込んでみました。
2019/11/11のバージョンではエラーが発生しており、トライアンドエラーして解決した結果を投稿します。
realmをプロジェクトに組み込む
今回の環境や手順は2019/11/10時点で以下の動作ができた状態です。
- realmが追加されたアプリがiosシュミレーターで動作した
通常の手順で試しましたが、エラーが発生してなかなか動きませんでした。issueが上がっていたのでそちらをベースにした手順になっています。
Vue Nativeのツールなどが生成した設定ファイルをいくつか除去する必要があります。
事前準備する
ソースコードはこちらです。ソースコードはrealm追加用に少し変わっています。
手順は途中まで同じです。前回のブログの依存関係を解決するまでを実施して下さい。
realmを追加する
まずは、realmのパッケージを追加します。
yarn add realm --save
次にejectしてReact Nativeのプロジェクトに変換します。こちらの入力内容は前回のブログと同じです。
yarn eject
realmを利用できるようにするため、realmをiosモジュールに紐付けます。
react-native link realm
成功すると以下のメッセージが出力されます。
iosのネイティブモジュールの依存関係を解決するため、podコマンドを実行します。
cd ios pod install
この状態で「yarn ios」を実行するとビルドエラーが発生します。
エラーを解決する
こちらのissueを参考にしました。
対応する内容は以下の２点です。
- node_modules内のサブプロジェクトを紐付ける
- 紐づけるバイナリを変更する
node_modules内のサブプロジェクトを紐付ける
サブプロジェクトをメインプロジェクトに紐付けます。xcodeでblogapp/ios/blogapp.workspaceを開きます。
ドラッグ&ドロップで２つのプロジェクトを紐付けます。
- blogapp/node_modules/realm/src/RealmJS.xcodeproj
- blogapp/node_modules/realm/react-native/ios/RealmReact.xcodeproj
Finderからドラッグ&ドロップでxcodeに紐付けるとこのような状態になります。
紐づけるバイナリを変更する
iosモジュールがrealmのモジュールを探せるようにバイナリを紐付けます。
まず、無駄な紐付けが残ってしまっているので、削除します。
先ほど紐付けたRealmJS.xcodeprojを選択し、[TARGETS]を開きます。
RealmJSTestを選択して右クリックし、[Delete]を実行します。RealmJSTestが消えています。
blogappプロジェクトの[Build Phase]を開きます。
Link Binaryで以下の対応行います。
- libGCDWebServers.aを削除する
- RealmJSプロジェクト内で利用されているため、blogappのリンクからは外します。
- RealmJSTests.xctestを削除する
- RealmJSTestは上で削除したため、blogappのリンクから外します。
- libRealmReact.aを追加する
- RealmReactプロジェクトを紐づけるため、blogappのリンクを追加します。
この状態で「yarn ios」を実行すると問題なく起動します。
ただ、デバッグログを見れないので、xcodeから起動するときちんと動作しているかが分かると思います。
最後に
トライアンドエラーしながら、動作できることまで確認しました。
発生しているのはリンクしたモジュールが探せないだったので少し大変でした。
もう少ししたらこの辺りの課題は解決されると思いますが、暫定的な対応としては問題ないかなと思います。
