0705 아이콘 해결

components/addTodo.js

+import React, {useState} from 'react';
+import {StyleSheet, Text,View, TextInput, Button} from 'react-native';
+
+export default function AddTodo({submitHandler}) {
+    const [text, setText] = useState('');
+
+    const changeHandler = (val) => {
+        setText(val);
+    }
+
+    return(
+        <View>
+            <TextInput
+                style = {styles.input}
+                placeholder = 'new todo...'
+                onChangeText={changeHandler}
+            />
+            <Button onPress= {() =>submitHandler(text)} title = 'add todo' color = 'coral' />
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    input: {
+        marginBottom: 10,
+        paddingHorizontal: 8,
+        paddingVertical:6,
+        borderBottomColor: '#ddd',
+        borderBottomWidth: 1
+
+    }
+})
\ No newline at end of file

components/header.js

+import React from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+
+export default function Header() {
+    return(
+        <View style={styles.header}>
+            <Text style = {styles.title}>My Todos</Text>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    header:{
+        height:80,
+        paddingTop:38,
+        backgroundColor: 'coral'
+    },
+    title: {
+        textAlign: 'center',
+        color: '#fff',
+        fontSize: 20,
+        fontWeight: 'bold'
+    }
+});
\ No newline at end of file

components/sandbox.js

+import React from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+
+export default function Sandbox(){
+    return (
+        <View style = {styles.container}>
+            <Text style = {styles.boxOne}>one</Text>
+            <Text style = {styles.boxTwo}>two</Text>
+            <Text style = {styles.boxThree}>three</Text>
+            <Text style = {styles.boxFour}>four</Text>
+        </View>
+    )
+}
+
+const styles= StyleSheet.create({
+    container: {
+        //flex: 1,
+        flexDirection: 'row',
+        justifyContent: 'space-around' , 
+        alignItems: 'flex-end',
+        paddingTop: 40,
+        backgroundColor: '#ddd',
+    },
+    boxOne: {
+        flex:5,
+        backgroundColor: 'violet',
+        padding:10,
+
+    },
+    boxTwo: {
+        flex:1,
+        backgroundColor: 'gold',
+        padding:20,
+    },
+    boxThree: {
+        flex:1,
+        backgroundColor: 'coral',
+        padding:30,
+    },
+    boxFour: {
+        flex:1,
+        backgroundColor: 'skyblue',
+        padding:40,
+    }
+});
\ No newline at end of file

components/todoItem.js

+import React from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+
+export default function TodoItem({item, pressHandler}) {
+    
+    return(
+        <TouchableOpacity onPress= {() => pressHandler(item.key)}>
+            <View style={styles.item}>
+                <MaterialIcons name= 'delete' size={18} color= '#333'/>
+                <Text style = {styles.item}>{item.text}</Text> 
+            </View>
+            
+            
+        </TouchableOpacity>
+    )
+
+    }
+
+    const styles = StyleSheet.create({
+        item: {
+            padding:16,
+            marginTop:16,
+            borderColor: '#bbb',
+            borderWidth : 1,
+            borderStyle: 'd',
+            borderStyle: 'dashed',
+            borderRadius: 10
+        }
+    })
\ No newline at end of file

package.json

@@ -10,6 +10,7 @@
     "lint": "eslint ."
   },
   "dependencies": {
+    "@react-native-community/art": "^1.2.0",
     "@react-native-community/masked-view": "^0.1.11",
     "@react-navigation/bottom-tabs": "^5.11.11",
     "@react-navigation/native": "^5.9.4",
@@ -18,6 +19,7 @@
     "react-native": "0.64.2",
     "react-native-elements": "^3.4.2",
     "react-native-gesture-handler": "^1.10.3",
+    "react-native-pie": "^1.1.2",
     "react-native-reanimated": "^2.2.0",
     "react-native-safe-area-context": "^3.2.0",
     "react-native-screens": "^3.4.0",

routes/homeStack.js

+import  {createStackNavigator}  from 'react-navigation-stack';
+import {createAppContainer} from 'react-navigation';
+import Home from '../screens/home';
+import ReviewDetails from '../screens/reviewDetails';
+
+const screens = {
+    Home:{
+        screen:Home
+    },
+    ReviewDetails:{
+        screen: ReviewDetails
+    }
+}
+
+const HomeStack = createStackNavigator(screens);
+
+export default createAppContainer(HomeStack);
\ No newline at end of file

screens/about.js

+import React from 'react';
+import {StyleSheet, View, Text} from 'react-native';
+
+export default function About() {
+    return (
+        <View style = {styles.container}>
+            <Text>About Screen</Text>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: (
+        padding: 24
+    )
+});
\ No newline at end of file

screens/home.js

+import React from 'react';
+import {StyleSheet, View, Text} from 'react-native';
+
+export default function Home() {
+    return (
+        <View style = {styles.container}>
+            <Text>Home Screen</Text>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: (
+        padding: 24
+    )
+});
\ No newline at end of file

screens/reviewDetails.js

+import React from 'react';
+import {StyleSheet, View, Text} from 'react-native';
+
+export default function ReviewDetails() {
+    return (
+        <View style = {styles.container}>
+            <Text>ReviewDetails Screen</Text>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: (
+        padding: 24
+    )
+});
\ No newline at end of file