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';
import Analy from './Analy';
import MoneyDB from './MoneyDB';
import DeptPage from './DeptPage';
import ReviewForm from './screens/reviewForm';
import InfoForm from './screens/infoForm';
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,83 +66,88 @@ 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 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() {
return (
<NavigationContainer>
<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>
<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() {
const [todos, setTodos] = useState([
{ text: 'buy coffee', key: '1' },
{ text: 'create an app', key: '2' },
{ text: 'play on the swithch', key: '3' }
]);
export default function DeptPage({ navigation }) {
const [selectedIndex, setSelectedIndex] = useState(0)
const [modallOpen, setModallOpen] = useState(false);
const [todos, setTodos] = useState([
{ 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) => {
//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} />
<View style={styles.list}>
<FlatList
data={todos}
renderItem={({ item }) => (
<TodoItem item={item} pressHandler={pressHandler} />
)}
/>
</View>
</View>
</View>
</TouchableWithoutFeedback>
);
return (
<TouchableWithoutFeedback onPress={() => {
Keyboard.dismiss();
}}>
<View Style={styles.container}>
<Header />
<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>
</TouchableWithoutFeedback>
);
}
//content는 내용이 추가되면 계속 커진다
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
content: {
padding: 40,
},
list: {
marginTop: 20, //top에서부터 거리
}
container: {
flex: 1,
backgroundColor: '#fff',
},
content: {
padding: 40,
},
list: {
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>
</View>
</TouchableOpacity>
<View style={styles.item}>
<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>
)
}
......
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,
},
imput: {
input: {
borderWidth: 1,
borderColor: '#ddd',
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