Commit 9433e4e0 authored by YoonDongMin's avatar YoonDongMin
Browse files

모달

parent 4984cdc8
import * as React from 'react'; import * as React from 'react';
import { StyleSheet, View, Text, TextInput, Button, Keyboard, TouchableWithoutFeedback } from 'react-native'; import { useState } from 'react';
import { StyleSheet, View, Text, TextInput, Button, Keyboard, TouchableWithoutFeedback, Modal } from 'react-native';
import { NavigationContainer } from '@react-navigation/native'; import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons'; 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 ReviewForm from './screens/reviewForm';
function MainScreen({ navigation }) { function MainScreen({ navigation }) {
const [number, onChangeNumber] = React.useState(null); const [number, onChangeNumber] = React.useState(null);
const [modalOpen, setModalOpen] = useState(false);
const [reviews, setReviews] = useState([
{ title: 'aa', rating: 5, body: 'bb', key: '1' },
]);
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();
}}> }}>
<View style={{flex: 1}}> <View style={{ flex: 1 }}>
<View >
<Text style={style.Font}>여기는 메인 페이지 입니다.</Text>
<Text style={style.Font}>아래는 input 테스트를 위한 것입니다.</Text> <View >
<TextInput <Text style={style.Font}>여기는 메인 페이지 입니다.</Text>
style={style.TextInput} <Text style={style.Font}>아래는 input 테스트를 위한 것입니다.</Text>
onChangeText={onChangeNumber} <TextInput
keyboardType="numeric" style={style.TextInput}
onChangeText={onChangeNumber}
keyboardType="numeric"
/>
<Text>입력한 숫자 보기: {number} </Text>
</View>
<Button
title="월별 페이지로 이동"
onPress={() => navigation.navigate('Monthly')}
/>
<Modal visible={modalOpen} animationType='slide'>
<View style={style.modalContent}>
<Ionicons
name='close'
size={24}
style={{ ...style.modalToggle, ...style.modalClose }}
onPress={() => setModalOpen(false)}
/>
<ReviewForm addReview = {addReview} />
</View>
</Modal>
<Ionicons
name='add'
size={24}
style={style.modalToggle}
onPress={() => setModalOpen(true)}
/> />
<Text>입력한 숫자 보기: {number} </Text>
</View> </View>
<Button
title="월별 페이지로 이동"
onPress={() => navigation.navigate('Monthly')}
/>
<MoneyDB />
</View>
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
</> </>
) )
} }
...@@ -76,6 +110,23 @@ function App() { ...@@ -76,6 +110,23 @@ function App() {
} }
const style = StyleSheet.create({ const style = StyleSheet.create({
modalToggle: {
marginBottom: 10,
borderWidth: 1,
borderColor: '#f2f2f2',
padding: 10,
borderRadius: 10,
alignSelf: 'center',
},
modalClose: {
marginTop: 20,
marginBottom: 0,
},
modalContent: {
flex: 1,
},
TextInput: { TextInput: {
borderColor: 'skyblue', borderColor: 'skyblue',
height: 40, height: 40,
......
import React from 'react';
import { StyleSheet, Button, TextInput, View, Text } from 'react-native';
import { globalStyles } from '../styles/global.js'
import { Formik } from 'formik';
export default function ReviewForm(addReview) {
return (
<View style={globalStyles.container}>
<Formik
initialValues={{ title: '', body: '', rating: '' }}
onSubmit={(values) => {
addReview(values);
}}
>
{(props) => (
<View>
<TextInput
style={globalStyles.input}
placeholder='Review title'
onChangeText={props.handleChange('title')}
value={props.values.title}
/>
<TextInput
multiline
style={globalStyles.input}
placeholder='Review body'
onChangeText={props.handleChange('body')}
value={props.values.body}
/>
<TextInput
multiline
style={globalStyles.input}
placeholder='Rating (1-5)'
onChangeText={props.handleChange('rating')}
value={props.values.rating}
/>
<Button title = 'submit' color = 'maroon' onPress = {props.handleSubmit}/>
</View>
)}
</Formik>
</View>
)
}
\ No newline at end of file
import {StyleSheet} from 'react-native';
export const globalStyles = StyleSheet.create({
container: {
flex:1,
padding:24,
},
titleText: {
fontFamily: 'nunito-bold',
fontSize:18,
color: '#333'
},
paragraph: {
marginVertical: 8,
lineHeight:20,
},
imput: {
borderWidth: 1,
borderColor: '#ddd',
padding: 10,
fontSize: 18,
borderRadius:6,
}
})
\ 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