ReactNative + Firebase基本環境インストール　(チュートリアル)

参考記事がありますが少々わかりにくかった為改めて。

このチュートリアルを見る事でReact Native(iOSとAndroidアプリ両方同時に開発できる便利なフレームワーク。)とアプリに必要なサーバーサイドを全部簡単にしてくれるFirebaseを統合した基本的な環境を作る事ができます。

React Nativeとは？

React NativeはiOSとAndroidアプリ両方同時に開発できる便利なフレームワークです。

ちなみにFacebookのアプリはReact Nativeで書かれています。

React Nativeとは何なのか詳しく↓

React Nativeとは何なのか

"React Nativeを使用することでネイティブに描画されるiOSとAndroidのアプリを作ることができる。１つのコードで、両方のプラットフォームで動くものが作れる。"

またそれにFirebaseを合わせる事でアプリが必要なサーバーサイドを全部簡単にしてくれます！

FirebaseFirebase

FirebaseFirebase

では早速本題へ

今回はこの二つを合わせた開発環境の初期設定方法を公開していきます！

react-native ×firebase

開発環境を整える為に具体的な手順を書いていきます

1）クローンと依存関係のインストール

レポジトリをcloneをする

https://github.com/invertase/react-native-firebase-starter

クローンしたプロジェクトディレクトリcd 　そこで

yarn install

インストール完了後 cd ios

pod install

※ここでもし詰まったら　　(おそらくmacOS High Sierraの人が詰まるかと思います。)

sudo gem install -n /usr/local/bin cocoapods

これでもいかない場合は下記を参考に

http://gootara.org/library/2017/10/macpods.html

これでうまく行くと思います

2）プロジェクト名を変更する

インストール後ルートディレクトリへ下記を実行

npm run rename

Error: Cannot find module 'fs-extra'で詰まった場合は

npm install --save fs-extra

Agreeing to the Xcode/iOS license requires admin privileges, please run “sudo xcodebuild -license” and then retry this command.と表示された場合は

sudo xcodebuild -license

agreeと入力。

詰まらずにいった場合は

project name:　testproject
Company name:　testprojectinc
package name:　testpackage

と表示されるのでパッケージ名の値を書き留めておいてください。これはFirebaseプロジェクトを設定するときに必要になります

[Android]アンドロイドのための追加手順はありません。

3）Google Servicesファイルを追加する（plistとJSON）

GoogleService-Info.plist　. google-services.json それぞをios/プロジェクトのディレクトリとandroid/app/に設置する必要があります。

[iOS]ファイルをまだ作成していない場合はここの手順でファイルを作成します。作る際のiOS bundle IDは 2)で指定したパッケージ名を使用してください。

出来上がったファイルを ios/ プロジェクトのディレクトリに配置します。
［Android］この手順に沿って google-services.jsonを生成します。作る際の 2)で指定したパッケージ名を使用してください。

このファイルをandroid/app/プロジェクトのディレクトリに配置します。

4）アプリを起動する

［iso］ネイティブパッケージャを起動します。プロジェクトのルートから

yarn run start もしくは　npm start

最初のビルドには時間がかかります。成功したビルドがまだ開始されていない場合は、自動的にシミュレータも起動します。

[Android]アンドロイドデバイスが接続されていない場合は、エミュレータにGoogle Play / APIがインストールされていることを確認する必要があります。

実行準備ができている状態で、プロジェクトのルートから

npm run androidまたはyarn run android

すべてがうまくいけば、以下のような初期画面が表示されます。

参考：https://github.com/invertase/react-native-firebase-starter　

以上少し長くなりましたが、ありがとうございました。

React nativeでのアプリ開発。ios、Androidアプリ開発でお困りの方は下記URLからお問い合わせください。

また、その他webデザイン(コンセプトメイキング含め)、ロゴ制作、コーポレートサイトのリニューアルなども受け付けております。

Satoshi Tamura Portfolio