Commit b57c613d authored by Choi Ga Young's avatar Choi Ga Young
Browse files

초기 환경 설정 - DB

parent c7106918
......@@ -35,6 +35,8 @@ node_modules/
npm-debug.log
yarn-error.log
package-lock.json
# BUCK
buck-out/
\.buckd/
......
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
/**
* 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;
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
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
......@@ -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'
}
......
......@@ -7,6 +7,7 @@ buildscript {
compileSdkVersion = 29
targetSdkVersion = 29
ndkVersion = "20.1.5948944"
supportLibVersion = "27.0.0"
}
repositories {
google()
......
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'
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment