Login.js 3.26 KB
import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput, Image} from 'react-native';
import LoginButton from './component/LoginButton';
import  {add_data} from'./component/DBhelper.js';

export default class Login extends Component {

    constructor(props) {
        super(props);
        this.state = {
            ID: '',
        }
    }
    static navigationOptions = {
        title: 'Login',
    };

    getdata() {
        return fetch('http://testloadbalancer-1847561458.ap-northeast-2.elb.amazonaws.com/app/get_data/'+this.state.ID)
         .then((response) => response.json())
         .then((responseJson) => {
           add_data(responseJson);
         })
         .catch((error) => {
           console.error(error);
         });
     }

    navigate(){

    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.header}>
                    <Text
                        style={{textAlign : 'center', fontSize : 50, marginTop:50}}>FW IoT</Text>
                </View>
                <View style={styles.logo}>
                    <Image
                        style = {styles.img}
                        source={require('./assets/logo.png')}/>
                </View>
                <View style={styles.input_div}>
                <View 
                        style={StyleSheet.inputPart}>
                        <Text
                        style={{textAlign:'center',fontSize : 40, marginTop :20}}>Food Waste IoT</Text>
                         <Text
                        style={{textAlign:'center',fontSize : 15, marginTop :20}}>기기 등록</Text>
                        <TextInput
                            style={styles.input}
                            placeholder="ID"
                            placeholderTextColor="#66b3ff"
                            value={this.state.text}
                            onChangeText={(text) => {this.setState({ID:text})}}
                        />
                        <LoginButton
                            onPress={() =>{ this.getdata().then(()=>{this.props.navigation.navigate('MainScreen', { ID: this.state.ID })}) }}
                        />
                    </View>
                </View>
                <View style={styles.footer}>
                    
                </View>
            </View>
        );
    }
}


const styles = StyleSheet.create({
    input: {
        height: 50,
        width: 250,
        fontSize: 20,
        alignSelf: 'center',
        borderColor: "#0066cc",
        borderWidth: 1,
        backgroundColor:"white",
        borderRadius: 10,
        marginTop : 20,
    },
    input_title: {
        textAlign:'center',
        fontSize : 40,
        marginTop :20,
    },
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    header: {
        flex: 2,
        backgroundColor: 'white',
    },
    logo: {
        flex: 4,
        justifyContent: "center",
        alignItems: "center",
    },
    input_div :{
        flex: 4,
        backgroundColor: "rgba(230,230,230,0.5)",
        borderRadius : 20,
         margin:20,

    },
    footer:{
        flex : 1,
    },
    img:{
        width:200,
        resizeMode: 'contain',
        alignSelf :'center',
        marginStart : 30,
    },
});