Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
students
rich-maker
Commits
55abadbf
Commit
55abadbf
authored
Jul 21, 2021
by
YoonDongMin
Browse files
DongM
parent
4664fbfb
Changes
10
Show whitespace changes
Inline
Side-by-side
App.js
View file @
55abadbf
...
...
@@ -8,8 +8,16 @@ import Monthly from './Monthly';
import
Analy
from
'
./Analy
'
;
import
MoneyDB
from
'
./MoneyDB
'
;
import
DeptPage
from
'
./DeptPage
'
;
import
Review
Form
from
'
./screens/
review
Form
'
;
import
Info
Form
from
'
./screens/
info
Form
'
;
import
{
SpeedDial
}
from
'
react-native-elements
'
;
import
{
StackRouter
}
from
'
react-navigation
'
;
import
InfoDetails
from
'
./screens/InfoDetails
'
;
import
{
createStackNavigator
}
from
'
@react-navigation/stack
'
;
// import HomeStack from './routes/HomeStack';
// import MainScreen from './screens/MainScreen';
...
...
@@ -22,15 +30,9 @@ function MainScreen({ navigation }) {
// ]);
const
[
open
,
setOpen
]
=
useState
(
false
)
const
addReview
=
(
review
)
=>
{
review
.
key
=
Math
.
random
().
toString
();
setReviews
((
currentReviews
)
=>
{
return
[
review
,
...
currentReviews
]
});
setModalOpen
(
false
);
}
return
(
<>
<
TouchableWithoutFeedback
onPress
=
{()
=>
{
Keyboard
.
dismiss
();
...
...
@@ -64,54 +66,48 @@ function MainScreen({ navigation }) {
<
SpeedDial
.
Action
icon
=
{{
name
:
'
add
'
,
color
:
'
#fff
'
}}
title
=
"
부채
"
onPress
=
{()
=>
setModalOpen
(
true
)}
onPress
=
{()
=>
navigation
.
navigate
(
'
DeptPage
'
)}
/
>
<
SpeedDial
.
Action
icon
=
{{
name
:
'
delete
'
,
color
:
'
#fff
'
}}
title
=
"
Delete
"
onPress
=
{()
=>
setModalOpen
(
true
)}
onPress
=
{()
=>
navigation
.
navigate
(
'
DeptPage
'
)}
/
>
<
/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
>
<
MoneyDB
/>
<
/View
>
{
/* <MoneyDB /> */
}
<
/TouchableWithoutFeedback
>
<
/
>
)
}
const
Tab
=
createBottomTabNavigator
();
const
Stack
=
createStackNavigator
();
function
App
()
{
function
Home
()
{
return
(
<
NavigationContainer
>
<
Tab
.
Navigator
screenOptions
=
{({
route
})
=>
({
tabBarIcon
:
({
focused
,
color
,
size
})
=>
{
let
iconName
;
if
(
route
.
name
===
'
Main
'
)
{
iconName
=
focused
?
'
home
'
:
'
home-outline
'
;
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
'
;
}
// You can return any component that you like here!
return
<
Ionicons
name
=
{
iconName
}
size
=
{
size
}
color
=
{
color
}
/>
;
},
...
...
@@ -124,23 +120,34 @@ function App() {
<
Tab
.
Screen
name
=
"
Monthly
"
component
=
{
Monthly
}
/
>
<
Tab
.
Screen
name
=
"
Analy
"
component
=
{
Analy
}
/
>
<
/Tab.Navigator
>
<
/NavigationContainer
>
);
}
function
App
()
{
return
(
<
NavigationContainer
>
<
Stack
.
Navigator
>
<
Stack
.
Screen
name
=
"
Home
"
component
=
{
Home
}
/
>
<
Stack
.
Screen
name
=
"
DeptPage
"
component
=
{
DeptPage
}
/
>
<
Stack
.
Screen
name
=
"
InfoDetails
"
component
=
{
InfoDetails
}
/
>
<
/Stack.Navigator
>
<
/NavigationContainer
>
);
}
const
style
=
StyleSheet
.
create
({
modalToggle
:
{
marginBottom
:
10
,
borderWidth
:
1
,
borderColor
:
'
grey
'
,
//grey
padding
:
10
,
borderRadius
:
10
,
alignSelf
:
'
center
'
,
//위치를 center로
alignSelf
:
'
flex-start
'
,
marginTop
:
-
40
,
//위치를 center로
},
modalClose
:
{
marginTop
:
20
,
marginBottom
:
0
,
alignSelf
:
'
center
'
,
alignItems
:
'
flex-start
'
,
marginTop
:
150
,
marginBottom
:
50
,
},
modalContent
:
{
flex
:
1
,
//이후 유용한 키보드를 추가하려고 ex)dismissing keyboard
...
...
DeptPage.js
View file @
55abadbf
import
React
,
{
useState
}
from
'
react
'
;
import
{
StyleSheet
,
Text
,
View
,
FlatList
,
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
TodoItem
from
'
./components/todoItem
'
;
import
AddTodo
from
'
./components/addTodo
'
;
import
Sandbox
from
'
./components/sandbox
'
;
import
TodoItem
from
'
./components/todoItem
'
;
import
InfoForm
from
'
./screens/infoForm
'
;
import
{
globalStyles
}
from
'
./styles/global
'
;
import
Ionicons
from
'
react-native-vector-icons/Ionicons
'
;
import
Infodetails
from
'
./screens/InfoDetails
'
import
ButtonsForm
from
'
./components/ButtonsForm
'
;
import
StyledButton
from
'
./components/StyledButton
'
;
import
{
NavigationContainer
}
from
'
@react-navigation/native
'
;
export
default
function
DeptPage
()
{
export
default
function
DeptPage
({
navigation
})
{
const
[
selectedIndex
,
setSelectedIndex
]
=
useState
(
0
)
const
[
modallOpen
,
setModallOpen
]
=
useState
(
false
);
const
[
todos
,
setTodos
]
=
useState
([
{
text
:
'
buy coffee
'
,
key
:
'
1
'
},
{
text
:
'
create an app
'
,
key
:
'
2
'
},
{
text
:
'
play on the swithch
'
,
key
:
'
3
'
}
{
date
:
'
7/10
'
,
person
:
'
수빈이
'
,
money
:
'
100만원
'
,
remaied_money
:
'
10만원남음
'
,
key
:
'
1
'
},
{
date
:
'
7/10
'
,
person
:
'
수현이
'
,
money
:
'
100만원
'
,
remaied_money
:
'
10만원남음
'
,
key
:
'
2
'
},
{
date
:
'
7/10
'
,
person
:
'
가영이
'
,
money
:
'
100만원
'
,
remaied_money
:
'
10만원남음
'
,
key
:
'
3
'
}
]);
const
addInfo
=
(
info
)
=>
{
info
.
key
=
Math
.
random
().
toString
();
//앞에 key를 받아올수있도록 생성
setTodos
((
currentInfos
)
=>
{
return
[
info
,
...
currentInfos
];
//새로운 정보와 지금까지 정보를 합친다
});
setModallOpen
(
false
);
//modal이 보여지지 않게
}
const
pressHandler
=
(
key
)
=>
{
setTodos
((
prevTodos
)
=>
{
return
prevTodos
.
filter
(
todo
=>
todo
.
key
!=
key
);
});
}
//이 함수로 내용 추가를 함 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 [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
(
// <Sandbox />
<
TouchableWithoutFeedback
onPress
=
{()
=>
{
Keyboard
.
dismiss
();
console
.
log
(
'
dismissed keyboard
'
);
}}
>
<
View
Style
=
{
styles
.
container
}
>
<
Header
/>
<
View
style
=
{
styles
.
content
}
>
<
AddTodo
submitHandler
=
{
submitHandler
}
/
>
<
ButtonsForm
onPress
=
{(
index
)
=>
setSelectedIndex
(
index
)}
selectedIndex
=
{
selectedIndex
}
group
=
{[
"
빌려준금액
"
,
"
빌린금액
"
]}
/
>
<
View
style
=
{
styles
.
list
}
>
<
FlatList
data
=
{
todos
}
renderItem
=
{({
item
})
=>
(
<
TouchableOpacity
onPress
=
{()
=>
navigation
.
navigate
(
'
InfoDetails
'
,
item
)}
>
<
TodoItem
item
=
{
item
}
pressHandler
=
{
pressHandler
}
/
>
<
/TouchableOpacity
>
)}
/
>
<
View
style
=
{
styles
.
content
}
>
<
Modal
visible
=
{
modallOpen
}
animationType
=
'
slide
'
>
<
View
style
=
{
style
.
modalContent
}
>
<
Ionicons
name
=
'
close
'
size
=
{
24
}
style
=
{
style
.
modalToggle
}
onPress
=
{()
=>
setModallOpen
(
false
)}
/
>
<
InfoForm
addInfo
=
{
addInfo
}
/
>
<
/View
>
<
/Modal
>
<
Ionicons
name
=
'
add
'
size
=
{
24
}
style
=
{{
...
style
.
modalToggle
,
...
style
.
modalClose
}}
//...은 중괄호를 풀어서 합치려고 이용함
onPress
=
{()
=>
setModallOpen
(
true
)}
/
>
<
/View
>
<
/View
>
<
/View
>
...
...
@@ -62,6 +124,7 @@ export default function DeptPage() {
}
//content는 내용이 추가되면 계속 커진다
const
styles
=
StyleSheet
.
create
({
container
:
{
...
...
@@ -75,3 +138,33 @@ const styles = StyleSheet.create({
marginTop
:
20
,
//top에서부터 거리
}
});
const
style
=
StyleSheet
.
create
({
modalToggle
:
{
marginBottom
:
10
,
borderWidth
:
1
,
borderColor
:
'
grey
'
,
//grey
padding
:
10
,
borderRadius
:
10
,
alignSelf
:
'
center
'
,
//위치를 center로
},
modalClose
:
{
alignSelf
:
'
center
'
,
alignItems
:
'
flex-end
'
,
marginTop
:
130
,
marginBottom
:
20
,
},
modalContent
:
{
flex
:
1
,
//이후 유용한 키보드를 추가하려고 ex)dismissing keyboard
},
TextInput
:
{
borderColor
:
'
skyblue
'
,
height
:
40
,
margin
:
12
,
borderWidth
:
1
},
Font
:
{
fontSize
:
24
}
});
\ No newline at end of file
components/ButtonsForm.js
0 → 100644
View file @
55abadbf
import
React
from
'
react
'
;
import
{
ButtonGroup
}
from
'
react-native-elements
'
;
import
{
StyleSheet
,
Text
}
from
'
react-native
'
;
const
ButtonsForm
=
(
props
)
=>
{
const
component1
=
()
=>
<
Text
>
{
props
.
group
[
0
]}
<
/Text
>
const
component2
=
()
=>
<
Text
>
{
props
.
group
[
1
]}
<
/Text
>
return
(
<
ButtonGroup
onPress
=
{
props
.
onPress
}
selectedIndex
=
{
props
.
selectedIndex
}
buttons
=
{[{
element
:
component1
},
{
element
:
component2
}]}
containerStyle
=
{
style
.
container
}
selectedButtonStyle
=
{
style
.
selectedButton
}
selectedTextStyle
=
{
style
.
selectedText
}
/
>
);
};
const
style
=
StyleSheet
.
create
({
container
:
{
height
:
50
,
flexDirection
:
'
row
'
,
alignItems
:
"
center
"
,
backgroundColor
:
"
#f5f5f5
"
,
},
text
:
{
color
:
"
#808080
"
,
fontSize
:
24
},
selectedButton
:
{
backgroundColor
:
"
#adadad
"
,
},
selectedText
:
{
color
:
"
#1467ff
"
,
fontWeight
:
"
bold
"
,
},
})
export
default
ButtonsForm
components/StyledButton.js
0 → 100644
View file @
55abadbf
import
React
from
'
react
'
;
import
{
StyleSheet
,
Pressable
,
Text
,
View
}
from
'
react-native
'
;
const
StyledButton
=
(
props
)
=>
{
return
(
<
Pressable
style
=
{({
pressed
})
=>
[
{
backgroundColor
:
pressed
?
'
#437dd9
'
:
'
#4e8ff5
'
,
},
style
.
pressableStyle
,
props
.
style
]}
onPress
=
{
props
.
onPress
}
>
<
Text
style
=
{
style
.
buttonText
}
>
{
props
.
name
}
<
/Text
>
<
/Pressable
>
);
};
const
style
=
StyleSheet
.
create
({
pressableStyle
:
{
alignItems
:
"
center
"
,
justifyContent
:
"
center
"
,
marginRight
:
3
,
borderRadius
:
2
,
},
buttonText
:
{
fontSize
:
20
,
},
})
export
default
StyledButton
components/addTodo.js
View file @
55abadbf
...
...
@@ -13,7 +13,7 @@ export default function AddTodo({submitHandler}) {
<
View
>
<
TextInput
style
=
{
styles
.
input
}
placeholder
=
'
new todo
...
'
//처음에 나오는 text
placeholder
=
'
돈 갚아라
...
'
//처음에 나오는 text
onChangeText
=
{
changeHandler
}
//value 받은 것 저장
/
>
<
Button
onPress
=
{()
=>
submitHandler
(
text
)}
title
=
'
입력
'
color
=
'
coral
'
/>
...
...
components/todoItem.js
View file @
55abadbf
...
...
@@ -2,16 +2,18 @@ import React from 'react';
import
{
StyleSheet
,
Text
,
TouchableOpacity
,
View
}
from
'
react-native
'
;
import
Ionicons
from
'
react-native-vector-icons/Ionicons
'
;
//item은 앞의 text를 받음
export
default
function
TodoItem
({
item
,
pressHandler
})
{
export
default
function
TodoItem
({
item
,
pressHandler
,
navigation
})
{
return
(
<
TouchableOpacity
onPress
=
{()
=>
pressHandler
(
item
.
key
)}
>
<
View
style
=
{
styles
.
item
}
>
<
Ionicons
name
=
'
trash-outline
'
size
=
{
15
}
color
=
'
#333
'
/>
<
Text
style
=
{
styles
.
itemText
}
>
{
item
.
text
}
<
/Text
>
<
Ionicons
name
=
'
trash-outline
'
size
=
{
15
}
color
=
'
#333
'
onPress
=
{()
=>
pressHandler
(
item
.
key
)}
/
>
<
Text
style
=
{
styles
.
itemText
}
>
{
item
.
date
}
<
/Text
>
<
Text
style
=
{
styles
.
itemText
}
>
{
item
.
person
}
<
/Text
>
<
Text
style
=
{
styles
.
itemText
}
>
{
item
.
money
}
<
/Text
>
<
Text
style
=
{
styles
.
itemText
}
>
{
item
.
remained_money
}
<
/Text
>
<
/View
>
<
/TouchableOpacity
>
)
}
...
...
routes/homeStack.js
View file @
55abadbf
import
{
createStackNavigator
}
from
'
react-navigation-stack
'
;
import
{
createAppContainer
}
from
'
react-navigation
'
;
import
Home
from
'
../screens/home
'
;
import
ReviewDetails
from
'
../screens/reviewDetails
'
;
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
=
{
Home
:{
screen
:
Home
DeptPage
:
{
screen
:
DeptPage
,
navigationOptions
:
{
title
:
'
GameZone
'
,
headerStyle
:
{
backgroundColor
:
'
#eee
'
}
}
},
ReviewDetails
:{
screen
:
ReviewDetails
InfoDetails
:
{
screen
:
InfoDetails
,
navigationOptions
:
{
title
:
'
Info Details
'
,
headerStyle
:
{
backgroundColor
:
'
#eee
'
}
}
}
}
...
...
screens/InfoDetails.js
0 → 100644
View file @
55abadbf
import
React
from
'
react
'
;
import
{
StyleSheet
,
View
,
Text
,
Button
}
from
'
react-native
'
;
import
{
globalStyles
}
from
'
../styles/global
'
;
export
default
function
InfoDetails
({
route
,
navigation
})
{
return
(
<
View
style
=
{
globalStyles
.
container
}
>
<
Text
>
{
route
.
params
?.
date
}
<
/Text
>
<
Text
>
{
route
.
params
?.
person
}
<
/Text
>
<
Text
>
{
route
.
params
?.
money
}
<
/Text
>
<
Text
>
{
route
.
params
?.
remained_money
}
<
/Text
>
<
/View
>
)
}
screens/infoForm.js
0 → 100644
View file @
55abadbf
import
React
from
'
react
'
;
import
{
StyleSheet
,
Button
,
TextInput
,
View
,
Text
}
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
(),
remained_money
:
yup
.
string
()
.
required
()
})
export
default
function
InfoForm
({
addInfo
})
{
return
(
<
View
style
=
{
globalStyles
.
container
}
>
<
Formik
initialValues
=
{{
date
:
''
,
person
:
''
,
money
:
''
,
remained_money
:
''
}}
validationSchema
=
{
ReviewSchema
}
onSubmit
=
{(
values
)
=>
{
//위의 4개의 val들을 전달
addInfo
(
values
);
}}
>
{(
props
)
=>
(
<
View
>
<
TextInput
style
=
{
globalStyles
.
input
}
placeholder
=
'
날짜
'
onChangeText
=
{
props
.
handleChange
(
'
date
'
)}
//우리가 바꾸려는 val
value
=
{
props
.
values
.
date
}
/
>
<
TextInput
style
=
{
globalStyles
.
input
}
placeholder
=
'
누구에게
'
onChangeText
=
{
props
.
handleChange
(
'
person
'
)}
value
=
{
props
.
values
.
person
}
/
>
<
TextInput
style
=
{
globalStyles
.
input
}
placeholder
=
'
금액
'
onChangeText
=
{
props
.
handleChange
(
'
money
'
)}
value
=
{
props
.
values
.
money
}
keyboardType
=
'
numeric
'
/>
<
TextInput
style
=
{
globalStyles
.
input
}
placeholder
=
'
남은 금액
'
onChangeText
=
{
props
.
handleChange
(
'
remained_money
'
)}
value
=
{
props
.
values
.
remained_money
}
keyboardType
=
'
numeric
'
/>
<
Button
title
=
'
입력
'
color
=
'
maroon
'
onPress
=
{
props
.
handleSubmit
}
/
>
<
/View
>
)}
<
/Formik
>
<
/View
>
)
}
styles/global.js
View file @
55abadbf
...
...
@@ -14,7 +14,7 @@ export const globalStyles = StyleSheet.create({
marginVertical
:
8
,
lineHeight
:
20
,
},
i
m
put
:
{
i
n
put
:
{
borderWidth
:
1
,
borderColor
:
'
#ddd
'
,
padding
:
10
,
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment