0705 아이콘 해결

App.js

 import * as React from 'react';
-import { StyleSheet, View, Text, TextInput, Button } from 'react-native';
+import { StyleSheet, View, Text, TextInput, Button, Keyboard, TouchableWithoutFeedback } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import Ionicons from 'react-native-vector-icons/Ionicons';
@@ -7,6 +7,15 @@ import Monthly from './Monthly';
 import Analy from './Analy';
 import MoneyDB from './MoneyDB';
 
+
+const DismissKeyboard = ({ children }) => (
+  <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()} >
+    {children}
+  </TouchableWithoutFeedback>
+
+);
+
+
 function MainScreen({ navigation }) {
   const [number, onChangeNumber] = React.useState(null);
   return (
@@ -16,7 +25,7 @@ function MainScreen({ navigation }) {
         <Text style={style.Font}>아래는 input 테스트를 위한 것입니다.</Text>
         <TextInput
           style={style.TextInput}
-          onChangeText={onChangeNumber}   
+          onChangeText={onChangeNumber}
           keyboardType="numeric"
         />
         <Text>입력한 숫자 보기: {number} </Text>
@@ -24,44 +33,45 @@ function MainScreen({ navigation }) {
       <Button
         title="월별 페이지로 이동"
         onPress={() => navigation.navigate('Monthly')}
-      /> 
+      />
       <MoneyDB />
-    </> 
+    </>
   )
 }
 
+
+
 const Tab = createBottomTabNavigator();
 
 function App() {
   return (
-    <NavigationContainer>
-      <Tab.Navigator screenOptions={({ route }) => ({
+    <DismissKeyboard>
+      <NavigationContainer>
+        <Tab.Navigator screenOptions={({ route }) => ({
           tabBarIcon: ({ focused, color, size }) => {
             let iconName;
 
             if (route.name === 'Main') {
-              iconName = focused
-                ? 'home'
-                : 'home-outline';
+              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';
+              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>
+          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

+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

+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

+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

+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

+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;

App5.js

+import React, {useState} from 'react';
+import {StyleSheet, Text, View, FlatList, 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';
+
+
+export default function App5() {
+    const [todos, setTodos] = useState([
+        { text: 'buy coffee', key:'1'},
+        { text: 'create an app', key: '2'},
+        { text: 'play on the swithch', key: '3'}
+    ]);
+
+    const pressHandler = (key) => {
+        setTodos((prevTodos) => {
+            return prevTodos.filter(todo => todo.ket != key);
+        });
+    }
+
+    const submitHandler = (text) => {
+    
+        if(text.length > 3){
+         setTodos((prevTodos) => {
+             return [
+                 { text: text, key: Math.random().toString() },
+                 ...prevTodos
+                 ];
+            });
+        }else {
+        Alert.alert('OOPs!' , 'Todos must be over 4 chars long', [
+            {text: 'Understood', onPress: () => console.log('alert closed')}
+        ]);
+        }
+    }
+
+    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>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex:1,
+        backgroundColor: '#fff',
+    },
+    content: {
+        padding: 40,
+        backgroundColor: 'pink',
+        
+    },
+    list: {
+        marginTop: 20,
+        backgroundColor: 'yellow',
+    }
+});
\ No newline at end of file

App6.js

+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