0724 주간 캘린더 설치

App.js

@@ -6,30 +6,7 @@ import Ionicons from 'react-native-vector-icons/Ionicons';
 import Monthly from './Monthly';
 import Analy from './Analy';
 import PostMoney from './PostMoney';
-import InsertCat from './InsertCat';
-
-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')}
-      />
-      <InsertCat />
-    </> 
-  )
-}
+import MainScreen from './MainScreen';
 
 const Tab = createBottomTabNavigator();
 
@@ -66,15 +43,4 @@ function App() {
   );
 }
 
-const style = StyleSheet.create({
-  TextInput: {
-    borderColor: 'skyblue',
-    height: 40,
-    margin: 12,
-    borderWidth: 1
-  },
-  Font: {
-    fontSize: 24
-  }
-});
 export default App;

MainScreen.js

+import React from 'react';
+import { View, Text, TextInput, StyleSheet, Button } from 'react-native';
+import WeeklyCalendar from './components/WeeklyCalendar';
+import InsertCat from './InsertCat';
+
+function MainScreen({ navigation }) {
+    const [number, onChangeNumber] = React.useState(null);
+    return (
+        <>
+            <View>
+                <WeeklyCalendar />
+                <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')}
+            />
+            <InsertCat />
+        </>
+    )
+}
+
+const style = StyleSheet.create({
+    TextInput: {
+        borderColor: 'skyblue',
+        height: 40,
+        margin: 12,
+        borderWidth: 1
+    },
+    Font: {
+        fontSize: 24
+    }
+});
+
+export default MainScreen;
\ No newline at end of file

components/WeeklyCalendar.js

+import React, { Component } from 'react';
+import { View, Text, Button, StyleSheet } from 'react-native';
+import CalendarStrip from 'react-native-calendar-strip';
+// import moment from 'moment';
+
+const WeeklyCalendar = (props) => {
+
+
+    return (
+        <View>
+            <CalendarStrip
+                scrollable
+                calendarAnimation={{ type: 'sequence', duration: 30 }}
+                daySelectionAnimation={{ type: 'background', duration: 300, highlightColor: '#9265DC' }}
+                style={{ height: 200, paddingTop: 20, paddingBottom: 10 }}
+                calendarHeaderStyle={{ color: 'white' }}
+                calendarColor={'#3343CE'}
+                dateNumberStyle={{ color: 'white' }}
+                dateNameStyle={{ color: 'white' }}
+                iconContainer={{ flex: 0.1 }}
+                // customDatesStyles={this.state.customDatesStyles}
+                highlightDateNameStyle={{ color: 'white' }}
+                highlightDateNumberStyle={{ color: 'yellow' }}
+                highlightDateContainerStyle={{ backgroundColor: 'black' }}
+                // markedDates={this.state.markedDates}
+                // datesBlacklist={this.datesBlacklistFunc}
+                // selectedDate={this.state.selectedDate}
+                // onDateSelected={this.onDateSelected}
+                useIsoWeekday={false}
+            />
+        </View>
+    );
+};
+
+const style = StyleSheet.create({
+    container: {
+        height: 54,
+        flexDirection: 'row',
+        alignItems: "center",
+        marginHorizontal: 10,
+        marginVertical: 3,
+        borderWidth: 1.5,
+        borderStyle: "solid",
+        borderColor: "#1467ff",
+        borderRadius: 5,
+        backgroundColor: "#f5f5f5",
+    },
+})
+
+export default WeeklyCalendar
\ No newline at end of file

db/postMoney.api.js

 import { DEBUG, enablePromise } from 'react-native-sqlite-storage';
-import getDb from './MoneyDB'
+import getDb from './moneyDB'
 
 DEBUG(true);
 enablePromise(true);

package.json

@@ -17,6 +17,8 @@
     "@react-navigation/stack": "^5.14.5",
     "react": "17.0.1",
     "react-native": "0.64.2",
+    "react-native-calendar-strip": "^2.2.4",
+    "react-native-chart-kit": "^6.11.0",
     "react-native-elements": "^3.4.2",
     "react-native-gesture-handler": "^1.10.3",
     "react-native-modal-datetime-picker": "^10.0.0",
@@ -24,6 +26,7 @@
     "react-native-safe-area-context": "^3.2.0",
     "react-native-screens": "^3.4.0",
     "react-native-sqlite-storage": "^5.0.0",
+    "react-native-svg": "^12.1.1",
     "react-native-vector-icons": "^8.1.0"
   },
   "devDependencies": {