MainScreen.js 3.92 KB
Newer Older
Choi Ga Young's avatar
Choi Ga Young committed
1
import React, {useState} from 'react';
2
3
import { View, Text, TextInput, StyleSheet, Button, Keyboard, TouchableWithoutFeedback, Modal } from 'react-native';
import { SpeedDial } from 'react-native-elements';
Soo Hyun Kim's avatar
Soo Hyun Kim committed
4
import WeeklyCalendar from './components/WeeklyCalendar';
Choi Ga Young's avatar
Choi Ga Young committed
5
6
import Ionicons from 'react-native-vector-icons/Ionicons';
import DeptPage from './DeptPage';
Soo Hyun Kim's avatar
Soo Hyun Kim committed
7
8

function MainScreen({ navigation }) {
9
10
11
12
13
14
15
    const [number, onChangeNumber] = useState(null);
    const [modalOpen, setModalOpen] = useState(false);
    // const [reviews, setReviews] = useState([
    //   { title: 'aa', rating: 5, body: 'bb', key: '1' },
    // ]);
    const [open, setOpen] = useState(false)

Soo Hyun Kim's avatar
Soo Hyun Kim committed
16
17
    return (
        <>
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
            <TouchableWithoutFeedback onPress={() => {
                Keyboard.dismiss();
            }}>
                <View style={{ flex: 1 }}>
                    <WeeklyCalendar />

                    <View >
                        <Text style={style.Font}>여기는 메인 페이지 입니다.</Text>
                        <Text style={style.Font}>아래는 input 테스트를 위한 것입니다.</Text>
                        <TextInput
                            style={style.TextInput}
                            onChangeText={onChangeNumber}
                            keyboardType="numeric"
                        />
                        <Text>입력한 숫자 보기: {number} </Text>
                    </View>

                    <Button
                        title="월별 페이지로 이동"
                        onPress={() => navigation.navigate('Monthly')}
                    />
                    <SpeedDial
                        isOpen={open}
                        icon={{ name: 'edit', color: '#fff' }} //연필모양
                        openIcon={{ name: 'close', color: '#fff' }} //x모양
                        onOpen={() => setOpen(!open)}
                        onClose={() => setOpen(!open)}
                    >
                        <SpeedDial.Action
                            icon={{ name: 'add', color: '#fff' }}
                            title="부채"
                            onPress={() => navigation.navigate('DeptPage')}
                        />
                        <SpeedDial.Action
                            icon={{ name: 'add', color: '#fff' }}
                            title="메모"
                            onPress={() => navigation.navigate('MemoPage')}
                        />

                    </SpeedDial>
                    <Modal visible={modalOpen} animationType='slide'>
                        <View style={style.modalContent}>
                            <Ionicons
                                name='close'
                                color='red'
                                size={24}
                                style={{ ...style.modalToggle, ...style.modalClose }} //...은 중괄호를 풀어서 합치려고 이용함
                                onPress={() => setModalOpen(false)}
                            />
                            <DeptPage />
                        </View>
                    </Modal>

                </View>
            </TouchableWithoutFeedback>
Soo Hyun Kim's avatar
Soo Hyun Kim committed
73
74
75
76
        </>
    )
}

77

Soo Hyun Kim's avatar
Soo Hyun Kim committed
78
79
80
81
82
83
84
85
const style = StyleSheet.create({
    TextInput: {
        borderColor: 'skyblue',
        height: 40,
        margin: 12,
        borderWidth: 1
    },
    Font: {
YoonDongMin's avatar
YDm    
YoonDongMin committed
86
        fontFamily : 'Jua-Regular',
Soo Hyun Kim's avatar
Soo Hyun Kim committed
87
        fontSize: 24
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
    },
    modalToggle: {

        padding: 10,
        borderRadius: 10,
        alignSelf: 'flex-start',
        marginTop: -40, //위치를 center로
    },
    modalClose: {
        alignSelf: 'center',
        alignItems: 'flex-start',
        marginTop: 150,
        marginBottom: 50,
    },
    modalContent: {
        flex: 1, //이후 유용한 키보드를 추가하려고 ex)dismissing keyboard
    },
    Contents: {
        justifyContent: "center",
        alignItems: "center",
        margin: 10
Soo Hyun Kim's avatar
Soo Hyun Kim committed
109
110
111
112
    }
});

export default MainScreen;