React Native + Firebase環境を構築する際のメモ。

Firebase

firebase.google.com

FirebaseはGoogleが提供するモバイルプラットフォームであり、クラウドDBや認証、アナリティクス、クラッシュレポートなど多くのサービスをサポートしています。今回はReact NativeによるモバイルアプリにこのFirebaseを導入したいと思います。

Usage

1. プロジェクト作成

1.1 `$ react-native init`でReact Nativeプロジェクトを作成します。

$ react-native init my-app

1.2 `firebase`のインストール

作成したプロジェクト内でreact-native-firebaseをインストールします。

$ cd my-app
$ npm install --save react-native-firebase

2. FirebaseのiOS/Android設定ファイルを取得する

2.1 Firebaseにプロジェクトを作成

GoogleのFirebase公式ページへ遷移し、「使ってみる」を押す（Googleにログインしていない場合はログインする）

firebase.google.com

f:id:rennnosukesann:20180529210629p:plain

2.2 プロジェクト追加をクリック

f:id:rennnosukesann:20180529211041p:plain

2.3 プロジェクト名とIDを入力し、「次へ」を押す

f:id:rennnosukesann:20180529221556p:plain:w500

2.4 プロジェクトのダッシュボードに移動、「iOSアプリにFirebaseを追加」を押す

f:id:rennnosukesann:20180529223143p:plain

2.5 アプリを登録

「iOS バンドル ID」は作成したプロジェクトと同名にします。

f:id:rennnosukesann:20180529223211p:plain

アプリ設定ファイル（iOS）（GoogleService-Info.plist）をダウンロードします。

f:id:rennnosukesann:20180529223240p:plain

取得した設定ファイルをios/[project]/配下に置きます。
その後、ios/[project]/配下でpod initを使用し、Podfileを作成します。

$ pod init

Podfileを以下のように書き換えます。

target '[Project name]' do
  pod 'Firebase/Core'
end

書き換えたら

$ pod install

2.6 AppDelegate.mを書き換え

[プロジェクト名].xcworkspaceをXCodeで立ち上げ、以下の記述を追加

Swiftの場合

import Firebase // 追加

 ...

  func application(_ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?)
    -> Bool {
    FirebaseApp.configure() // 追加

Objective-Cの場合

@import Firebase; // 追加

...

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [FIRApp configure]; // 追加

}