Firebaseをバインド!

アプリケーションの開発を開始し、追加した機能、プロシージャにログを書きます.

以前のタスク

CRNAを使用してReact-オリジナルapp

を作成

万博-CLI連動

cssはstyled-controlとして、typeに示すようにinstall

Reactive Navigationを使用してbotton Tabsを作成し、Native Stack構造

を作成します.

メインビューはFaltListを使用してレイアウトされます

Catogoryは、領域別にメッシュ構造

に分割する.

データは、データの山としてコードに格納、Firebase接続後に

移動(予定)する.

進捗タスク

FireBaseアカウントを作成し、appに

接続

reactNative FireBase Android setting

ログイン時に他画面

が表示する.

Firebaseアカウントの作成

https://console.firebase.google.com/u/1/
ここでアカウントを作成し、新しいプロジェクトを作成します.

私のアプリケーションのpackgenameを見つけて入れてください.

package nameはどこですか?

android -> app -> build.grade内のdefaultConfigを見つけてアプリケーションIDを入力すればいいです.
必要はありませんが、署名証明書SHA-1をデバッグします.
(Google認証、携帯電話番号、ダイナミックリンクで認証する必要がある場合は、コンソールウィンドウでcd android&./Gradlew signingReportをクリックし、二重タスク:app:signingReportを探し、SHA 1を貼り付けます.

プロファイルをダウンロードしてアプリケーションに入れる必要があります.

FireBase SDKを追加します.

andorid -> build.gradleは以下の項目があるかどうかをチェックし、ない場合は入れます.

android -> app -> build.gradleは以下の項目があるかどうかをチェックし、ない場合は入れます.

こうしてAndroidアプリとFirebaseプロジェクトを結びつけました.

reactNative Friebase android setting

https://rnfirebase.io/
ここで言うとおりに.yarn add @react-native-firebase/appInstallの残りのプロセスはFireBaseで完了しているのでスキップできます

テスト用の認証の使用

FireBaseプロジェクトに入り、Authentication起動に入り、電子メールをアクティブにします.
次に、Reactive Firebaseに必要なモジュールをインストールします.
(認証をインストールします.)
https://rnfirebase.io/auth/usageここでやると.yarn add @react-native-firebase/app yarn add @react-native-firebase/authを取り付けます.
(他のモジュールが複数あり、必要なモジュールをインストールします.)
その後、再構築を行い、正常に接続されているかどうかを確認します.

import auth from "@react-native-firebase/auth";

export default function App() {
  ...
    useEffect(() => {
    console.log(auth().currentUser);
  }, [])
}

コンソールウィンドウにnullが表示され、正常に連動します!

ログインnavigatorの作成

簡単にEメール/パスワードでログインして、連動していることを確認しましょう.
まず、Reactive Navigationを使用してnavigatorを作成します.これは、ロード後にログインする画面とログインしていない画面に分ける必要があるためです.そしてFirebaseにユーザ情報があるか確認するとloginview|mainviewが表示されます.
navigatorを使用して2つのケースを作成します.import auth from "@react-native-firebase/auth";を利用してAuthを呼び出します.auth().onAuthStateChanged(() => {})により会員情報があるか否かを判断する.
次に
login view -> join, login form
mainview->logout Btn、内容
作成します.(近日発売)

次のタスク

KakaoTalkソーシャルログインを実現し、

main view styling

catagory view styling

こうして今日はReactNativeとFireBaseを繋ぐことに成功しました!やれやれ!
今は溜まった学校の講義や読書をするTIL、、、