Merge pull request #6 from Regular-Pharmasist/feat/AnalyzingScreen-#2

Feat/analyzing screen #2
Regular-Pharmasist · Feb 5, 2024 · c9bc211 · c9bc211
2 parents 6df46cd + 9462763
commit c9bc211
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 153 deletions.
diff --git a/components/Header.js b/components/Header.js
@@ -16,137 +16,13 @@ const { height, width } = Dimensions.get('window');
 const iPhoneX = () => Platform.OS === 'ios' && (height === 812 || width === 812 || height === 896 || width === 896);
 
 
-
-
-
-const BellButton = ({isWhite, style, navigation}) => (
-  <TouchableOpacity style={[styles.button, style]} onPress={() => navigation.navigate('Pro')}>
-    <Icon
-      family="ArgonExtra"
-      size={16}
-      name="bell"
-      color={argonTheme.COLORS[isWhite ? 'WHITE' : 'ICON']}
-    />
-    <Block middle style={styles.notify} />
-  </TouchableOpacity>
-);
-
-const BasketButton = ({isWhite, style, navigation}) => (
-  <TouchableOpacity style={[styles.button, style]} onPress={() => navigation.navigate('Pro')}>
-    <Icon
-      family="ArgonExtra"
-      size={16}
-      name="basket"
-      color={argonTheme.COLORS[isWhite ? 'WHITE' : 'ICON']}
-    />
-  </TouchableOpacity>
-);
-
-const SearchButton = ({isWhite, style, navigation}) => (
-  <TouchableOpacity style={[styles.button, style]} onPress={() => navigation.navigate('Pro')}>
-    <Icon
-      size={16}
-      family="Galio"
-      name="search-zoom-in"
-      color={theme.COLORS[isWhite ? 'WHITE' : 'ICON']}
-    />
-  </TouchableOpacity>
-);
-
 class Header extends React.Component {
   handleLeftPress = () => {
     const { back, navigation } = this.props;
     return (back ? navigation.goBack() : navigation.openDrawer());
   }
-  renderRight = () => {
-    const { white, title, navigation } = this.props;
-
-    if (title === 'Title') {
-      return [
-        <BellButton key='chat-title' navigation={navigation} isWhite={white} />,
-        <BasketButton key='basket-title' navigation={navigation} isWhite={white} />
-      ]
-    }
-
-    switch (title) {
-      case 'Home':
-        return ([
-          <BellButton key='chat-home' navigation={navigation} isWhite={white} />,
-          <BasketButton key='basket-home' navigation={navigation} isWhite={white} />
-        ]);
-      case 'Deals':
-        return ([
-          <BellButton key='chat-categories' navigation={navigation} />,
-          <BasketButton key='basket-categories' navigation={navigation} />
-        ]);
-      case 'Categories':
-        return ([
-          <BellButton key='chat-categories' navigation={navigation} isWhite={white} />,
-          <BasketButton key='basket-categories' navigation={navigation} isWhite={white} />
-        ]);
-      case 'Category':
-        return ([
-          <BellButton key='chat-deals' navigation={navigation} isWhite={white} />,
-          <BasketButton key='basket-deals' navigation={navigation} isWhite={white} />
-        ]);
-      case 'Profile':
-        return ([
-          <BellButton key='chat-profile' navigation={navigation} isWhite={white} />,
-          <BasketButton key='basket-deals' navigation={navigation} isWhite={white} />
-        ]);
-      case 'Product':
-        return ([
-          <SearchButton key='search-product' navigation={navigation} isWhite={white} />,
-          <BasketButton key='basket-product' navigation={navigation} isWhite={white} />
-        ]);
-      case 'Search':
-        return ([
-          <BellButton key='chat-search' navigation={navigation} isWhite={white} />,
-          <BasketButton key='basket-search' navigation={navigation} isWhite={white} />
-        ]);
-      case 'Settings':
-        return ([
-          <BellButton key='chat-search' navigation={navigation} isWhite={white} />,
-          <BasketButton key='basket-search' navigation={navigation} isWhite={white} />
-        ]);
-      default:
-        break;
-    }
-  }
-  renderSearch = () => {
-    const { navigation } = this.props;
-    return (
-      <Input
-        right
-        color="black"
-        style={styles.search}
-        placeholder="What are you looking for?"
-        placeholderTextColor={'#8898AA'}
-        onFocus={() => navigation.navigate('Pro')}
-        iconContent={<Icon size={16} color={theme.COLORS.MUTED} name="search-zoom-in" family="ArgonExtra" />}
-      />
-    );
-  }
-  renderOptions = () => {
-    const { navigation, optionLeft, optionRight } = this.props;
 
-    return (
-      <Block row style={styles.options}>
-        <Button shadowless style={[styles.tab, styles.divider]} onPress={() => navigation.navigate('Pro')}>
-          <Block row middle>
-            <Icon name="diamond" family="ArgonExtra" style={{ paddingRight: 8 }} color={argonTheme.COLORS.ICON} />
-            <Text size={16} style={styles.tabTitle}>{optionLeft || 'Beauty'}</Text>
-          </Block>
-        </Button>
-        <Button shadowless style={styles.tab} onPress={() => navigation.navigate('Pro')}>
-          <Block row middle>
-            <Icon size={16} name="bag-17" family="ArgonExtra" style={{ paddingRight: 8 }} color={argonTheme.COLORS.ICON}/>
-            <Text size={16} style={styles.tabTitle}>{optionRight || 'Fashion'}</Text>
-          </Block>
-        </Button>
-      </Block>
-    );
-  }
+
   renderTabs = () => {
     const { tabs, tabIndex, navigation } = this.props;
     const defaultTab = tabs && tabs[0] && tabs[0].id;
@@ -165,8 +41,6 @@ class Header extends React.Component {
     if (search || tabs || options) {
       return (
         <Block center>
-          {search ? this.renderSearch() : null}
-          {options ? this.renderOptions() : null}
           {tabs ? this.renderTabs() : null}
         </Block>
       );
@@ -193,7 +67,6 @@ class Header extends React.Component {
           title={title}
           style={navbarStyles}
           transparent={transparent}
-          right={this.renderRight()}
           rightStyle={{ alignItems: 'center' }}
           left={
             <Icon 

diff --git a/components/ImagePickerComponent.js b/components/ImagePickerComponent.js
@@ -1,10 +1,11 @@
 import React, { useState, useEffect } from "react";
-import { Button, Image, View, Text } from "react-native";
+import { Button, View } from "react-native";
 import * as ImagePicker from "expo-image-picker";
 import Constants from "expo-constants";
 import axios from "axios";
+import { withNavigation } from "@react-navigation/compat";
 
-const ImagePickerComponent = () => {
+const ImagePickerComponent = ({ navigation }) => {
   const [selectedImage, setSelectedImage] = useState(null);
 
   useEffect(() => {
@@ -55,29 +56,23 @@ const ImagePickerComponent = () => {
       );
       // 백엔드로부터의 응답을 처리하세요.
       console.log(response.data);
+
+      // 이미지 선택 후에 새로운 스택창을 띄웁니다.
+      navigation.push("NewStackScreen", { selectedImage });
     } catch (error) {
       console.error(error);
     }
   };
 
   return (
-    <View
-      style={{
-        backgroundColor: "white",
-        flex: 1,
-        alignItems: "center",
-        justifyContent: "center",
-      }}
-    >
-      <Button title="이미지 선택해서 보내기" onPress={pickImageAndSend} />
-      {selectedImage && (
-        <Image
-          source={{ uri: selectedImage.uri }}
-          style={{ width: 200, height: 200 }}
-        />
-      )}
+    <View>
+      <Button
+        title="이미지 선택"
+        style={{ fontSize: 18, color: "white" }}
+        onPress={pickImageAndSend}
+      />
     </View>
   );
 };
 
-export default ImagePickerComponent;
+export default withNavigation(ImagePickerComponent);
diff --git a/screens/Home.js b/screens/Home.js
@@ -14,6 +14,8 @@ import ImagePicker from "../components/ImagePickerComponent";
 import { Camera } from "expo-camera";
 import { createStackNavigator } from "@react-navigation/stack";
 import NewStackScreen from "./NewStackScreen"; // 경로를 실제 파일 경로로 변경하세요.
+import ImagePickerComponent from "../components/ImagePickerComponent";
+import Header from "../components/Header"; // Import the Header component
 
 const Stack = createStackNavigator();
 
@@ -178,25 +180,42 @@ class Home extends React.Component {
       </Modal>
     );
   };
-
   renderArticles = () => {
     return (
       <ScrollView
         showsVerticalScrollIndicator={false}
         contentContainerStyle={styles.articles}
       >
         <Block>
-          <ImagePicker />
           {this.state.hasPermission && (
             <View>
               <TouchableOpacity
                 style={styles.cameraButton}
                 onPress={this.openCamera}
               >
                 <Text style={{ fontSize: 18, color: "white" }}>
-                  카메라 열기
+                  Open Camera
                 </Text>
               </TouchableOpacity>
+              <TouchableOpacity
+                style={styles.cameraButton}
+                onPress={this.pickImageAndSend}
+              >
+                <ImagePickerComponent
+                  onImageSelected={(selectedImage) => {
+                    this.setState({ selectedImage });
+                    this.props.navigation.push("NewStackScreen", {
+                      selectedImage,
+                    });
+                  }}
+                />
+              </TouchableOpacity>
+              {this.state.selectedImage && (
+                <Image
+                  source={{ uri: this.state.selectedImage.uri }}
+                  style={{ width: 200, height: 200 }}
+                />
+              )}
               {this.renderCameraModal()}
             </View>
           )}
@@ -208,7 +227,7 @@ class Home extends React.Component {
   render() {
     return (
       <Stack.Navigator initialRouteName="Home">
-        <Stack.Screen name="Home">
+        <Stack.Screen name="Home" >
           {() => (
             <Block flex center style={styles.home}>
               {this.renderArticles()}

diff --git a/screens/NewStackScreen.js b/screens/NewStackScreen.js
@@ -2,13 +2,12 @@ import React from "react";
 import { View, Text } from "react-native";
 
 const NewStackScreen = ({ route }) => {
-  const { data } = route.params;
+  const { data } = route.params || {}; // 안전하게 접근
 
   return (
     <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
-      {/* <Text>{JSON.stringify(data)}</Text>{" "} */}
-      {/* Or however you want to display the data */}
       <Text>약물분석로그</Text>
+      {/* 여기서 data를 사용하거나 출력할 수 있음 */}
     </View>
   );
 };