Skip to content

GitLab

Commit 4984cdc8 authored by YoonDongMin's avatar YoonDongMin
Browse files

0705 테스트

parent d696e00e
Hide whitespace changes
Inline Side-by-side
App.js
View file @ 4984cdc8
...@@ -8,33 +8,34 @@ import Analy from './Analy'; ...@@ -8,33 +8,34 @@ import Analy from './Analy';
import MoneyDB from './MoneyDB'; import MoneyDB from './MoneyDB';
const DismissKeyboard = ({ children }) => (
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()} >
{children}
</TouchableWithoutFeedback>
);
function MainScreen({ navigation }) { function MainScreen({ navigation }) {
const [number, onChangeNumber] = React.useState(null); const [number, onChangeNumber] = React.useState(null);
return ( return (
<> <>
<View> <TouchableWithoutFeedback onPress={() => {
<Text style={style.Font}>여기는 메인 페이지 입니다.</Text> Keyboard.dismiss();
<Text style={style.Font}>아래는 input 테스트를 위한 것입니다.</Text>
<TextInput }}>
style={style.TextInput} <View style={{flex: 1}}>
onChangeText={onChangeNumber} <View >
keyboardType="numeric" <Text style={style.Font}>여기는 메인 페이지 입니다.</Text>
/> <Text style={style.Font}>아래는 input 테스트를 위한 것입니다.</Text>
<Text>입력한 숫자 보기: {number} </Text> <TextInput
</View> style={style.TextInput}
<Button onChangeText={onChangeNumber}
keyboardType="numeric"
/>
<Text>입력한 숫자 보기: {number} </Text>
</View>
<Button
title="월별 페이지로 이동" title="월별 페이지로 이동"
onPress={() => navigation.navigate('Monthly')} onPress={() => navigation.navigate('Monthly')}
/> />
<MoneyDB /> <MoneyDB />
</View>
</TouchableWithoutFeedback>
</> </>
) )
} }
...@@ -45,33 +46,32 @@ const Tab = createBottomTabNavigator(); ...@@ -45,33 +46,32 @@ const Tab = createBottomTabNavigator();
function App() { function App() {
return ( return (
<DismissKeyboard> <NavigationContainer>
<NavigationContainer> <Tab.Navigator screenOptions={({ route }) => ({
<Tab.Navigator screenOptions={({ route }) => ({ tabBarIcon: ({ focused, color, size }) => {
tabBarIcon: ({ focused, color, size }) => { let iconName;
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>
</NavigationContainer>
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>
</NavigationContainer>
</DismissKeyboard>
); );
} }
......
App0.js deleted 100644 → 0
View file @ d696e00e
import React, {useState} from 'react';
import {StyleSheet, Text, View, Button} from 'react-native';
export default function App0() {
const [name, setName] = useState('shaun');
return (
<View style = {styles.container}>
<Text>My name is {name}</Text>
<Text></Text>
<View style = {styles.buttonContainer}>
<Button title = 'update state'/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex:1,
backgroundColor:'#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
\ No newline at end of file
App1.js deleted 100644 → 0
View file @ d696e00e
import React, {useState} from 'react';
import {StyleSheet, Text, View, TextInput} from 'react-native';
export default function App1() {
const [name, setName] = useState('shaun');
const [age, setAge] = useState('30');
return(
<View style = {styles.container}>
<Text>Enter name:</Text>
<TextInput
style = {styles.input}
placeholder = 'e.g.John Doe'
onChangeText = {(val) => setName(val)}/>
<Text>Enter age:</Text>
<TextInput
keyboardType = 'numeric' //키보드 타입 변경
style = {styles.input}
placeholder = 'e.g.99'
onChangeText = {(val) => setAge(val)}/>
<Text>name: {name}, age: {age}</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
input: {
borderWidth: 1,
borderColor: '#777',
padding:8,
margin:10,
width:200,
}
});
\ No newline at end of file
App2.js deleted 100644 → 0
View file @ d696e00e
import React, {useState} from 'react' ;
import {StyleSheet, Text, View, ScrollView} from 'react-native';
//ScrollView를 해야 밑에 내릴 수 있음
export default function App() {
const [people, setPeople] = useState([
{ name : 'shaun', key: '1'},
{ name : 'yoshi', key: '2'},
{ name : 'shaun', key: '3'},
{ name : 'shaun', key: '4'},
{ name : 'shaun', key: '5'},
{ name : 'shaun', key: '6'},
{ name : 'shaun', key: '7'},
]);
return (
<View style = {styles.container}>
<ScrollView>
{people.map((item) => {
return (
<View key = {item.key}>
<Text style = {styles.item}>{item.name}</Text>
</View>
)
})}
</ScrollView>
</View>
); //key를 나타내어주어야 error가 안뜸
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
paddingTop: 40,
paddingHorizontal: 20
},
item: {
marginTop: 24,
padding:30,
backgroundColor: 'pink',
fontSize: 24
}
});
\ No newline at end of file
App3.js deleted 100644 → 0
View file @ d696e00e
import React, {useState} from 'react' ;
import {StyleSheet, Text, View, FlatList, TouchableOpacity} from 'react-native';
import { LongPressGestureHandler } from 'react-native-gesture-handler';
//ScrollView를 해야 밑에 내릴 수 있음
export default function App() {
const [people, setPeople] = useState([
{ name : 'shaun', id: '1'},
{ name : 'yoshi', id: '2'},
{ name : 'shaun', id: '3'},
{ name : 'shaun', id: '4'},
{ name : 'shaun', id: '5'},
{ name : 'shaun', id: '6'},
{ name : 'shaun', id: '7'},
]);
const pressHandler = (id) => {
console.log(id);
setPeople((prevPeople) => {
return prevPeople.filter(person => person.id != id);
});
}
return (
<View style = {styles.container}>
<FlatList
numColumns={2}
keyExtractor = {(item) => item.id}
data = {people}
renderItem = {({item}) => (
<TouchableOpacity OnPress = {() => LongPressGestureHandler(item.id)}>
<Text style = {styles.item} > {item.name}</Text>
</TouchableOpacity>
)}
/>
</View>
); //key를 나타내어주어야 error가 안뜸
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
paddingTop: 40,
paddingHorizontal: 20
},
item: {
marginTop: 24,
padding:30,
backgroundColor: 'pink',
fontSize: 24,
marginHorizontal: 10,
marginTop: 24,
} //세로간격 나누기
});
\ No newline at end of file
App4.js deleted 100644 → 0
View file @ d696e00e
import * as React from 'react';
import { StyleSheet, View, Text, TextInput, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Monthly from './Monthly';
function MainScreen({ navigation }) {
const [number, onChangeNumber] = React.useState(null);
return (
<>
<View>
<Text style={style.Font}>여기는 메인 페이지 입니다.</Text>
<Text style={style.Font}>아래는 input 테스트를 위한 것입니다.</Text>
<TextInput
style={style.TextInput}
onChangeText={onChangeNumber}
keyboardType="numeric"
/>
<Text>입력한 숫자 보기: {number} </Text>
</View>
<Button
title="월별 페이지로 이동"
onPress={() => navigation.navigate('Monthly')}
/>
</>
)
}
const Stack = createStackNavigator();
function App4() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Main">
<Stack.Screen name="Main" component={MainScreen} />
<Stack.Screen name="Monthly" component={Monthly} />
</Stack.Navigator>
</NavigationContainer>
);
}
const style = StyleSheet.create({
TextInput: {
borderColor: 'skyblue',
height: 40,
margin: 12,
borderWidth: 1
},
Font: {
fontSize: 24
}
});
export default App4;
App6.js deleted 100644 → 0
View file @ d696e00e
import React from 'react';
import { SafeAreaView, StyleSheet, View, } from 'react-native';
import Pie from 'react-native-pie';
const App6 = () => {
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={styles.container}>
<View
style={{
paddingVertical: 15,
flexDirection: 'row',
width: 350,
justifyContent: 'space-between',
}}
>
<Pie
radius={80}
sections={[
{
percentage: 10,
color: '#C70039',
},
{
percentage: 20,
color: '#44CD40',
},
{
percentage: 30,
color: '#404FCD',
},
{
percentage: 40,
color: '#EBD22F',
},
]}
strokeCap={'butt'}
/>
</View>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
contianer: {
flex: 1,
algnItems: 'center',
justifyContent: 'space-around',
marginTop: 30,
}
});
export default App6;
\ 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