Taxi App UI 1

변경점

Intro 화면 생성
Intro.tsx

import { JSX } from "react";
import React from "react";
import { SafeAreaView, StyleSheet, Text, TouchableOpacity } from "react-native";
import { useNavigation, ParamListBase } from "@react-navigation/native";
import { StackNavigationProp } from "@react-navigation/stack";
import Icon from 'react-native-vector-icons/FontAwesome';
import { useFocusEffect } from "@react-navigation/native";

function Intro() : JSX.Element {
    console.log("-- Intro()")

    const navigation = useNavigation<StackNavigationProp<ParamListBase>>()

    useFocusEffect(React.useCallback(() => {
        setTimeout(() => {
            let isAutoLogin = false
            if (isAutoLogin) {
                navigation.push("Main")
            }
            else {
                navigation.push("Login")
            }
        }, 2000)
    }, []))

    return (
        <SafeAreaView style={styles.container}>
            <Icon name='taxi' size={100} color={'#3498db'}/>
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    }
})

export default Intro

Login UI
Login.tsx

import { JSX } from "react";
import { SafeAreaView, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { useNavigation, ParamListBase } from "@react-navigation/native";
import { StackNavigationProp } from "@react-navigation/stack";
import Icon from 'react-native-vector-icons/FontAwesome';
import { TextInput } from "react-native-gesture-handler";
import { useState } from "react";

function Login() : JSX.Element {
    console.log("-- Login()")

    const navigation = useNavigation<StackNavigationProp<ParamListBase>>()

    const [userId, setUserId] = useState('')
    const [userPw, setUserPw] = useState('')
    const [disable, setDisable] = useState(true)

    const onIdChange = (newId:string) => {
        newId && userPw ? setDisable(false) : setDisable(true)
        setUserId(newId)
    }

    const onPwChange = (newPw:string) => {
        newPw && userPw ? setDisable(false) : setDisable(true)
        setUserPw(newPw)
    }

    const gotoRegister = () => {
        navigation.push('Register')
    }

    const gotoMain = () => {
        navigation.push('Main')
    }

    return (
        <SafeAreaView style={styles.container}>
            <View style={styles.container}>
                <Icon name='taxi' size={80} color={'#3498db'}/>
            </View>
            <View style={styles.container}>
                <TextInput style={styles.input} placeholder={"아이디"}
                onChangeText={onIdChange}/>
                <TextInput style={styles.input} placeholder={"패스워드"}
                secureTextEntry={true}
                onChangeText={onPwChange}/>
            </View>

            <View style={styles.container}>
                <TouchableOpacity style={disable ? styles.buttonDisable : styles.button} disabled={disable} onPress={gotoMain}>
                    <Text style={styles.buttonText}>로그인</Text>
                </TouchableOpacity>
                <TouchableOpacity style={[styles.button, {marginTop:5}]} onPress={gotoRegister}>
                    <Text style={styles.buttonText}>회원가입</Text>
                </TouchableOpacity>
            </View>
            
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        width: '100%'
    },
    button: {
        width: '70%',
        backgroundColor: '#3498db',
        paddingVertical: 10,
        paddingHorizontal: 20,
        borderRadius: 5
    },
    buttonDisable: {
        width: '70%',
        backgroundColor: 'gray',
        paddingVertical: 10,
        paddingHorizontal: 20,
        borderRadius: 5
    },
    buttonText: {
        color: 'white',
        fontSize: 16,
        textAlign: 'center'
    },
    input: {
        width: '70%',
        height: 40,
        borderWidth: 1,
        borderColor: 'gray',
        marginVertical: 10,
        padding: 10
    }
})

export default Login