React NativeアプリをFirebaseと連携させようとしたけど失敗した

2019.5.16

前回の記事(Expoを使ったReact Native環境構築)で環境構築しまして、更にFirebaseと連携させるところまでやりたかったんですが、途中でエラーが解消できず手詰まりになってしまいましたが、失敗ログとして書き残します。

React Native Firebaseというモジュールを使います。

公式サイトに導入方法が載っています。こちらを参考にして進めていきます。

https://rnfirebase.io/docs/v4.0.x/installation/initial-setup

今回は以前に作ったプロジェクトをそのまま使います。

expo ejectが必要

expoというプラットフォームを使っているのでXCodeプロジェクトが隠蔽されています。なのでexpo ejectでプロジェクトを展開してやる必要があります。

展開方法やXCodeとAndroid Studioのプロジェクト名などを聞かれるので雰囲気で入力しました。

? How would you like to eject your app?
  Read more: https://docs.expo.io/versions/latest/expokit/eject/ React Native
We have a couple of questions to ask you about how you'd like to name your app:
? What should your app appear as on a user's home screen? react-native-sample
? What should your Android Studio and Xcode projects be called? react_native_sample

展開するとiosフォルダやandroidフォルダが出てきました。

c2b39f88.png

iOSセットアップ

この説明の通りに進めます。

firebaseのプロジェクトからアプリを作成してGoogleService-Info.plistをダウンロードします。そしてダウンロードしてきたファイルをios/[YOUR APP NAME]/GoogleService-Info.plistに配置してXCodeプロジェクトにファイルを追加します。(やり方はこちらの通り)

ios/[YOUR APP NAME]/AppDelegate.mの先頭に以下を追記します。

#import <Firebase.h>

didFinishLaunchingWithOptions:(NSDictionary *)launchOptionsメソッドのスコープ内の最初に以下を追記。

[FIRApp configure];

Cocoapodsの設定

ここを参考にXCodeプロジェクトにfirebaseのSDKを追加していきます。

Podfileが必要らしいので追加。

$ cd ios/[YOUR APP NAME]
$ pod init

Podfileの先頭を下記のように変更。

platform :ios, '9.0'
pod 'Firebase/Core', '~> 4.13.0'

pod installしたら下記のように怒られた。Podfile中でreact_native_sample-tvOSTestsが二回も定義されていたのが原因かな？なのでPodfileの# target 'react_native_sample-tvOS' do以下をすべてコメントアウトしたらinstallできました。

$ pod install
Analyzing dependencies
[!] The target `react_native_sample-tvOSTests` is declared twice.

いざ起動

react-native run-iosで起動してみたら下記のエラーが出ました。

Error: Could not find iPhone 6 simulator
    at Promise.then.udid (/Users/kawabatatoshi/practice/react-native-sample/node_modules/react-native/local-cli/runIOS/runIOS.js:149:7)
    at new Promise (<anonymous>)
    at runOnSimulator (/Users/kawabatatoshi/practice/react-native-sample/node_modules/react-native/local-cli/runIOS/runIOS.js:134:8)
    at Object.runIOS [as func] (/Users/kawabatatoshi/practice/react-native-sample/node_modules/react-native/local-cli/runIOS/runIOS.js:106:8)
    at /Users/kawabatatoshi/practice/react-native-sample/node_modules/react-native/local-cli/cliEntry.js:117:16
    at <anonymous>

エラーメッセージでググってみるとXCodeのバージョンが新し目だとでるっぽいです。

こちらのQiitaの記事で解決できました。

https://qiita.com/wheatandcat/items/25ce51c2991daee6c8bd

晴れてreact-native run-iosしてみたらiOS simulatorは起動しますが、アプリは起動されず。。。手詰まりになってしまいました。

エラーが出ててこの方法をやってみたけど、解消されず。。。

Error: Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/react_native_sample.app/Info.plist
Print: Entry, ":CFBundleIdentifier", Does Not Exist

    at checkExecSyncError (child_process.js:575:11)
    at Object.execFileSync (child_process.js:593:13)
    at /Users/kawabatatoshi/practice/react-native-sample/node_modules/react-native/local-cli/runIOS/runIOS.js:208:1
    at <anonymous>

Expoを使わない方法でプロジェクトを作って仕切り直してみます。

© 2019-2024 kwst.site.