• 참고 페이지

<첫페이지>

2개구역

1. 1 페이지 (로그인창)

• 가희

• 수연

src>screens>LoginScreen>LoginScreen.js

import React, { useState } from "react";
import {
  StyleSheet,
  View,
  useWindowDimensions,
  Image,
  Text,
} from "react-native";

import LoginInput from "../../components/LoginInput";
import { LogBtn, FbBtn, GBtn } from "../../components/LoginBtn";
import Logo from "../../../assets/images/logo.png";

const LoginScreen = () => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  const SignInPressed = () => {
    alert("Sign in");
  };

  return (
    <View style={styles.root}>
      <Image source={Logo} style={styles.logo} resizeMode="contain" />
      <Text style={styles.title}>GOD[T] MORNING </Text>
      <Text style={styles.name1}>E-mail</Text>
      <LoginInput
        placeholder="사용자 이름 또는 이메일"
        value={username}
        setValue={setUsername}
      />
      <Text style={styles.name1}>비밀번호</Text>
      <LoginInput
        placeholder="비밀번호"
        value={password}
        setValue={setPassword}
        secureTextEntry={true}
      />
      <Text style={styles.name2}>회원가입 | 비밀번호 찾기</Text>
      <LogBtn text="Sign In" onPress={SignInPressed} />
      <FbBtn text="Sign In with Facebook" onPress={SignInPressed} />
      <GBtn text="Sign In with Google" onPress={SignInPressed} />
    </View>
  );
};

const styles = StyleSheet.create({
  root: {
    textAlign: "center",
    justifyContent: "center" /*가로에서 가운데에 요소 배치*/,
    alignItems: "center" /*세로에서 가운데에 요소 배치*/,
    padding: 20,
  },
  logo: {
    width: "70%",
    maxWidth: 200,
    maxHeight: 100,
    height: 100,
  },
  title: {
    color: "#805acb",
    fontSize: 50,
    fontWeight: "bold",
    textAlign: "center",
  },
  name1: {
    fontSize: 14,
    alignSelf: "flex-start",
    padding: 5,
  },
  name2: {
    fontSize: 15,
    alignSelf: "center",
    padding: 10,
  },
});

export default LoginScreen;

src>components>LoginInput>LoginInput.js

import React from "react";
import {
  StyleSheet,
  Dimensions,
  useWindowDimensions,
  TextInput,
  View,
} from "react-native";

const LoginInput = ({ value, setValue, placeholder, secureTextEntry }) => {
  return (
    <View style={styles.container}>
      <TextInput
        value={value}
        onChangeText={setValue}
        placeholder={placeholder}
        style={styles.input}
        secureTextEntry={secureTextEntry}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: "white",
    width: "100%",
    padding: 15,

    borderRadius: 5,
    borderColor: "#e8e8e8",
    borderWidth: 1,

    height: 60,
    marginVertical: 15,
    paddingHorizontal: 10,
  },
  input: {},
});

export default LoginInput;

src>components>LojinBtn>LoginBtn.js

import React from "react";
import { StyleSheet, Text, View, Pressable } from "react-native";
//import { FaFacebook, FaGooglePlus } from "react-icons/fa";

const FbBtn = ({ onPress, text }) => {
  return (
    <Pressable onPress={onPress} style={styles.fb}>
      <Text style={styles.Ftext}> {text} </Text>
    </Pressable>
  );
};
const GBtn = ({ onPress, text }) => {
  return (
    <Pressable onPress={onPress} style={styles.gg}>
      <Text style={styles.Gtext}> {text} </Text>
    </Pressable>
  );
};

const LogBtn = ({ onPress, text }) => {
  return (
    <Pressable onPress={onPress} style={styles.log}>
      <Text style={styles.text}> {text} </Text>
    </Pressable>
  );
};

const styles = StyleSheet.create({
  log: {
    backgroundColor: "#2979ff",
    alignItems: "center",
    width: "100%",
    padding: 15,
    marginVertical: 10,
    borderRadius: 10,
  },
  fb: {
    backgroundColor: "#bbdefb",
    alignItems: "center",
    width: "100%",
    padding: 15,
    marginVertical: 10,
    borderRadius: 10,
  },
  gg: {
    backgroundColor: "#ffcdd2",

    alignItems: "center",
    width: "100%",
    padding: 15,
    marginVertical: 10,
    borderRadius: 10,
  },
  text: {
    fontWeight: "bold",
    color: "white",
    fontSize: 15,
  },
  Gtext: {
    fontWeight: "bold",
    color: "#f50057",
    fontSize: 15,
  },
  Ftext: {
    fontWeight: "bold",
    color: "#0039cb",
    fontSize: 15,
  },
});

export { LogBtn, FbBtn, GBtn };