App.js 2.31 KB
Newer Older
Choi Ga Young's avatar
Choi Ga Young committed
1
2
3
4
5
6
7
8
import * as React from 'react';
import { StyleSheet, View, Text, TextInput, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';
import Monthly from './Monthly';
import Analy from './Analy';
import MoneyDB from './MoneyDB';
Test User's avatar
Test User committed
9

Choi Ga Young's avatar
Choi Ga Young committed
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function MainScreen({ navigation }) {
  const [number, onChangeNumber] = React.useState(null);
  return (
    <>
      <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')}
      /> 
      <MoneyDB />
    </> 
  )
}
Test User's avatar
Test User committed
32

Choi Ga Young's avatar
Choi Ga Young committed
33
const Tab = createBottomTabNavigator();
Test User's avatar
Test User committed
34

Choi Ga Young's avatar
Choi Ga Young committed
35
function App() {
Test User's avatar
Test User committed
36
  return (
Choi Ga Young's avatar
Choi Ga Young committed
37
38
39
40
    <NavigationContainer>
      <Tab.Navigator screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;
Test User's avatar
Test User committed
41

Choi Ga Young's avatar
Choi Ga Young committed
42
43
44
45
46
47
48
49
50
            if (route.name === 'Main') {
              iconName = focused
                ? 'home'
                : 'home-outline';
            } else if (route.name === 'Monthly') {
              iconName = focused ? 'calendar' : 'calendar-outline';
            } else if (route.name === 'Analy') {
              iconName = focused ? 'bar-chart':'bar-chart-outline';
            }
Test User's avatar
Test User committed
51

Choi Ga Young's avatar
Choi Ga Young committed
52
53
54
55
56
57
58
59
60
61
            // You can return any component that you like here!
            return <Ionicons name={iconName} size={size} color={color} />;
          },
        })}
        tabBarOptions={{
          activeTintColor: 'tomato',
          inactiveTintColor: 'gray',
        }}>
        <Tab.Screen name="Main" component={MainScreen} />
        <Tab.Screen name="Monthly" component={Monthly} />
Soo Hyun Kim's avatar
Soo Hyun Kim committed
62
        <Tab.Screen name="Analy" component={MoneyDB} />
Choi Ga Young's avatar
Choi Ga Young committed
63
64
      </Tab.Navigator>
    </NavigationContainer>
Test User's avatar
Test User committed
65
  );
Choi Ga Young's avatar
Choi Ga Young committed
66
}
Test User's avatar
Test User committed
67

Choi Ga Young's avatar
Choi Ga Young committed
68
69
70
71
72
73
const style = StyleSheet.create({
  TextInput: {
    borderColor: 'skyblue',
    height: 40,
    margin: 12,
    borderWidth: 1
Test User's avatar
Test User committed
74
  },
Choi Ga Young's avatar
Choi Ga Young committed
75
76
77
  Font: {
    fontSize: 24
  }
Test User's avatar
Test User committed
78
79
});
export default App;