-
<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 모듈을 작동시켜야 겠습니다.
라우터 부분에 다른 것을 추가 할 예정입니다.
-