Commit 57b56ce4 authored by Soo Hyun Kim's avatar Soo Hyun Kim
Browse files

0709 money 입력 페이지 스테이트 생성

parent 8b295393
...@@ -6,6 +6,7 @@ import Ionicons from 'react-native-vector-icons/Ionicons'; ...@@ -6,6 +6,7 @@ import Ionicons from 'react-native-vector-icons/Ionicons';
import Monthly from './Monthly'; import Monthly from './Monthly';
import Analy from './Analy'; import Analy from './Analy';
import MoneyDB from './MoneyDB'; import MoneyDB from './MoneyDB';
import PostMoney from './PostMoney';
function MainScreen({ navigation }) { function MainScreen({ navigation }) {
const [number, onChangeNumber] = React.useState(null); const [number, onChangeNumber] = React.useState(null);
...@@ -59,7 +60,7 @@ function App() { ...@@ -59,7 +60,7 @@ function App() {
}}> }}>
<Tab.Screen name="Main" component={MainScreen} /> <Tab.Screen name="Main" component={MainScreen} />
<Tab.Screen name="Monthly" component={Monthly} /> <Tab.Screen name="Monthly" component={Monthly} />
<Tab.Screen name="Analy" component={MoneyDB} /> <Tab.Screen name="Analy" component={PostMoney} />
</Tab.Navigator> </Tab.Navigator>
</NavigationContainer> </NavigationContainer>
); );
......
import React, { useState } from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import InputBox from './components/InputBox';
import ButtonsForm from './components/ButtonsForm';
import SelectForm from './components/SelectForm';
import StyledButton from './components/StyledButton';
const INIT_ASSET_TYPE = [
{
asset_id: '1',
asset_name: '농협',
},
{
asset_id: '2',
asset_name: '신한',
},
]
const INIT_CATEGORIES = [
{
category_id: '1',
category_name: '식비',
},
{
category_id: '2',
category_name: '문화',
},
{
category_id: '3',
category_name: '교통비',
},
{
category_id: '4',
category_name: '기타',
},
]
const PostMoney = () => {
const [selectedIndex, setSelectedIndex] = useState(0)
const [contents, setContents] = useState('')
const [price, setPrice] = useState(0)
const [asset_type, setAsset_type] = useState(INIT_ASSET_TYPE)
const [selected_asset_type, setSelected_asset_type] = useState(INIT_ASSET_TYPE[0])
const [categories, setCategories] = useState(INIT_CATEGORIES)
const [selected_cat, setSelected_cat] = useState(INIT_CATEGORIES[0])
console.log('입력 데이터 : ', selectedIndex, contents, price, selected_asset_type, selected_cat)
return (
<View>
<View>
<ButtonsForm
onPress={(index) => setSelectedIndex(index)}
selectedIndex={selectedIndex}
group={["수입", "지출", "이동"]} />
<InputBox
inputTitle="내용"
placeholder="내용을 입력하세요"
onChangeText={
(contents) => setContents(contents)
}
maxLength={30}
/>
<InputBox
inputTitle="금액"
placeholder="금액을 입력하세요"
onChangeText={
(price) => setPrice(price)
}
keyboardType="numeric"
maxLength={30}
/>
<SelectForm
inputTitle="자산"
categories={asset_type}
selectedValue={selected_asset_type}
onValueChange={(itemValue, itemIndex) => setSelected_asset_type(itemValue)}
/>
<SelectForm
inputTitle="구분"
categories={categories}
selectedValue={selected_cat}
onValueChange={(itemValue, itemIndex) => setSelected_cat(itemValue)}
/>
</View>
<View style={style.buttonRow}>
<StyledButton
name="저장하기"
onPress={() => console.log('저장버튼')}
style={style.submitButton}
/>
<StyledButton
name="취소"
onPress={() => console.log('취소버튼')}
style={style.cancelButton}
/>
</View>
</View>
)
}
const style = StyleSheet.create({
Font: {
fontSize: 24
},
buttonRow: {
flexDirection: 'row',
alignItems: "center",
marginHorizontal: 10,
marginVertical: 3,
},
submitButton: {
flex: 3,
height: 50,
},
cancelButton: {
flex: 1,
height: 50,
}
});
export default PostMoney;
\ No newline at end of file
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>
const component3 = () => <Text>{props.group[2]}</Text>
return (
<ButtonGroup
onPress={props.onPress}
selectedIndex={props.selectedIndex}
buttons={[{ element: component1 }, { element: component2 }, { element: component3 }]}
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
\ No newline at end of file
import { DatePickerAndroid } from 'react-native';
const DatePicker = (props) => {
return (
<View>
<Text style={{ fontSize: 18, marginLeft: 10, marginTop: 10 }}>Arrival/Departure:</Text>
<DatePicker
style={{ padding: 10 }}
date={this.state.date_in}
mode="date"
format="YYYY-MM-DD"
minDate="2016-05-01"
maxDate="2016-06-01"
showIcon={false}
customStyles={{
dateInput: {
alignItems: 'flex-start',
padding: 5
},
}}
onDateChange={(date_in) => { this.setState({ date_in: date_in }); }} />
</View>
);
};
const styles = StyleSheet.create({
})
export default DatePicker
\ No newline at end of file
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
\ No newline at end of file
import React from 'react';
import { StyleSheet, Picker, View, Text } from 'react-native';
import { ListItem, Icon } from 'react-native-elements'
const SelectForm = (props) => {
return (
<View style={styles.container}>
<View style={styles.inputTitleArea}>
<Text style={styles.inputTitle}>{props.inputTitle}</Text>
</View>
<Picker
selectedValue={props.selectedValue}
style={styles.selectStyle}
onValueChange={props.onValueChange}
>
{props.categories.map((index, item)=>{
return(
<Picker.Item label={item.category_name} value={item.category_name} />
)
})}
</Picker>
</View>
);
};
const styles = 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,
},
selectStyle: {
flex: 3,
fontSize: 20,
},
})
export default SelectForm
\ No newline at end of file
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
\ 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