<TIL> 로그인 화면 만들기 - Trello(3)

로그인하지 않은 상태에서 어플리케이션에 들어가면 맨 처음으로 보이는 화면은 총 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 모듈을 작동시켜야 겠습니다.

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