Skip to content

GitLab

Commit 049713f4 authored by YoonDongMin's avatar YoonDongMin
Browse files

YdM

parent 55abadbf
Show whitespace changes
Inline Side-by-side
App.js
View file @ 049713f4
...@@ -8,16 +8,12 @@ import Monthly from './Monthly'; ...@@ -8,16 +8,12 @@ import Monthly from './Monthly';
import Analy from './Analy'; import Analy from './Analy';
import MoneyDB from './MoneyDB'; import MoneyDB from './MoneyDB';
import DeptPage from './DeptPage'; import DeptPage from './DeptPage';
import InfoForm from './screens/infoForm'; import InfoForm from './screens/InfoForm';
import { SpeedDial } from 'react-native-elements'; import { SpeedDial } from 'react-native-elements';
import { StackRouter } from 'react-navigation';
import InfoDetails from './screens/InfoDetails'; import InfoDetails from './screens/InfoDetails';
import { createStackNavigator } from '@react-navigation/stack'; import { createStackNavigator } from '@react-navigation/stack';
// import HomeStack from './routes/HomeStack'; import MemoPage from './MemoPage';
// import MainScreen from './screens/MainScreen'; import MemoDetails from './screens/MemoDetails';
...@@ -69,12 +65,24 @@ function MainScreen({ navigation }) { ...@@ -69,12 +65,24 @@ function MainScreen({ navigation }) {
onPress={() => navigation.navigate('DeptPage')} onPress={() => navigation.navigate('DeptPage')}
/> />
<SpeedDial.Action <SpeedDial.Action
icon={{ name: 'delete', color: '#fff' }} icon={{ name: 'add', color: '#fff' }}
title="Delete" title="메모"
onPress={() => navigation.navigate('DeptPage')} onPress={() => navigation.navigate('MemoPage')}
/> />
</SpeedDial> </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> </View>
...@@ -87,11 +95,12 @@ function MainScreen({ navigation }) { ...@@ -87,11 +95,12 @@ function MainScreen({ navigation }) {
) )
} }
//Tab과 Stack navigator2개 사용
const Tab = createBottomTabNavigator(); const Tab = createBottomTabNavigator();
const Stack = createStackNavigator(); const Stack = createStackNavigator();
//Tab navigation에 부분을 먼저 Home이라는 함수로 만듦
function Home() { function Home() {
return ( return (
<Tab.Navigator screenOptions={({ route }) => ({ <Tab.Navigator screenOptions={({ route }) => ({
...@@ -123,19 +132,47 @@ function Home() { ...@@ -123,19 +132,47 @@ function Home() {
); );
} }
//항상 App에서 NavigationContainer로 사용할 navigation을 감싸고 있어야함
//아까 만든 Home을 첫번째 component로
function App() { function App() {
return ( return (
<NavigationContainer> <NavigationContainer>
<Stack.Navigator> <Stack.Navigator screenOptions={{
<Stack.Screen name="Home" component={Home} /> headerStyle: {
<Stack.Screen name="DeptPage" component={DeptPage} /> backgroundColor: '#eee'
<Stack.Screen name="InfoDetails" component={InfoDetails} /> },
headerTitleStyle: {
fontWeight: 'bold',
},
headerTitleAlign: 'center'
}} >
<Stack.Screen
name="Home"
component={Home}
options={{ headerShown: false }} />
<Stack.Screen
name="DeptPage"
component={DeptPage}
options={{ title: "부채", headerStyle: { backgroundColor: 'coral' } }} />
<Stack.Screen
name="InfoDetails"
component={InfoDetails}
options={{ title: "상세정보" }} />
<Stack.Screen
name="MemoPage"
component={MemoPage}
options={{ title: "메모", headerStyle: { backgroundColor: 'coral' } }} />
<Stack.Screen
name="MemoDetails"
component={MemoDetails}
options={{ title: "상세내용" }} />
</Stack.Navigator> </Stack.Navigator>
</NavigationContainer> </NavigationContainer>
); );
} }
const style = StyleSheet.create({ const style = StyleSheet.create({
modalToggle: { modalToggle: {
padding: 10, padding: 10,
......
App5.js deleted 100644 → 0
View file @ 55abadbf
import React, {useState} from 'react';
import {StyleSheet, Text, View, FlatList, Alert, TouchableWithoutFeedback, Keyboard} from 'react-native';
import Header from'./components/header';
import TodoItem from './components/todoItem';
import AddTodo from './components/addTodo';
import Sandbox from './components/sandbox';
export default function App5() {
const [todos, setTodos] = useState([
{ text: 'buy coffee', key:'1'},
{ text: 'create an app', key: '2'},
{ text: 'play on the swithch', key: '3'}
]);
const pressHandler = (key) => {
setTodos((prevTodos) => {
return prevTodos.filter(todo => todo.ket != key);
});
}
const submitHandler = (text) => {
if(text.length > 3){
setTodos((prevTodos) => {
return [
{ text: text, key: Math.random().toString() },
...prevTodos
];
});
}else {
Alert.alert('OOPs!' , 'Todos must be over 4 chars long', [
{text: 'Understood', onPress: () => console.log('alert closed')}
]);
}
}
return(
// <Sandbox />
<TouchableWithoutFeedback onPress ={() => {
Keyboard.dismiss();
console.log('dismissed keyboard');
}}>
<View Style = {styles.container}>
<Header/>
<View style = {styles.content}>
<AddTodo submitHandler = {submitHandler} />
<View style = {styles.list}>
<FlatList
data = {todos}
renderItem = {({ item }) => (
<TodoItem item={item} pressHandler = {pressHandler} />
)}
/>
</View>
</View>
</View>
</TouchableWithoutFeedback>
);
}
const styles = StyleSheet.create({
container: {
flex:1,
backgroundColor: '#fff',
},
content: {
padding: 40,
backgroundColor: 'pink',
},
list: {
marginTop: 20,
backgroundColor: 'yellow',
}
});
\ No newline at end of file
DeptPage.js
View file @ 049713f4
import React, { useState } from 'react'; import React, { useState } from 'react';
import { StyleSheet, Text, View, FlatList, TouchableOpacity, Modal, Alert, TouchableWithoutFeedback, Keyboard } from 'react-native'; import { StyleSheet, Text, View, FlatList, TouchableOpacity, Modal, Alert, TouchableWithoutFeedback, Keyboard } from 'react-native';
import Header from './components/header';
import AddTodo from './components/addTodo';
import TodoItem from './components/todoItem'; import TodoItem from './components/todoItem';
import InfoForm from './screens/infoForm'; import InfoForm from './screens/InfoForm';
import { globalStyles } from './styles/global';
import Ionicons from 'react-native-vector-icons/Ionicons'; import Ionicons from 'react-native-vector-icons/Ionicons';
import Infodetails from './screens/InfoDetails' import Infodetails from './screens/InfoDetails'
import ButtonsForm from './components/ButtonsForm'; import ButtonsForm from './components/ButtonsForm';
import StyledButton from './components/StyledButton'; import { TabView } from 'react-native-elements';
import { NavigationContainer } from '@react-navigation/native';
export default function DeptPage({ navigation }) { function DeptPage({ navigation }) {
const [selectedIndex, setSelectedIndex] = useState(0) const [selectedIndex, setSelectedIndex] = useState(0)
const [modallOpen, setModallOpen] = useState(false); const [modallOpen, setModallOpen] = useState(false);
const [todo, setTodo] = useState([
{ date: '7/10', person: 'Mark', money: '100만원', remained_money: '10만원남음', key: '1' },
{ date: '7/10', person: 'John', money: '100만원', remained_money: '10만원남음', key: '2' },
{ date: '7/10', person: 'Steve', money: '100만원', remained_money: '10만원남음', key: '3' }
]);
const [todos, setTodos] = useState([ const [todos, setTodos] = useState([
{ date: '7/10', person: '수빈이', money: '100만원', remaied_money: '10만원남음', key: '1' }, { date: '7/10', person: '수빈이', money: '100만원', remained_money: '10만원남음', key: '1' },
{ date: '7/10', person: '수현이', money: '100만원', remaied_money: '10만원남음', key: '2' }, { date: '7/10', person: '수현이', money: '100만원', remained_money: '10만원남음', key: '2' },
{ date: '7/10', person: '가영이', money: '100만원', remaied_money: '10만원남음', key: '3' } { date: '7/10', person: '가영이', money: '100만원', remained_money: '10만원남음', key: '3' }
]); ]);
const addInfo = (info) => { const addInfo = (info) => {
...@@ -37,58 +38,31 @@ export default function DeptPage({ navigation }) { ...@@ -37,58 +38,31 @@ export default function DeptPage({ navigation }) {
// const [modalOpen, setModalOpen] = useState(false);
// //이 함수로 내용 추가를 함 Addtodo함수에서 이용
// const submitHandler = (text) => {
// //alert를 사용하기위해 조건문 지정
// if (text.length > 3) {
// setTodos((prevTodos) => {
// return [
// { text: text, key: Math.random().toString() },
// ...prevTodos //앞의 todos에 추가하여 내용을 더 추가함
// ];
// });
// } else { //3글자 보다 작으면 alert
// Alert.alert('OOPs!', '3글짜 이상!', [
// { text: 'Understood', onPress: () => console.log('alert closed') }//understood 버튼 누르면 alert꺼짐
// ]);
// }
// }
const insertData = async () => {
try {
if (selectedIndex === 0) { type = '빌려준금액' }
else { type = '빌린금액' }
(await db).transaction((tx) => {
console.log("데이터 삽입하기");
tx.executeSql('INSERT INTO Money (type, date, contents, price, asset_type, category) VALUES (?,?);',
[expense, income],
() => { console.log("삽입 성공"); },
(error) => console.log(error))
})
} catch (error) {
console.log('error in insert data', error)
}
}
return ( return (
<TouchableWithoutFeedback onPress={() => { <TouchableWithoutFeedback onPress={() => {
Keyboard.dismiss(); Keyboard.dismiss();
}}> }}>
<View Style={styles.container}> <View Style={style.container}>
<Header />
<ButtonsForm <ButtonsForm
onPress={(index) => setSelectedIndex(index)} onPress={(index) => setSelectedIndex(index)}
selectedIndex={selectedIndex} selectedIndex={selectedIndex}
group={["빌려준금액", "빌린금액"]} /> group={["빌려준금액", "빌린금액"]} />
<View style={styles.list}> <View>
<View style={{ width: '100%', height: '75%' }}>
<TabView value={selectedIndex} onChange={setSelectedIndex} >
<TabView.Item style={{ width: '100%', height: '100%' }}>
<FlatList
data={todo}
renderItem={({ item }) => (
<TouchableOpacity onPress={() => navigation.navigate('InfoDetails', item)}>
<TodoItem item={item} pressHandler={pressHandler} />
</TouchableOpacity>
)}
/>
</TabView.Item>
<TabView.Item style={{ width: '100%', height: '100%' }}>
<FlatList <FlatList
data={todos} data={todos}
renderItem={({ item }) => ( renderItem={({ item }) => (
...@@ -97,7 +71,17 @@ export default function DeptPage({ navigation }) { ...@@ -97,7 +71,17 @@ export default function DeptPage({ navigation }) {
</TouchableOpacity> </TouchableOpacity>
)} )}
/> />
<View style={styles.content}> </TabView.Item>
</TabView>
</View>
<Ionicons
name='add'
size={24}
style={style.modalToggle} //...은 중괄호를 풀어서 합치려고 이용함
onPress={() => setModallOpen(true)}
/>
</View>
<View>
<Modal visible={modallOpen} animationType='slide'> <Modal visible={modallOpen} animationType='slide'>
<View style={style.modalContent}> <View style={style.modalContent}>
<Ionicons <Ionicons
...@@ -110,50 +94,29 @@ export default function DeptPage({ navigation }) { ...@@ -110,50 +94,29 @@ export default function DeptPage({ navigation }) {
</View> </View>
</Modal> </Modal>
<Ionicons
name='add'
size={24}
style={{ ...style.modalToggle, ...style.modalClose }} //...은 중괄호를 풀어서 합치려고 이용함
onPress={() => setModallOpen(true)}
/>
</View>
</View> </View>
</View> </View>
</TouchableWithoutFeedback> </TouchableWithoutFeedback >
); );
} }
//content는 내용이 추가되면 계속 커진다
const styles = StyleSheet.create({
const style = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
backgroundColor: '#fff', width: '100%',
},
content: {
padding: 40,
}, },
list: {
marginTop: 20, //top에서부터 거리
}
});
const style = StyleSheet.create({
modalToggle: { modalToggle: {
marginBottom: 10,
borderWidth: 1, borderWidth: 1,
borderColor: 'grey', //grey borderColor: 'gray', //gray
padding: 10, padding: 5,
borderRadius: 10, borderRadius: 10,
alignSelf: 'center', //위치를 center로 alignSelf: 'center', //위치를 center로
}, },
modalClose: {
alignSelf: 'center',
alignItems: 'flex-end',
marginTop: 130,
marginBottom: 20,
},
modalContent: { modalContent: {
flex: 1, //이후 유용한 키보드를 추가하려고 ex)dismissing keyboard flex: 1, //이후 유용한 키보드를 추가하려고 ex)dismissing keyboard
}, },
...@@ -168,3 +131,5 @@ const style = StyleSheet.create({ ...@@ -168,3 +131,5 @@ const style = StyleSheet.create({
fontSize: 24 fontSize: 24
} }
}); });
export default DeptPage;
MemoPage.js 0 → 100644
View file @ 049713f4
import React, { useState } from 'react';
import { StyleSheet, Text, View, FlatList, TouchableOpacity, Modal, TouchableWithoutFeedback, Keyboard } from 'react-native';
import TodoItem from './components/todoItem';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { NavigationContainer } from '@react-navigation/native';
import MemoDetails from './screens/MemoDetails';
import MemoForm from './screens/MemoForm';
import ButtonsForm from './components/ButtonsForm';
import { TabView } from 'react-native-elements';
function MemoPage({ navigation }) {
const [selectedIndex, setSelectedIndex] = useState(0)
const [modalOpen, setModalOpen] = useState(false);
const [todo, setTodo] = useState([
{ date: '매달10일', person: '식비', money: '100만원', key: '1' },
{ date: '매달20일', person: '휴대폰요금', money: '100만원', key: '2' },
{ date: '매달24일', person: '생활비', money: '100만원', key: '3' }
]);
const addInfo = (info) => {
info.key = Math.random().toString(); //앞에 key를 받아올수있도록 생성
setTodo((currentInfos) => {
return [info, ...currentInfos]; //새로운 정보와 지금까지 정보를 합친다
});
setModalOpen(false); //modal이 보여지지 않게
}
const pressHandler = (key) => {
setTodo((prevTodos) => {
return prevTodos.filter(todo => todo.key != key);
});
}
const [todos, setTodos] = useState([
{ date: '매달10일', person: '농협', money: '100만원', key: '1' },
{ date: '매달20일', person: '삼성전자', money: '100만원', key: '2' },
{ date: '매달30일', person: '비트코인', money: '100만원', key: '3' }
]);
return (
<TouchableWithoutFeedback onPress={() => {
Keyboard.dismiss();
}}>
<View Style={style.container}>
<ButtonsForm
onPress={(index) => setSelectedIndex(index)}
selectedIndex={selectedIndex}
group={["적금", "생활비"]} />
<View>
<View style={{ width: '100%', height: '75%' }}>
<TabView value={selectedIndex} onChange={setSelectedIndex} >
<TabView.Item style={{ width: '100%', height: '100%' }}>
<FlatList
data={todos}
renderItem={({ item }) => (
<TouchableOpacity onPress={() => navigation.navigate('MemoDetails', item)}>
<TodoItem item={item} pressHandler={pressHandler} />
</TouchableOpacity>
)}
/>
</TabView.Item>
<TabView.Item style={{ width: '100%', height: '100%' }}>
<FlatList
data={todo}
renderItem={({ item }) => (
<TouchableOpacity onPress={() => navigation.navigate('MemoDetails', item)}>
<TodoItem item={item} pressHandler={pressHandler} />
</TouchableOpacity>
)}
/>
</TabView.Item>
</TabView>
</View>
<Ionicons
name='add'
size={24}
style={style.modalToggle} //...은 중괄호를 풀어서 합치려고 이용함
onPress={() => setModalOpen(true)}
/>
</View>
<View>
<Modal visible={modalOpen} animationType='slide'>
<View style={style.modalContent}>
<Ionicons
name='close'
size={24}
style={style.modalToggle}
onPress={() => setModalOpen(false)}
/>
<MemoForm addInfo={addInfo} />
</View>
</Modal>
</View>
</View>
</TouchableWithoutFeedback >
);
}
const style = StyleSheet.create({
container: {
flex: 1,
width: '100%',
},
modalToggle: {
borderWidth: 1,
borderColor: 'gray', //gray
padding: 5,
borderRadius: 10,
alignSelf: 'center', //위치를 center로
},
modalContent: {
flex: 1, //이후 유용한 키보드를 추가하려고 ex)dismissing keyboard
},
TextInput: {
borderColor: 'skyblue',
height: 40,
margin: 12,
borderWidth: 1
},
Font: {
fontSize: 24
}
});
export default MemoPage;
MoneyDB.js
View file @ 049713f4
import SQLite from 'react-native-sqlite-storage'; // import SQLite, { openDatabase } from 'react-native-sqlite-storage';
import { View, Text, StyleSheet } from 'react-native'; import { DEBUG, enablePromise, openDatabase } from 'react-native-sqlite-storage';
import React, { useEffect } from 'react'; import { View, SafeAreaView, Text, StyleSheet, Button, TextInput } from 'react-native';
import React, { useEffect, useState } from 'react';
SQLite.DEBUG(true); DEBUG(true);
SQLite.enablePromise(false); enablePromise(true);
const database_name = "MyMoney.db"; // const database_name = "MyMoney.db";
const database_version = "1.0" // const database_version = "1.0"
const database_displayname = "SQLite Test Database"; // const database_displayname = "SQLite Test Database";
const database_size = 200000; // const database_size = 200000;
let db;
function MoneyDB() { const db = openDatabase({
name: 'MyMoney',
location: 'default',
createFromLocation: '~MyMoney.db',
});
console.log('money db') function MoneyDB() {
const [date, setDate] = useState('2021-01-01')
const [category, setCategory] = useState(2)
const [subcategory, setSubcategory] = useState(2)
const [type, setType] = useState('우리')
const [contents, setContents] = useState('경로')
const [price, setPrice] = useState(1000)
const [assetsId, setAssetsId] = useState()
const [assetsname, setAssetsname] = useState()
const loadAndQueryDB = () => { const populateDatabase = async DB => {
db = SQLite.openDatabase(database_name, database_version, database_displayname, database_size, () => { console.log('load db') }, error => console.log(error.message)); await DB.transaction(getData); // 반드시 (await db)를 해야 프라미스가 성공
};
const loadAndQueryDB = async () => {
try {
console.log('load and db query ....');
await populateDatabase(await db);
} catch (error) {
console.log(error);
}
}; };
useEffect(() => { const getData = async tx => {
loadAndQueryDB() console.log('데이터 가져오기');
try {
const [txn, results] = await tx.executeSql('SELECT * FROM money');
console.log('results: ', results.rows.item(0));
} catch (error) {
console.log('error in getData', error);
}
}
const createTable = async tx => {
console.log('테이블 생성하기');
try {
const [txn, results] = await tx.executeSql('CREATE TABLE IF NOT EXISTS Test(' + 'Money INTEGER);');
console.log("테이블 생성 성공 ");
} catch (error) {
console.log('error in createTable', error);
}
}
}, []) const insertData = async () => {
try {
(await db).transaction((tx) => {
console.log("데이터 삽입하기");
tx.executeSql('INSERT INTO assets_type (assets_id, assets_name) VALUES (?,?);',
[assetsId, assetsname],
() => { console.log("삽입 성공"); },
(error) => console.log(error))
})
} catch (error) {
console.log('error in insertData', error);
}
}
useEffect(() => {
loadAndQueryDB();
}, []);
return ( return (
<> <>
<SafeAreaView>
<View> <View>
<Text>DB</Text> <Text>DB</Text>
<Button title='데이터 가져오기' onPress={() => getData()} />
<Button title='테이블 생성하기' onPress={() => createTable()} />
<TextInput placeholder='assetsId' onChangeText={(assetsId) => setAssetsId(assetsId)} />
<TextInput placeholder='assetsname' onChangeText={(assetsname) => setAssetsname(assetsname)} />
<Button title='데이터 삽입하기' onPress={() => insertData()} />
</View> </View>
</SafeAreaView>
</> </>
) )
} }
export default MoneyDB export default MoneyDB;
\ No newline at end of file
components/InputBox.js 0 → 100644
View file @ 049713f4
import React from 'react';
import { StyleSheet, Text, View, TextInput } from 'react-native';
const InputBox = (props) => {
return (
<View style={style.container}>
<View style={style.inputTitleArea}>
<Text style={style.inputTitle}>{props.inputTitle}</Text>
</View>
<TextInput
underlineColorAndroid="transparent"
placeholder={props.placeholder}
placeholderTextColor="#808080"
keyboardType={props.keyboardType}
onChangeText={props.onChangeText}
returnKeyType={props.returnKeyType}
numberOfLines={props.numberOfLines}
multiline={props.multiline}
onSubmitEditing={props.onSubmitEditing}
style={style.textStyle}
blurOnSubmit={false}
value={props.value}
/>
</View>
);
};
const style = StyleSheet.create({
container: {
flexDirection: 'row',
alignItems: "center",
marginHorizontal: 10,
marginVertical: 3,
borderWidth: 1.5,
borderStyle: "solid",
borderColor: "#1467ff",
borderRadius: 5,
backgroundColor: "#f5f5f5",
},
inputTitleArea: {
flex: 1,
},
inputTitle: {
alignSelf: "center",
color: "#1467ff",
fontSize: 20,
},
textStyle: {
flex: 3,
fontSize: 20,
},
})
export default InputBox
components/addTodo.js deleted 100644 → 0
View file @ 55abadbf
import React, {useState} from 'react';
import {StyleSheet, Text,View, TextInput, Button} from 'react-native'; //추가하기 때문에TextInput, Button을 import 함
export default function AddTodo({submitHandler}) {
const [text, setText] = useState(''); //empty string
const changeHandler = (val) => {
setText(val);
}
return(
<View>
<TextInput
style = {styles.input}
placeholder = '돈 갚아라...' //처음에 나오는 text
onChangeText={changeHandler} //value 받은 것 저장
/>
<Button onPress= {() =>submitHandler(text)} title = '입력' color = 'coral' />
</View>
)
}
const styles = StyleSheet.create({
input: {
marginBottom: 10,
paddingHorizontal: 8,
paddingVertical:6,
borderBottomColor: '#ddd', //light grey
borderBottomWidth: 1
}
})
\ No newline at end of file
components/header.js deleted 100644 → 0
View file @ 55abadbf
import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
export default function Header() {
return(
<View style={styles.header}>
<Text style = {styles.title}>부채</Text>
</View>
)
}
const styles = StyleSheet.create({
header:{
height:80,
paddingTop:38,
backgroundColor: 'coral'
},
title: {
textAlign: 'center',
color: '#fff',
fontSize: 20,
fontWeight: 'bold'
}
});
\ No newline at end of file
components/sandbox.js deleted 100644 → 0
View file @ 55abadbf
import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
export default function Sandbox(){
return (
<View style = {styles.container}>
<Text style = {styles.boxOne}>one</Text>
<Text style = {styles.boxTwo}>two</Text>
<Text style = {styles.boxThree}>three</Text>
<Text style = {styles.boxFour}>four</Text>
</View>
)
}
const styles= StyleSheet.create({
container: {
//flex: 1,
flexDirection: 'row',
justifyContent: 'space-around' ,
alignItems: 'flex-end',
paddingTop: 40,
backgroundColor: '#ddd',
},
boxOne: {
flex:5,
backgroundColor: 'violet',
padding:10,
},
boxTwo: {
flex:1,
backgroundColor: 'gold',
padding:20,
},
boxThree: {
flex:1,
backgroundColor: 'coral',
padding:30,
},
boxFour: {
flex:1,
backgroundColor: 'skyblue',
padding:40,
}
});
\ No newline at end of file
components/todoItem.js
View file @ 049713f4
...@@ -4,7 +4,7 @@ import Ionicons from 'react-native-vector-icons/Ionicons'; ...@@ -4,7 +4,7 @@ import Ionicons from 'react-native-vector-icons/Ionicons';
export default function TodoItem({ item, pressHandler, navigation }) { function TodoItem({ item, pressHandler }) {
return ( return (
<View style={styles.item}> <View style={styles.item}>
<Ionicons name='trash-outline' size={15} color='#333' onPress={() => pressHandler(item.key)} /> <Ionicons name='trash-outline' size={15} color='#333' onPress={() => pressHandler(item.key)} />
...@@ -33,3 +33,5 @@ const styles = StyleSheet.create({ ...@@ -33,3 +33,5 @@ const styles = StyleSheet.create({
marginLeft: 10, marginLeft: 10,
} }
}) })
export default TodoItem;
\ No newline at end of file
index.js
View file @ 049713f4
...@@ -5,5 +5,4 @@ ...@@ -5,5 +5,4 @@
import {AppRegistry} from 'react-native'; import {AppRegistry} from 'react-native';
import App from './App'; import App from './App';
import {name as appName} from './app.json'; import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App); AppRegistry.registerComponent(appName, () => App);
routes/homeStack.js deleted 100644 → 0
View file @ 55abadbf
import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
import DeptPage from '../DeptPage';
import InfoDetails from '../screens/InfoDetails';
import MainScreen from '../screens/MainScreen';
const screens = {
DeptPage: {
screen: DeptPage,
navigationOptions: {
title: 'GameZone',
headerStyle: { backgroundColor: '#eee' }
}
},
InfoDetails: {
screen: InfoDetails,
navigationOptions: {
title: 'Info Details',
headerStyle: { backgroundColor: '#eee' }
}
}
}
const HomeStack = createStackNavigator(screens);
export default createAppContainer(HomeStack);
\ No newline at end of file
screens/InfoDetails.js
View file @ 049713f4
import React from 'react'; import React, { useEffect, useState } from 'react';
import { StyleSheet, View, Text, Button } from 'react-native'; import { StyleSheet, View, Text, Button, Pressable, TouchableWithoutFeedback, Keyboard } from 'react-native';
import { globalStyles } from '../styles/global'; import { globalStyles } from '../styles/global';
import InputBox from '../components/InputBox';
import StyledButton from '../components/StyledButton';
function InfoDetails({ route }) {
const [date, setDate] = useState('')
export default function InfoDetails({ route, navigation }) { const [person, setPerson] = useState('')
const [money, setMoney] = useState('')
const [remained_money, setRemained_money] = useState('')
useEffect(() => {
setDate(route.params?.date)
setPerson(route.params?.person)
setMoney(route.params?.money)
setRemained_money(route.params?.remained_money)
}, [])
return ( return (
<View style={globalStyles.container}> <TouchableWithoutFeedback onPress={() => {
<Text>{route.params?.date}</Text> Keyboard.dismiss();
<Text>{route.params?.person}</Text> }}>
<Text>{route.params?.money}</Text> <View style={{ flex: 1 }}>
<Text>{route.params?.remained_money}</Text> <View>
<InputBox
inputTitle="날짜"
value={date}
onChangeText={
(date) => setDate(date)
}
/>
<InputBox
inputTitle="누구에게"
value={person}
onChangeText={
(person) => setPerson(person)
}
/>
<InputBox
inputTitle="금액"
value={money}
onChangeText={
(money) => setMoney(money)
}
/>
<InputBox
inputTitle="남은 금액"
value={remained_money}
onChangeText={
(remaied_money) => setRemained_money(remained_money)
}
/>
</View> </View>
<View style={style.buttonRow}>
<StyledButton
name="수정"
onPress={() => console.log('수정버튼')}
style={style.submitButton}
/>
<StyledButton
name="저장"
onPress={() => console.log('취소버튼')}
style={style.cancelButton}
/>
</View>
</View>
</TouchableWithoutFeedback>
) )
} }
const style = StyleSheet.create({
buttonRow: {
flexDirection: 'row',
alignItems: "center",
marginHorizontal: 10,
marginVertical: 3,
},
submitButton: {
flex: 1,
height: 50,
},
cancelButton: {
flex: 1,
height: 50,
}
});
export default InfoDetails;
\ No newline at end of file
screens/MemoDetails.js 0 → 100644
View file @ 049713f4
import React, { useState } from 'react';
import { StyleSheet, View, Text, Button, Pressable, TouchableWithoutFeedback, Keyboard } from 'react-native';
import { globalStyles } from '../styles/global';
import InputBox from '../components/InputBox';
import StyledButton from '../components/StyledButton';
function MemoDetails({ route }) {
const [date, setDate] = useState('')
const [person, setPerson] = useState('')
const [money, setMoney] = useState('')
return (
<TouchableWithoutFeedback onPress={() => {
Keyboard.dismiss();
}}>
<View style={{ flex: 1 }}>
<View>
<InputBox
inputTitle="날짜"
placeholder={route.params?.date}
onChangeText={
(date) => setDate(date)
}
/>
<InputBox
inputTitle="내용"
placeholder={route.params?.person}
onChangeText={
(person) => setPerson(person)
}
/>
<InputBox
inputTitle="금액"
placeholder={route.params?.money}
onChangeText={
(money) => setMoney(moeny)
}
/>
</View>
<View style={style.buttonRow}>
<StyledButton
name="수정"
onPress={() => console.log('수정버튼')}
style={style.submitButton}
/>
<StyledButton
name="저장"
onPress={() => console.log('취소버튼')}
style={style.cancelButton}
/>
</View>
</View>
</TouchableWithoutFeedback>
)
}
const style = StyleSheet.create({
buttonRow: {
flexDirection: 'row',
alignItems: "center",
marginHorizontal: 10,
marginVertical: 3,
},
submitButton: {
flex: 1,
height: 50,
},
cancelButton: {
flex: 1,
height: 50,
}
});
export default MemoDetails;
\ No newline at end of file
screens/MemoForm.js 0 → 100644
View file @ 049713f4
import React from 'react';
import { StyleSheet, Button, TextInput, View, Text, TouchableWithoutFeedback, Keyboard } from 'react-native';
import { globalStyles } from '../styles/global.js'
import { Formik } from 'formik';
import * as yup from 'yup';
const ReviewSchema = yup.object({
date: yup.string() //string만 받는다
.required() //아무것도 입력안했하면 안받음
.min(4), //최소4글짜
person: yup.string()
.required()
.min(2),
money: yup.string()
.required(),
})
function MemoForm({ addInfo }) {
return (
<TouchableWithoutFeedback onPress={() => {
Keyboard.dismiss();
}}>
<View style={globalStyles.container} >
<Formik
initialValues={{ date: '', person: '', money: ''}}
validationSchema={ReviewSchema}
onSubmit={(values) => {//위의 4개의 val들을 전달
addInfo(values);
}}
>
{({ handleChange, handleSubmit, values }) => (
<View>
<TextInput
style={globalStyles.input}
placeholder='날짜'
onChangeText={handleChange('date')} //우리가 바꾸려는 val
value={values.date}
/>
<TextInput
style={globalStyles.input}
placeholder='내용'
onChangeText={handleChange('person')}
value={values.person}
/>
<TextInput
style={globalStyles.input}
placeholder='금액'
onChangeText={handleChange('money')}
value={values.money}
keyboardType='numeric'
/>
<Button title='입력' color='maroon' onPress={handleSubmit} />
</View>
)}
</Formik>
</View >
</TouchableWithoutFeedback>
)
}
export default MemoForm;
\ No newline at end of file
screens/about.js deleted 100644 → 0
View file @ 55abadbf
import React from 'react';
import {StyleSheet, View, Text} from 'react-native';
export default function About() {
return (
<View style = {styles.container}>
<Text>About Screen</Text>
</View>
)
}
const styles = StyleSheet.create({
container: (
padding: 24
)
});
\ No newline at end of file
screens/home.js deleted 100644 → 0
View file @ 55abadbf
import React from 'react';
import {StyleSheet, View, Text} from 'react-native';
export default function Home() {
return (
<View style = {styles.container}>
<Text>Home Screen</Text>
</View>
)
}
const styles = StyleSheet.create({
container: (
padding: 24
)
});
\ No newline at end of file
screens/infoForm.js
View file @ 049713f4
import React from 'react'; import React from 'react';
import { StyleSheet, Button, TextInput, View, Text } from 'react-native'; import { StyleSheet, Button, TextInput, View, Text, TouchableWithoutFeedback, Keyboard } from 'react-native';
import { globalStyles } from '../styles/global.js' import { globalStyles } from '../styles/global.js'
import { Formik } from 'formik'; import { Formik } from 'formik';
import * as yup from 'yup'; import * as yup from 'yup';
...@@ -13,7 +13,6 @@ const ReviewSchema = yup.object({ ...@@ -13,7 +13,6 @@ const ReviewSchema = yup.object({
.min(2), .min(2),
money: yup.string() money: yup.string()
.required(), .required(),
remained_money: yup.string() remained_money: yup.string()
.required() .required()
}) })
...@@ -21,8 +20,11 @@ const ReviewSchema = yup.object({ ...@@ -21,8 +20,11 @@ const ReviewSchema = yup.object({
export default function InfoForm({ addInfo }) { function InfoForm({ addInfo }) {
return ( return (
<TouchableWithoutFeedback onPress={() => {
Keyboard.dismiss();
}}>
<View style={globalStyles.container} > <View style={globalStyles.container} >
<Formik <Formik
initialValues={{ date: '', person: '', money: '', remained_money: '' }} initialValues={{ date: '', person: '', money: '', remained_money: '' }}
...@@ -33,45 +35,48 @@ export default function InfoForm({ addInfo }) { ...@@ -33,45 +35,48 @@ export default function InfoForm({ addInfo }) {
}} }}
> >
{(props) => (
{({ handleChange, handleSubmit, values }) => (
<View> <View>
<TextInput <TextInput
style={globalStyles.input} style={globalStyles.input}
placeholder='날짜' placeholder='날짜'
onChangeText={props.handleChange('date')} //우리가 바꾸려는 val onChangeText={handleChange('date')} //우리가 바꾸려는 val
value={props.values.date} value={values.date}
/> />
<TextInput <TextInput
style={globalStyles.input} style={globalStyles.input}
placeholder='누구에게' placeholder='누구에게'
onChangeText={props.handleChange('person')} onChangeText={handleChange('person')}
value={props.values.person} value={values.person}
/> />
<TextInput <TextInput
style={globalStyles.input} style={globalStyles.input}
placeholder='금액' placeholder='금액'
onChangeText={props.handleChange('money')} onChangeText={handleChange('money')}
value={props.values.money} value={values.money}
keyboardType='numeric' keyboardType='numeric'
/> />
<TextInput <TextInput
style={globalStyles.input} style={globalStyles.input}
placeholder='남은 금액' placeholder='남은 금액'
onChangeText={props.handleChange('remained_money')} onChangeText={handleChange('remained_money')}
value={props.values.remained_money} value={values.remained_money}
keyboardType='numeric' keyboardType='numeric'
/> />
<Button title='입력' color='maroon' onPress={props.handleSubmit} /> <Button title='입력' color='maroon' onPress={handleSubmit} />
</View> </View>
)} )}
</Formik> </Formik>
</View > </View >
</TouchableWithoutFeedback>
) )
} }
export default InfoForm;
\ No newline at end of file
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