【React Native】React Native Firebaseを使ってCloud Firestoreを導入する

React Native Firebase ライブラリを使って、Cloud Firestore をアプリに導入したのでその手順をまとめ。
なお、Cloud Firestore とは「Google が提供している NoSQL ドキュメント指向データベース」です。
また、データベースが更新された際、リアルタイムで内容が反映される仕組みがあるため、私の場合は、この機能を使ってチャット機能を実装しました。

公式サイトのドキュメントはこちらから。

Cloud Firestore | React Native Firebase
https://rnfirebase.io/firestore/usage

 

まず、ライブラリの導入は下記コマンドで行います。

npm install @react-native-firebase/firestore --save
// iOS の環境の場合、下記も実行
npm pod-install

設定は以上です。

そしてサンプルコードは下記のとおりです。
最初に、データの取得方法についてです。

import firestore from '@react-native-firebase/firestore';

firestore()
  .collection(['コレクション名'])
  .onSnapshot(QuerySnapshot => {
    if (QuerySnapshot.size > 0) {
      QuerySnapshot.forEach(documentSnapshot => {
        console.log(documentSnapshot.data());
      });
    }
  }, error => {
    console.log(error);
});

こちらはリアルタイムでデータベースからデータを取得しています。
また、データに更新があったらそれを検出してデータを再取得できます。

これだけなら、Realtime Database と出来ることは同じなのですが、Cloud Firestone だと、更に where() で条件に合致するデータのみを取得したり、orderBy() でデータ取得時に並び替えができたり、limit() を使って取得件数を制限できたりします。
orWhere などの高度なことはできませんが、チャットのデータを保存するくらいならこれで十分だと思います!

次に、データを送信するサンプルがこちらです。

const data = {'送信したいデータ'};
firestore()
  .collection(['コレクション名'])
  .doc()
  .set(data);
  .then(() => {
    console.log('Success!');
  });

これに関しては特に説明はありません…。
データの保存に成功したら、6行目の .then() が呼び出されるので、何か処理を行いたい場合はこちらに追加してください。

基本的な使い方は以上です。
詳細が知りたい場合は、公式のドキュメントをご確認ください。

 

以上、React Native Firebase を使って、Cloud Firestore を導入する方法についてでした。
ご参考になれば幸いです。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG