Skip to content

GitLab

Commit 55abadbf authored by YoonDongMin's avatar YoonDongMin
Browse files

DongM

parent 4664fbfb
Hide whitespace changes
Inline Side-by-side
App.js
View file @ 55abadbf
...@@ -8,8 +8,16 @@ import Monthly from './Monthly'; ...@@ -8,8 +8,16 @@ 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 ReviewForm from './screens/reviewForm'; 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 { createStackNavigator } from '@react-navigation/stack';
// import HomeStack from './routes/HomeStack';
// import MainScreen from './screens/MainScreen';
...@@ -22,15 +30,9 @@ function MainScreen({ navigation }) { ...@@ -22,15 +30,9 @@ function MainScreen({ navigation }) {
// ]); // ]);
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
const addReview = (review) => {
review.key = Math.random().toString();
setReviews((currentReviews) => {
return [review, ...currentReviews]
});
setModalOpen(false);
}
return ( return (
<> <>
<TouchableWithoutFeedback onPress={() => { <TouchableWithoutFeedback onPress={() => {
Keyboard.dismiss(); Keyboard.dismiss();
...@@ -64,83 +66,88 @@ function MainScreen({ navigation }) { ...@@ -64,83 +66,88 @@ function MainScreen({ navigation }) {
<SpeedDial.Action <SpeedDial.Action
icon={{ name: 'add', color: '#fff' }} icon={{ name: 'add', color: '#fff' }}
title="부채" title="부채"
onPress={() => setModalOpen(true)} onPress={() => navigation.navigate('DeptPage')}
/> />
<SpeedDial.Action <SpeedDial.Action
icon={{ name: 'delete', color: '#fff' }} icon={{ name: 'delete', color: '#fff' }}
title="Delete" title="Delete"
onPress={() => setModalOpen(true)} onPress={() => navigation.navigate('DeptPage')}
/> />
</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>
<MoneyDB />
</View> </View>
{/* <MoneyDB /> */}
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
</> </>
) )
} }
const Tab = createBottomTabNavigator(); const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();
function Home() {
return (
<Tab.Navigator screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
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';
}
// 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>
);
}
function App() { function App() {
return ( return (
<NavigationContainer> <NavigationContainer>
<Tab.Navigator screenOptions={({ route }) => ({ <Stack.Navigator>
tabBarIcon: ({ focused, color, size }) => { <Stack.Screen name="Home" component={Home} />
let iconName; <Stack.Screen name="DeptPage" component={DeptPage} />
<Stack.Screen name="InfoDetails" component={InfoDetails} />
if (route.name === 'Main') { </Stack.Navigator>
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} />;
},
})}
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> </NavigationContainer>
); );
} }
const style = StyleSheet.create({ const style = StyleSheet.create({
modalToggle: { modalToggle: {
marginBottom: 10,
borderWidth: 1,
borderColor: 'grey', //grey
padding: 10, padding: 10,
borderRadius: 10, borderRadius: 10,
alignSelf: 'center', //위치를 center로 alignSelf: 'flex-start',
marginTop: -40, //위치를 center로
}, },
modalClose: { modalClose: {
marginTop: 20, alignSelf: 'center',
marginBottom: 0, alignItems: 'flex-start',
marginTop: 150,
marginBottom: 50,
}, },
modalContent: { modalContent: {
flex: 1, //이후 유용한 키보드를 추가하려고 ex)dismissing keyboard flex: 1, //이후 유용한 키보드를 추가하려고 ex)dismissing keyboard
......
DeptPage.js
View file @ 55abadbf
import React, { useState } from 'react'; 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 Header from './components/header';
import TodoItem from './components/todoItem';
import AddTodo from './components/addTodo'; 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 [todos, setTodos] = useState([ const [selectedIndex, setSelectedIndex] = useState(0)
{ text: 'buy coffee', key: '1' }, const [modallOpen, setModallOpen] = useState(false);
{ text: 'create an app', key: '2' }, const [todos, setTodos] = useState([
{ 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);
});
}
const pressHandler = (key) => {
setTodos((prevTodos) => {
return prevTodos.filter(todo => todo.key != key);
});
}
//이 함수로 내용 추가를 함 Addtodo함수에서 이용
const submitHandler = (text) => { // const [modalOpen, setModalOpen] = useState(false);
//alert를 사용하기위해 조건문 지정 // //이 함수로 내용 추가를 함 Addtodo함수에서 이용
if (text.length > 3) { // const submitHandler = (text) => {
setTodos((prevTodos) => { // //alert를 사용하기위해 조건문 지정
return [ // if (text.length > 3) {
{ text: text, key: Math.random().toString() }, // setTodos((prevTodos) => {
...prevTodos //앞의 todos에 추가하여 내용을 더 추가함 // 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꺼짐 // } 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 (
// <Sandbox />
<TouchableWithoutFeedback onPress={() => {
Keyboard.dismiss();
console.log('dismissed keyboard'); <TouchableWithoutFeedback onPress={() => {
}}> Keyboard.dismiss();
}}>
<View Style={styles.container}> <View Style={styles.container}>
<Header /> <Header />
<View style={styles.content}> <ButtonsForm
<AddTodo submitHandler={submitHandler} /> onPress={(index) => setSelectedIndex(index)}
<View style={styles.list}> selectedIndex={selectedIndex}
<FlatList group={["빌려준금액", "빌린금액"]} />
data={todos}
renderItem={({ item }) => ( <View style={styles.list}>
<TodoItem item={item} pressHandler={pressHandler} /> <FlatList
)} data={todos}
/> renderItem={({ item }) => (
</View> <TouchableOpacity onPress={() => navigation.navigate('InfoDetails', item)}>
</View> <TodoItem item={item} pressHandler={pressHandler} />
</View> </TouchableOpacity>
</TouchableWithoutFeedback> )}
); />
<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>
</TouchableWithoutFeedback>
);
} }
//content는 내용이 추가되면 계속 커진다 //content는 내용이 추가되면 계속 커진다
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
backgroundColor: '#fff', backgroundColor: '#fff',
}, },
content: { content: {
padding: 40, padding: 40,
}, },
list: { list: {
marginTop: 20, //top에서부터 거리 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}) { ...@@ -13,7 +13,7 @@ export default function AddTodo({submitHandler}) {
<View> <View>
<TextInput <TextInput
style = {styles.input} style = {styles.input}
placeholder = 'new todo...' //처음에 나오는 text placeholder = '돈 갚아라...' //처음에 나오는 text
onChangeText={changeHandler} //value 받은 것 저장 onChangeText={changeHandler} //value 받은 것 저장
/> />
<Button onPress= {() =>submitHandler(text)} title = '입력' color = 'coral' /> <Button onPress= {() =>submitHandler(text)} title = '입력' color = 'coral' />
......
components/todoItem.js
View file @ 55abadbf
...@@ -2,16 +2,18 @@ import React from 'react'; ...@@ -2,16 +2,18 @@ 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'; import Ionicons from 'react-native-vector-icons/Ionicons';
//item은 앞의 text를 받음
export default function TodoItem({ item, pressHandler }) {
export default function TodoItem({ item, pressHandler, navigation }) {
return ( return (
<TouchableOpacity onPress={() => pressHandler(item.key)}> <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' /> <Text style={styles.itemText}>{item.date}</Text>
<Text style={styles.itemText}>{item.text}</Text> <Text style={styles.itemText}>{item.person}</Text>
</View> <Text style={styles.itemText}>{item.money}</Text>
</TouchableOpacity> <Text style={styles.itemText}>{item.remained_money}</Text>
</View>
) )
} }
......
routes/homeStack.js
View file @ 55abadbf
import {createStackNavigator} from 'react-navigation-stack'; import { createStackNavigator } from 'react-navigation-stack';
import {createAppContainer} from 'react-navigation'; import { createAppContainer } from 'react-navigation';
import Home from '../screens/home'; import DeptPage from '../DeptPage';
import ReviewDetails from '../screens/reviewDetails'; import InfoDetails from '../screens/InfoDetails';
import MainScreen from '../screens/MainScreen';
const screens = { const screens = {
Home:{
screen:Home DeptPage: {
screen: DeptPage,
navigationOptions: {
title: 'GameZone',
headerStyle: { backgroundColor: '#eee' }
}
}, },
ReviewDetails:{ InfoDetails: {
screen: ReviewDetails 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({ ...@@ -14,7 +14,7 @@ export const globalStyles = StyleSheet.create({
marginVertical: 8, marginVertical: 8,
lineHeight:20, lineHeight:20,
}, },
imput: { input: {
borderWidth: 1, borderWidth: 1,
borderColor: '#ddd', borderColor: '#ddd',
padding: 10, padding: 10,
......
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