SettingTab.js 3.67 KB
import React, { Component } from 'react';
import { View, Text, StyleSheet, TextInput, TouchableOpacity, Image } from 'react-native';
import AddButton from '../component/AddButton'

var date = new Date();
date.setHours(date.getHours()+9);

export default class SettingTab extends Component {

    constructor(props){
        super(props);
        this.state = {
            ID : 'abcdefg1234'
        }
    }

    delete_id(){
        this.setState({ID: ''})
        //기기연결 해제, 디비비우기
    }
    render() {
        return (
            <View style={style.container}>
                <View style={style.header}>
                    <Text style={style.tabName}>Setting</Text>
                </View>
                <View style={style.content}>
                    <View style={style.id}>
                        <Text style={{marginStart:5, marginBottom: 10, fontSize : 15}}>Lasberry PI ID</Text>
                        <View style={{backgroundColor:'white', height:40,width:'100%',flexDirection:'row', justifyContent:'center', alignItems:'center'}}>
                            <View style={{flex:8}}>
                                <Text style={{marginStart:10, fontSize : 15}}>{this.state.ID}</Text>
                            </View>
                            <View style={{flex:1}}>
                                <Image style={style.img}
                                source={require('../assets/check.jpg')}/>
                            </View>
                        </View>
                        <TouchableOpacity
                            onPress={()=>this.delete_id()}>
                            <View style={{backgroundColor:"#0066cc", height:40,width:'100%',flexDirection:'row', justifyContent:'center', alignItems:'center', marginTop:5,}}>
                                <View style={{flex:8}}>
                                    <Text style={{marginStart:10, fontSize : 15, textAlign:'center'}}>Delete</Text>
                                </View>
                            </View>
                        </TouchableOpacity> 
                    </View>
                    <View style={style.device}>
                        <View style={{backgroundColor:'white', height:40,width:'100%',flexDirection:'row', justifyContent:'center', alignItems:'center'}}>
                            <Text style={{marginStart:10, fontSize : 15}}>Connect New Device</Text>
                        </View>
                        <View style={{backgroundColor:'white', height:40,width:'100%', alignItems:'center', marginTop:5}}>
                            <TextInput style={{marginStart:10}}
                                placeholder="New Rasberry ID"
                                value={this.state.text}
                                onChangeText={(text)=>this.setState({ID:text})}/>
                            <AddButton></AddButton>
                        </View>
                    </View>
                </View>
            </View>
        );
    }
}

const style = StyleSheet.create({
    container: {
        flex: 1,
    },
    header: {
        flex :1,
        justifyContent : 'center',
    },
    tabName:{
        marginStart : 10,
        textAlignVertical : 'center',
        fontSize : 20,
        color : "#0066cc",
        fontWeight: 'bold',
    },
    content:{
        flex : 8.8,
        backgroundColor:"rgba(230,230,230,0.5)",
        justifyContent : 'center',
        padding : 20,
    },
    blank :{
        flex:3,
    },
    id:{
        alignSelf:'center',
        width:'100%',
        justifyContent:'center',
        flex:1,
    },
    device:{
        flex : 1,
    },
    blank :{
        flex:3,
    },
    img:{
        width : 30,
        resizeMode : 'contain',
    }
});