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
4664fbfb
Commit
4664fbfb
authored
Jul 12, 2021
by
YoonDongMin
Browse files
부채
parent
9433e4e0
Changes
6
Show whitespace changes
Inline
Side-by-side
App.js
View file @
4664fbfb
...
...
@@ -7,16 +7,20 @@ import Ionicons from 'react-native-vector-icons/Ionicons';
import
Monthly
from
'
./Monthly
'
;
import
Analy
from
'
./Analy
'
;
import
MoneyDB
from
'
./MoneyDB
'
;
import
DeptPage
from
'
./DeptPage
'
;
import
ReviewForm
from
'
./screens/reviewForm
'
;
import
{
SpeedDial
}
from
'
react-native-elements
'
;
function
MainScreen
({
navigation
})
{
const
[
number
,
onChangeNumber
]
=
React
.
useState
(
null
);
const
[
number
,
onChangeNumber
]
=
useState
(
null
);
const
[
modalOpen
,
setModalOpen
]
=
useState
(
false
);
const
[
reviews
,
setReviews
]
=
useState
([
{
title
:
'
aa
'
,
rating
:
5
,
body
:
'
bb
'
,
key
:
'
1
'
},
]);
// const [reviews, setReviews] = useState([
// { title: 'aa', rating: 5, body: 'bb', key: '1' },
// ]);
const
[
open
,
setOpen
]
=
useState
(
false
)
const
addReview
=
(
review
)
=>
{
review
.
key
=
Math
.
random
().
toString
();
...
...
@@ -50,26 +54,42 @@ function MainScreen({ navigation }) {
title
=
"
월별 페이지로 이동
"
onPress
=
{()
=>
navigation
.
navigate
(
'
Monthly
'
)}
/
>
<
SpeedDial
isOpen
=
{
open
}
icon
=
{{
name
:
'
edit
'
,
color
:
'
#fff
'
}}
//연필모양
openIcon
=
{{
name
:
'
close
'
,
color
:
'
#fff
'
}}
//x모양
onOpen
=
{()
=>
setOpen
(
!
open
)}
onClose
=
{()
=>
setOpen
(
!
open
)}
>
<
SpeedDial
.
Action
icon
=
{{
name
:
'
add
'
,
color
:
'
#fff
'
}}
title
=
"
부채
"
onPress
=
{()
=>
setModalOpen
(
true
)}
/
>
<
SpeedDial
.
Action
icon
=
{{
name
:
'
delete
'
,
color
:
'
#fff
'
}}
title
=
"
Delete
"
onPress
=
{()
=>
setModalOpen
(
true
)}
/
>
<
/SpeedDial
>
<
Modal
visible
=
{
modalOpen
}
animationType
=
'
slide
'
>
<
View
style
=
{
style
.
modalContent
}
>
<
Ionicons
name
=
'
close
'
color
=
'
red
'
size
=
{
24
}
style
=
{{
...
style
.
modalToggle
,
...
style
.
modalClose
}}
style
=
{{
...
style
.
modalToggle
,
...
style
.
modalClose
}}
//...은 중괄호를 풀어서 합치려고 이용함
onPress
=
{()
=>
setModalOpen
(
false
)}
/
>
<
ReviewForm
addReview
=
{
addReview
}
/
>
<
DeptPage
/>
<
/View
>
<
/Modal
>
<
Ionicons
name
=
'
add
'
size
=
{
24
}
style
=
{
style
.
modalToggle
}
onPress
=
{()
=>
setModalOpen
(
true
)}
/
>
<
MoneyDB
/>
<
/View
>
<
/TouchableWithoutFeedback
>
<
/TouchableWithoutFeedback
>
<
/
>
)
}
...
...
@@ -113,18 +133,17 @@ const style = StyleSheet.create({
modalToggle
:
{
marginBottom
:
10
,
borderWidth
:
1
,
borderColor
:
'
#f2f2f2
'
,
borderColor
:
'
grey
'
,
//grey
padding
:
10
,
borderRadius
:
10
,
alignSelf
:
'
center
'
,
alignSelf
:
'
center
'
,
//위치를 center로
},
modalClose
:
{
marginTop
:
20
,
marginBottom
:
0
,
},
modalContent
:
{
flex
:
1
,
flex
:
1
,
//이후 유용한 키보드를 추가하려고 ex)dismissing keyboard
},
TextInput
:
{
...
...
DeptPage.js
0 → 100644
View file @
4664fbfb
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
DeptPage
()
{
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
.
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꺼짐
]);
}
}
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
>
);
}
//content는 내용이 추가되면 계속 커진다
const
styles
=
StyleSheet
.
create
({
container
:
{
flex
:
1
,
backgroundColor
:
'
#fff
'
,
},
content
:
{
padding
:
40
,
},
list
:
{
marginTop
:
20
,
//top에서부터 거리
}
});
\ No newline at end of file
components/addTodo.js
View file @
4664fbfb
import
React
,
{
useState
}
from
'
react
'
;
import
{
StyleSheet
,
Text
,
View
,
TextInput
,
Button
}
from
'
react-native
'
;
import
{
StyleSheet
,
Text
,
View
,
TextInput
,
Button
}
from
'
react-native
'
;
//추가하기 때문에TextInput, Button을 import 함
export
default
function
AddTodo
({
submitHandler
})
{
const
[
text
,
setText
]
=
useState
(
''
);
const
[
text
,
setText
]
=
useState
(
''
);
//empty string
const
changeHandler
=
(
val
)
=>
{
setText
(
val
);
...
...
@@ -12,10 +13,10 @@ export default function AddTodo({submitHandler}) {
<
View
>
<
TextInput
style
=
{
styles
.
input
}
placeholder
=
'
new todo...
'
onChangeText
=
{
changeHandler
}
placeholder
=
'
new todo...
'
//처음에 나오는 text
onChangeText
=
{
changeHandler
}
//value 받은 것 저장
/
>
<
Button
onPress
=
{()
=>
submitHandler
(
text
)}
title
=
'
add todo
'
color
=
'
coral
'
/>
<
Button
onPress
=
{()
=>
submitHandler
(
text
)}
title
=
'
입력
'
color
=
'
coral
'
/>
<
/View
>
)
}
...
...
@@ -25,7 +26,7 @@ const styles = StyleSheet.create({
marginBottom
:
10
,
paddingHorizontal
:
8
,
paddingVertical
:
6
,
borderBottomColor
:
'
#ddd
'
,
borderBottomColor
:
'
#ddd
'
,
//light grey
borderBottomWidth
:
1
}
...
...
components/header.js
View file @
4664fbfb
...
...
@@ -4,7 +4,7 @@ import {StyleSheet, Text, View} from 'react-native';
export
default
function
Header
()
{
return
(
<
View
style
=
{
styles
.
header
}
>
<
Text
style
=
{
styles
.
title
}
>
My
Todos
<
/Text
>
<
Text
style
=
{
styles
.
title
}
>
부채
<
/Text
>
<
/View
>
)
}
...
...
components/todoItem.js
View file @
4664fbfb
import
React
from
'
react
'
;
import
{
StyleSheet
,
Text
,
TouchableOpacity
,
View
}
from
'
react-native
'
;
import
{
StyleSheet
,
Text
,
TouchableOpacity
,
View
}
from
'
react-native
'
;
import
Ionicons
from
'
react-native-vector-icons/Ionicons
'
;
export
default
function
TodoItem
({
item
,
pressHandler
})
{
//item은 앞의 text를 받음
export
default
function
TodoItem
({
item
,
pressHandler
})
{
return
(
<
TouchableOpacity
onPress
=
{()
=>
pressHandler
(
item
.
key
)}
>
return
(
<
TouchableOpacity
onPress
=
{()
=>
pressHandler
(
item
.
key
)}
>
<
View
style
=
{
styles
.
item
}
>
<
MaterialI
cons
name
=
'
delet
e
'
size
=
{
1
8
}
color
=
'
#333
'
/>
<
Text
style
=
{
styles
.
item
}
>
{
item
.
text
}
<
/Text>
<
Ioni
cons
name
=
'
trash-outlin
e
'
size
=
{
1
5
}
color
=
'
#333
'
/>
<
Text
style
=
{
styles
.
item
Text
}
>
{
item
.
text
}
<
/Text
>
<
/View
>
<
/TouchableOpacity
>
)
}
}
const
styles
=
StyleSheet
.
create
({
const
styles
=
StyleSheet
.
create
({
item
:
{
padding
:
16
,
marginTop
:
16
,
borderColor
:
'
#bbb
'
,
borderWidth
:
1
,
padding
:
16
,
marginTop
:
16
,
borderColor
:
'
#bbb
'
,
//light grey
borderWidth
:
1
,
borderStyle
:
'
d
'
,
borderStyle
:
'
dashed
'
,
borderRadius
:
10
borderStyle
:
'
dashed
'
,
//little line
borderRadius
:
10
,
flexDirection
:
'
row
'
//같은 행에 있도록
},
itemText
:
{
marginLeft
:
10
,
}
})
\ No newline at end of file
})
\ No newline at end of file
screens/reviewForm.js
View file @
4664fbfb
...
...
@@ -2,12 +2,30 @@ 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
({
title
:
yup
.
string
()
.
required
()
.
min
(
4
),
body
:
yup
.
string
()
.
required
()
.
min
(
8
),
rating
:
yup
.
string
()
.
required
()
.
test
(
'
is-num-1-5
'
,
'
Rating must be a number 1 -5
'
,
(
val
)
=>
{
return
parseInt
(
val
)
<
6
&&
passInt
(
val
)
>
0
;
})
})
export
default
function
ReviewForm
(
addReview
)
{
return
(
<
View
style
=
{
globalStyles
.
container
}
>
<
View
style
=
{
globalStyles
.
container
}
>
<
Formik
initialValues
=
{{
title
:
''
,
body
:
''
,
rating
:
''
}}
validationSchema
=
{
ReviewSchema
}
onSubmit
=
{(
values
)
=>
{
addReview
(
values
);
...
...
@@ -38,14 +56,15 @@ export default function ReviewForm(addReview) {
placeholder
=
'
Rating (1-5)
'
onChangeText
=
{
props
.
handleChange
(
'
rating
'
)}
value
=
{
props
.
values
.
rating
}
keyboardType
=
'
numeric
'
/>
<
Button
title
=
'
submit
'
color
=
'
maroon
'
onPress
=
{
props
.
handleSubmit
}
/
>
<
Button
title
=
'
submit
'
color
=
'
maroon
'
onPress
=
{
props
.
handleSubmit
}
/
>
<
/View
>
)}
<
/Formik
>
<
/View
>
<
/View
>
)
}
\ No newline at end of file
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