memory-basket#6 memory-basket#11 Feat: Tab Nav img color change, add …

…Title color
minjun06 · Jun 15, 2023 · 09516b0 · 09516b0
1 parent 70f0fe9
commit 09516b0
Show file tree

Hide file tree

Showing 11 changed files with 245 additions and 195 deletions.
diff --git a/App.js b/App.js
@@ -1,6 +1,37 @@
-import Navigation from "./src/navigations";
-import React from "react";
+import Navigation from './src/navigations';
+import React from 'react';
+import { useCallback, useEffect } from 'react';
+import { useFonts } from 'expo-font';
+import * as Font from 'expo-font';
 
 export default function App() {
-  return <Navigation></Navigation>;
+  // const [fontsLoaded] = Font.loadAsync({
+  //   'my-custom-font': require('./assets/fonts/GyeonggiBatangTTF_Regular.ttf'),
+  //   // 'my-second-font' : require('../assets/fonts/SUIT-Regular.ttf'),
+  // });
+
+  // const onLayoutRootView = useCallback(async () => {}, [fontsLoaded]);
+
+  // useEffect(() => {
+  //   const loadFonts = async () => {
+  //     await Font.loadAsync({
+  //       'my-custom-font': require('./assets/fonts/GyeonggiBatangTTF_Regular.ttf'),
+  //     });
+  //   };
+
+  //   loadFonts();
+  // }, []);
+
+  // useEffect(() => {
+  //   //SoundManager.loadSound(require('./images/bgm.wav'));
+  // }, []);
+
+  // if (!fontsLoaded) {
+  //   return null;
+  // }
+
+  return (
+    //<Navigation onLayout={onLayoutRootView}></Navigation>
+    <Navigation></Navigation>
+  );
 }
diff --git a/assets/img/garden.png b/assets/img/garden.png
diff --git a/src/components/TitleContainer.js b/src/components/TitleContainer.js
@@ -1,12 +1,11 @@
-import React from "react";
-import { TouchableOpacity, View, Text, Image } from "react-native";
-import styled from "styled-components/native";
+import React from 'react';
+import { TouchableOpacity, View, Text, Image } from 'react-native';
+import styled from 'styled-components/native';
 
 const Container = styled.View`
   width: 100%;
   flex-direction: row;
   justify-content: space-between;
-  
 `;
 
 const Title = styled.Text`
@@ -22,15 +21,15 @@ const Button = styled.View`
 const TitleContainer = ({ text, onPressBack, onPressClose }) => {
   return (
     <>
-      <Container style={{ marginTop: 40 }}/>
+      <Container style={{ marginTop: 40 }} />
       <Container>
         <Button>
           <TouchableOpacity
             onPress={onPressBack}
             pressRetentionOffset={{ bottom: 10, top: 10, left: 10, right: 10 }}
           >
             <Image
-              source={require("../../assets/img/back_btn.png")}
+              source={require('../../assets/img/back_btn.png')}
               alt="뒤로 가기"
             />
           </TouchableOpacity>
@@ -43,7 +42,7 @@ const TitleContainer = ({ text, onPressBack, onPressClose }) => {
             pressRetentionOffset={{ bottom: 10, top: 10, left: 10, right: 10 }}
           >
             <Image
-              source={require("../../assets/img/close_btn.png")}
+              source={require('../../assets/img/close_btn.png')}
               alt="닫기"
             />
           </TouchableOpacity>
@@ -54,9 +53,9 @@ const TitleContainer = ({ text, onPressBack, onPressClose }) => {
 };
 
 TitleContainer.defaultProps = {
-  text: "page-name",
-  onPressBack: () => alert("back"),
-  onPressClose: () => alert("close"),
+  text: 'page-name',
+  onPressBack: () => alert('back'),
+  onPressClose: () => alert('close'),
 };
 
 export default TitleContainer;
diff --git a/src/navigations/Stack.js b/src/navigations/Stack.js
@@ -20,6 +20,7 @@ import {
   MyPage,
   QuestionList,
   AddPage,
+  Garden,
 } from '../screens';
 import TabNav from './Tab';
 const Stack = createStackNavigator();
@@ -74,11 +75,11 @@ const StackNav = () => {
         component={SignUp}
         options={{ headerShown: false }}
       />
-      <Stack.Screen name="TodaysQuestion" component={TodaysQuestion} />
+      {/* 적용하기 다른 페이지도 */}
+      <Stack.Screen name="TodaysQuestion" component={TodaysQuestion} options={{ headerStyle: { backgroundColor: '#fff2D0' } }}/>
       <Stack.Screen
         name="WriteTodaysQuestion"
         component={WriteTodaysQuestion}
-
       />
       <Stack.Screen
         name="OnboardingPage1"
@@ -121,8 +122,13 @@ const StackNav = () => {
         options={{ headerShown: false }}
       />
       <Stack.Screen name="MyPage" component={MyPage} />
-      <Stack.Screen name="QuestionList" component={QuestionList} />
+      <Stack.Screen
+        name="QuestionList"
+        component={QuestionList}
+        options={{ headerStyle: { backgroundColor: '#fff2D0' } }}
+      />
       <Stack.Screen name="AddPage" component={AddPage} />
+      <Stack.Screen name="Garden" component={Garden} />
     </Stack.Navigator>
   );
 };

diff --git a/src/navigations/Tab.js b/src/navigations/Tab.js
@@ -17,10 +17,14 @@ const TabNav = () => {
         name="질문 리스트"
         component={QuestionList}
         options={{
-          tabBarIcon: (focused) => (
+          tabBarIcon: ({ focused }) => (
             <Image
               style={{ resizeMode: 'contain', width: 25, height: 25 }}
-              source={require('../../assets/img/navigation/list.png')}
+              source={
+                focused
+                  ? require('../../assets/img/navigation/list_icon_selected.png')
+                  : require('../../assets/img/navigation/list.png')
+              }
             />
           ),
           tabBarActiveTintColor: '#FFB800',
@@ -30,30 +34,32 @@ const TabNav = () => {
         name="홈"
         component={Home}
         options={{
-          tabBarIcon: (focused) =>
-            focused ? (
-              <Image
-                style={{ resizeMode: 'contain', width: 25, height: 25 }}
-                source={require('../../assets/img/navigation/home.png')}
-              />
-            ) : (
-              <Image
-                style={{ resizeMode: 'contain', width: 25, height: 25 }}
-                source={require('../../assets/img/navigation/home_icon_selected.png')}
-              />
-            ),
+          tabBarIcon: ({ focused }) => (
+            <Image
+              style={{ resizeMode: 'contain', width: 25, height: 25 }}
+              source={
+                focused
+                  ? require('../../assets/img/navigation/home_icon_selected.png')
+                  : require('../../assets/img/navigation/home.png')
+              }
+            />
+          ),
           tabBarActiveTintColor: '#3C85FF',
         }}
       />
       <Tab.Screen
         name="마이페이지"
         component={MyPage}
         options={{
-          tabBarIcon: (focused) => (
+          tabBarIcon: ({ focused }) => (
             <Image
               // style={{ width: 25, height: 25 }}
               style={{ resizeMode: 'contain', width: 25, height: 25 }}
-              source={require('../../assets/img/navigation/my_icon.png')}
+              source={
+                focused
+                  ? require('../../assets/img/navigation/my_icon_selected.png')
+                  : require('../../assets/img/navigation/my_icon.png')
+              }
             />
           ),
           tabBarActiveTintColor: '#FF5370',

diff --git a/src/navigations/index.js b/src/navigations/index.js
@@ -5,26 +5,8 @@ import TabNav from './Tab';
 import { createStackNavigator } from '@react-navigation/stack';
 //import Auth from "./Auth";
 
-//const Stack = createStackNavigator();
-
 const Navigation = () => {
   return (
-    // <NavigationContainer>
-    //   <StackNav>
-    //     <Stack.screen name="Tab" component={TabNav} />
-    //   </StackNav>
-    // </NavigationContainer>
-
-    // <NavigationContainer>
-    //   <Stack.Navigator
-    //     screenOptions={{
-    //       headerShown: false,
-    //     }}
-    //   >
-    //     <Stack.Screen name="Tab" component={TabNav} />
-    //   </Stack.Navigator>
-    // </NavigationContainer>
-
     <NavigationContainer>
       <StackNav
         screenOptions={{
@@ -37,22 +19,4 @@ const Navigation = () => {
   );
 };
 
-// const TabNavigation = () => {
-//     return (
-//       <NavigationContainer>
-//         <TabNav/>
-//       </NavigationContainer>
-//     );
-//   };
-
-//   const AppNavigation = () => {
-//     return (
-//       <NavigationContainer>
-//         <StackNav>
-//             <StackNav.Screen name="Stack" component={TabNavigation}/>
-//         </StackNav>
-//       </NavigationContainer>
-//     );
-//   };
-
 export default Navigation;
diff --git a/src/screens/Garden.js b/src/screens/Garden.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import {
+  Text,
+  View,
+  Image,
+  Button,
+  ImageBackground,
+  TouchableOpacity,
+} from 'react-native';
+import styled from 'styled-components/native';
+
+const Container = styled.View`
+  height: 100%;
+  align-items: center;
+`;
+const MainBody = styled.View`
+  /* margin: 0; */
+  flex: 3;
+  width: 100%;
+  /* height: 200px; */
+  /* align-items: center; */
+  /* justify-content: center; */
+`;
+const Background = styled.ImageBackground`
+  flex: 1;
+`;
+
+const Garden = ({ navigation }) => {
+  return (
+    <Container>
+      <MainBody>
+        <Background source={require('../../assets/img/garden.png')} />
+      </MainBody>
+    </Container>
+
+
+    // <View>
+    //   <ImageBackground
+    //   source={require('../../assets/img/garden.png')}
+    //   />
+    // </View>
+
+  );
+};
+
+export default Garden;