はじめに
最近ネイティブアプリを React Native を使用して、アプリを開発する機会が増えていると思います。React と JS の知識が必要ですが、クロスプラットフォームの恩恵を受けることができます。一つのソースコードで、iOS と Android のアプリが開発できるので、メリットは大きいです。
今回は、地図アプリの開発で便利な SDK の一つでもある Mapbox が提供している React Native Mapbox を使って、iOS でサンプルアプリを動かすところまでを紹介したいと思います。そのため、今回使用した PC は Mac OS となります。
実は、当初は、React Native で mapbox を使用する場合に苦戦していた部分もあり、特にサンプルアプリを動かすまでに少しはまりましたので、その部分もお伝えできればと思います。
インストールでの注意事項
インストールガイドでは幾つか手順が書いていますが、はじめに Installation の記載の通りのステップで行い、その後、Installation Guides の example に記載しているガイドに従って行いましたが、うまくいかず失敗しました。注意点としては、Installation でのステップは行わず、必ず example に入ってから npm install を行う必要があります。
 |
|---|
インストール手順
基本は、example のインストールガイド に従って実行すれば問題なく、シュミレーターで確認することができました。
npm、node の各バージョンは、以下のとおりです。
$ npm -v
6.14.2
$ node -v
v13.9.0
1. 本体をダウンロード
サンプルアプリを起動するまでのステップですが、まず、react-native-mapbox-gl の maps をクローンします。クローン後、example に移動します。
2. accesstoken の作成
example に移動後、accesstoken を作成します。accesstoken は、mapbox の地図を使用する場合に必要となります。accesstoken は Mapbox の token を入れます。 ダブルコーテーション "" などは入れないでください。詳しくは、Mapbox access token を参照してください。
3. npm install の実行
accesstoken を作成後に npm install を行います。もし、npm install で失敗する場合は、$ rm -rf node_modules/*/.git/で削除してから、再度 npm install をしてください。
npm ERR! code EISGIT
npm ERR! git /Users/fredrikve/Stagecast/goteborgsvarvapp/node_modules/react-native-safe-area-view: Appears to be a git repo or submodule.
npm ERR! git /Users/fredrikve/Stagecast/goteborgsvarvapp/node_modules/react-native-safe-area-view
npm ERR! git Refusing to remove it. Update manually,
npm ERR! git or move it out of the way first.
4. iOS シミュレーターの実行
npm install後に以下のコマンドを実行します。
$ cd ios && pod install --verbose && cd ..
$ react-native run-ios
$ cd ios && pod install --verbose && cd ..では、インストールに少し時間がかかります。インストールに失敗しなければ以下のような画面が表示されます。その後、$ react-native run-iosを実行することで、iOS シミュレーターが起動します。
....
Integrating client project
Integrating target `Pods-RNMapboxGLExample` (`RNMapboxGLExample.xcodeproj` project)
Integrating target `Pods-RNMapboxGLExample-tvOS` (`RNMapboxGLExample.xcodeproj` project)
Integrating target `Pods-RNMapboxGLExample-tvOSTests` (`RNMapboxGLExample.xcodeproj` project)
Integrating target `Pods-RNMapboxGLExampleTests` (`RNMapboxGLExample.xcodeproj` project)
- Writing Lockfile in `Podfile.lock`
- Writing Manifest in `Pods/Manifest.lock`
- Running post install hooks
- cocoapods-stats from
`/Users/kamiya/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/cocoapods-stats-1.1.0/lib/cocoapods_plugin.rb`
CDN: trunk Relative path: CocoaPods-version.yml exists! Returning local because checking is only perfomed in repo
update
-> Pod installation complete! There are 39 dependencies from the Podfile and 46 total pods installed.
Rect Native Mapbox GL の各機能の挙動が確認できます。
5. 最後に
実際に開発する時に必要となる API リファレンスなどは、以下で確認いただけます。
https://github.com/react-native-mapbox-gl/maps/tree/master/docs
また、開発者向けのグループとして、Gitter があり、こちらでは活発に質問などが行われています。
Gitter developer group!