ABOUT ME

참고용으로 봐주세요

Today
Yesterday
Total
  • <TIL> 로그인 화면 만들기 - Trello(3)
    카테고리 없음 2020. 3. 16. 22:00

    로그인하지 않은 상태에서 어플리케이션에 들어가면 맨 처음으로 보이는 화면은 총 3개 입니다.

     

    • 로그인 , 회원가입 페이지를 분기 처리하는 처음화면

    • 로그인 화면

    • 회원가입 화면

    가운데. 못 맞췄다..

    1. 첫 화면

    맨 상단에 이름

    밑에는 로그인 화면 이동 버튼과 회원 가입 이동 버튼이 필요합니다.

     

    각자 다른 component를 이루고 있기 때문에 App .js에서 router를 구현하였습니다.

    import React, { Component } from 'react';
    import 'react-native-gesture-handler';
    import { NavigationContainer } from '@react-navigation/native';
    import { createStackNavigator } from '@react-navigation/stack';
    import { createDrawerNavigator } from '@react-navigation/drawer';
    import Login from './components/FirstPages/LoginPage';
    import Signup from './components/FirstPages/SignupPage';
    import First from './components/FirstPages/FirstPage';
    
    
    const Stack = createStackNavigator();
    const Drawer = createDrawerNavigator();
    
    
    export default class App extends Component {
      constructor() {
        super();
      }
    
      render() {
        return (
          <NavigationContainer>
              <Stack.Navigator screenOptions={{
                headerShown: false,
              }}>
                  <Stack.Screen name="First Screen" component={First} />
                  <Stack.Screen name="Signup Screen" component={Signup} />
                  <Stack.Screen name="Login Screen" component={Login} />
              </Stack.Navigator>
            )}
          </NavigationContainer>
        );
      }
    }

    첫 화면 같은 경우에는 header가 필요 없기 때문에 screenOptions에 headerShoen은 false로 줘서 감추었습니다

     

    2. First Screen 구성 하기

    import React from 'react';
    import { View, Text, StyleSheet } from 'react-native';
    import { Button } from 'react-native-elements';
    
    function FirstPage({ navigation }) {
      return (
        <View style={styles.total}>
          <View style={styles.AppName}>
            <Text style={{ fontSize: 50 }}>
                HELLO
                Trello!
            </Text>
          </View>
          <View style={styles.Buttons}>
            <Button
              type="OutLine"
              title="로그인"
              containerStyle={{ width: 110, height: 45, margin: 10 }}
              titleStyle={{ fontSize: 25 }}
              onPress={() => navigation.navigate('Login Screen')}
              />
            <Button
              type="OutLine"
              title="회원가입"
              containerStyle={{ width: 110, height: 45, margin: 10 }}
              titleStyle={{ fontSize: 25 }}
              onPress={() => navigation.navigate('Signup Screen')}
              />
          </View>
        </View>
      );
    }
    
    const styles = StyleSheet.create({
      total: {
        flex: 1,
      },
      AppName: {
        flex: 4,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'green',
      },
      Buttons: {
        flex: 4.5,
        backgroundColor: 'yellow',
        alignItems: 'center',
        justifyContent: 'center',
      },
    });
    export default FirstPage;
    

    props로 받는 것 중에서 navigation만 받도록 하였습니다.

    버튼을 누르면 콜백 함수 작동하여 지정한 페이지로 이동합니다.

     

    style에서 background에 색을 넣은 이유는 flex로 화면 구성을 할 때 명확하게 보이기 때문입니다.

     

    버튼은 react-native에서 제공해주는 버튼은 별로 이쁘지 않고 원하는 스타일로 변경을 할 수 없기 때문에 그나마 이쁜 react-native-elements에서 제공해주는 기본 button을 사용하였습니다.

     

    3. 로그인, 회원가입 페이지 간단히 구현

    import React, { Component } from 'react';
    import { View, Text, StyleSheet } from 'react-native';
    import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
    import { Sae } from 'react-native-textinput-effects';
    
    class Login extends Component {
      constructor() {
        super();
        this.state = {
          name: null,
          email: null,
        };
      }
    
      render() {
        return (
          <View style={styles.total}>
            <View style={styles.AppName}>
              <Text style={{ fontSize: 50 }}>
                Hi!
              </Text>
            </View>
            <View style={styles.Inputs}>
              <Sae
              label="Email"
              iconClass={FontAwesomeIcon}
              iconName="pencil"
              iconColor="white"
              inputPadding={16}
              labelHeight={24}
              borderHeight={2}
              autoCapitalize="none"
              autoCorrect={false}
              />
              <Sae
              label="Password"
              iconClass={FontAwesomeIcon}
              iconName="pencil"
              iconColor="white"
              inputPadding={16}
              labelHeight={24}
              borderHeight={2}
              autoCapitalize="none"
              autoCorrect={false}
              />
            </View>
          </View>
        );
      }
    }
    const styles = StyleSheet.create({
      total: {
        flex: 1,
        backgroundColor: 'red',
      },
      AppName: {
        flex: 4,
        backgroundColor: 'green',
        alignItems: 'center',
        justifyContent: 'center',
      },
      Inputs: {
        flex: 5,
        backgroundColor: 'blue',
        alignItems: 'center',
        justifyContent: 'center',
      },
    });
    export default Login;
    

    react-native-textinput-effects에서 제공해주는 모듈을 사용하는 것이 textInput으로 열심히 꾸미는 것보다 훨씬 이쁜 것 같아서 사용하려고 기본 예제를 긁어와서 사용하였습니다.

    (아직 화면애 뜨지 않습니다.)

     

    로그인 페이지와 회원 가입 페이지는 서로 코드가 비슷 하여 signupPage의 코드는 생략하도록 하겠습니다.

     

    내일 할 것  : 아직 뜨지 않는 react-native-textinput-effects 모듈을 작동시켜야 겠습니다.

    라우터 부분에 다른 것을 추가 할 예정입니다.

    댓글

Designed by Tistory.