スパルタコードクラブ🤟🏻 - 開発ログ3

問題Github

リポジトリ

import React from "react";
import { StyleSheet, View, Text, TouchableOpacity, Alert } from "react-native";
import { Col, Row, Grid } from "react-native-easy-grid";
import { Container, Content, Thumbnail } from "native-base";
import { logout } from "../config/firebaseFunctions";
import firebase from "firebase/compat";
import "firebase/compat/firestore";

n.関数

ログアウト機能

firebaseFunctions.js

export async function logout(navigation) {
  try {
    const currentUser = firebase.auth().currentUser;
    await firebase.auth().signOut();
    navigation.push("SignInPage");
  } catch (err) {
    Alert.alert("로그아웃 실패 -> ", err.message);
  }
}

ロード画面出力

SignInPage.jsx
1秒の遅延

useEffect(() => {
  navigation.addListener("breforeRemove", (e) => {
    e.preventDefault();
  });

  setTimeout(() => {
    setReady(true);
  }, 1000);
}, []);

状態管理によるLoading画面の管理

const [ready, setReady] = useState(false);

return ready ? (
  <Container style={styles.container}>
    <ImageBackground source={bImage} style={styles.backgroundImage}>
      <Content contentContainerStyle={styles.content} scrollEnabled={false}>
        ...
      </Content>
    </ImageBackground>
  </Container>
) : (
  <Loading />
);

感想

状態管理の概念が徐々に把握されていると感じた.
まだまだ不足は多いですが、ドキュメントを見ていると、自分で開発できる気がします…?🙃
難しかったですが、幸い楽しめました.
完江へ行こう~