2019년 7월 10일 모각코 결과

팀원 주소

오지원 : https://mgk-jiwon.postype.com/post/4162859

2019.07.10 모각코 3회차 모임 (NullPointerException)

강서연 : https://blog.naver.com/rose_7297/221582383728

2019.07.10 모각코 3회차_목표

로그인 화면을 만들었다.

우선 expo로 프로젝트를 만들고 react native를 사용해서 앱을 만들었다.

 

import React, { Component } from 'react';

import { Alert, Button, TextInput, View, StyleSheet } from 'react-native';

 

export default class App extends Component {

constructor(props) {

super(props);

 

this.state = {

username: '',

password: '',

};

}

 

onLogin() {

const { username, password } = this.state;

 

Alert.alert('Login Success!');

}

 

render() {

return (

<View style={styles.container}>

<TextInput

value={this.state.username}

onChangeText={(username) => this.setState({ username })}

placeholder={'Username'}

style={styles.input}

/>

<TextInput

value={this.state.password}

onChangeText={(password) => this.setState({ password })}

placeholder={'Password'}

secureTextEntry={true}

style={styles.input}

/>

 

<Button

title={'Login'}

style={styles.input}

onPress={this.onLogin.bind(this)}

/>

</View>

);

}

}

 

const styles = StyleSheet.create({

container: {

flex: 1,

alignItems: 'center',

justifyContent: 'center',

backgroundColor: '#ecf0f1',

},

input: {

width: 200,

height: 44,

padding: 10,

borderWidth: 1,

borderColor: 'black',

marginBottom: 10,

},

});