スパルタコードクラブ🤟🏻 - 開発ログ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 />
    );

    感想


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