초기 환경 설정 - DB

.gitignore

@@ -35,6 +35,8 @@ node_modules/
 npm-debug.log
 yarn-error.log
 
+package-lock.json
+
 # BUCK
 buck-out/
 \.buckd/

Analy.js

+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+const Analy =() =>{
+  return(
+    <View>
+      <Text style={style.Font}>여기는 분석 페이지</Text>
+    </View>
+  )
+}
+const style = StyleSheet.create({
+  Font: {
+    fontSize:24
+  }
+});
+
+export default Analy;
\ No newline at end of file

App.js

-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- * @flow strict-local
- */
+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';
 
-import React from 'react';
-import type {Node} from 'react';
-import {
-  SafeAreaView,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  useColorScheme,
-  View,
-} from 'react-native';
+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 />
+    </> 
+  )
+}
 
-import {
-  Colors,
-  DebugInstructions,
-  Header,
-  LearnMoreLinks,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
+const Tab = createBottomTabNavigator();
 
-const Section = ({children, title}): Node => {
-  const isDarkMode = useColorScheme() === 'dark';
+function App() {
   return (
-    <View style={styles.sectionContainer}>
-      <Text
-        style={[
-          styles.sectionTitle,
-          {
-            color: isDarkMode ? Colors.white : Colors.black,
-          },
-        ]}>
-        {title}
-      </Text>
-      <Text
-        style={[
-          styles.sectionDescription,
-          {
-            color: isDarkMode ? Colors.light : Colors.dark,
-          },
-        ]}>
-        {children}
-      </Text>
-    </View>
-  );
-};
-
-const App: () => Node = () => {
-  const isDarkMode = useColorScheme() === 'dark';
+    <NavigationContainer>
+      <Tab.Navigator screenOptions={({ route }) => ({
+          tabBarIcon: ({ focused, color, size }) => {
+            let iconName;
 
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
+            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';
+            }
 
-  return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
-        <View
-          style={{
-            backgroundColor: isDarkMode ? Colors.black : Colors.white,
-          }}>
-          <Section title="Step One">
-            Edit <Text style={styles.highlight}>App.js</Text> to change this
-            screen and then come back to see your edits.
-          </Section>
-          <Section title="See Your Changes">
-            <ReloadInstructions />
-          </Section>
-          <Section title="Debug">
-            <DebugInstructions />
-          </Section>
-          <Section title="Learn More">
-            Read the docs to discover what to do next:
-          </Section>
-          <LearnMoreLinks />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
+            // 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} />
+        <Tab.Screen name="Analy" component={Analy} />
+      </Tab.Navigator>
+    </NavigationContainer>
   );
-};
+}
 
-const styles = StyleSheet.create({
-  sectionContainer: {
-    marginTop: 32,
-    paddingHorizontal: 24,
-  },
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-  },
-  sectionDescription: {
-    marginTop: 8,
-    fontSize: 18,
-    fontWeight: '400',
-  },
-  highlight: {
-    fontWeight: '700',
+const style = StyleSheet.create({
+  TextInput: {
+    borderColor: 'skyblue',
+    height: 40,
+    margin: 12,
+    borderWidth: 1
   },
+  Font: {
+    fontSize: 24
+  }
 });
-
 export default App;

MoneyDB.js

+import SQLite from 'react-native-sqlite-storage';
+import { View, Text, StyleSheet } from 'react-native';
+import React, { useEffect } from 'react';
+
+SQLite.DEBUG(true);
+SQLite.enablePromise(false);
+
+const database_name = "MyMoney.db";
+const database_version = "1.0"
+const database_displayname = "SQLite Test Database";
+const database_size = 200000;
+let db;
+
+function MoneyDB() {
+
+  console.log('money db')
+
+  const loadAndQueryDB = () => {
+    db = SQLite.openDatabase(database_name, database_version, database_displayname, database_size, () => { console.log('load db') }, error => console.log(error.message));
+    
+  };
+
+  useEffect(() => {
+    loadAndQueryDB()
+
+  }, [])
+
+  return (
+    <>
+      <View>
+        <Text>DB</Text>
+      </View>
+    </>
+  )
+}
+
+
+export default MoneyDB
\ No newline at end of file

Monthly.js

+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+const Montly =() =>{
+  return(
+    <View>
+      <Text style={style.Font}>여기는 월별 페이지</Text>
+      <Text style={style.Font}>달력을 추가할 예정입니다.</Text>
+    </View>
+  )
+}
+const style = StyleSheet.create({
+  Font: {
+    fontSize:24
+  }
+});
+
+export default Montly;
\ No newline at end of file

android/app/build.gradle

@@ -189,7 +189,10 @@ dependencies {
     implementation "com.facebook.react:react-native:+"  // From node_modules
 
     implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
-
+    
+    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
+    implementation project(':react-native-sqlite-storage')
+ 
     debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
       exclude group:'com.facebook.fbjni'
     }

android/build.gradle

@@ -7,6 +7,7 @@ buildscript {
         compileSdkVersion = 29
         targetSdkVersion = 29
         ndkVersion = "20.1.5948944"
+        supportLibVersion = "27.0.0"
     }
     repositories {
         google()

android/settings.gradle

 rootProject.name = 'rich_maker'
+include ':react-native-sqlite-storage'
+project(':react-native-sqlite-storage').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sqlite-storage/src/android')
+
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
+
+
 include ':app'

package.json

@@ -10,8 +10,19 @@
     "lint": "eslint ."
   },
   "dependencies": {
+    "@react-native-community/masked-view": "^0.1.11",
+    "@react-navigation/bottom-tabs": "^5.11.11",
+    "@react-navigation/native": "^5.9.4",
+    "@react-navigation/stack": "^5.14.5",
     "react": "17.0.1",
-    "react-native": "0.64.2"
+    "react-native": "0.64.2",
+    "react-native-elements": "^3.4.2",
+    "react-native-gesture-handler": "^1.10.3",
+    "react-native-reanimated": "^2.2.0",
+    "react-native-safe-area-context": "^3.2.0",
+    "react-native-screens": "^3.4.0",
+    "react-native-sqlite-storage": "^5.0.0",
+    "react-native-vector-icons": "^8.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",