diff --git a/components/ImagePickerComponent.js b/components/ImagePickerComponent.js
index 94f49fd..7c1e9e7 100644
--- a/components/ImagePickerComponent.js
+++ b/components/ImagePickerComponent.js
@@ -1,5 +1,5 @@
import React, { useState, useEffect } from "react";
-import { Button, View } from "react-native";
+import { TouchableOpacity, Text, View } from "react-native";
import * as ImagePicker from "expo-image-picker";
import Constants from "expo-constants";
import axios from "axios";
@@ -54,10 +54,10 @@ const ImagePickerComponent = ({ navigation }) => {
},
}
);
- // 백엔드로부터의 응답을 처리하세요.
+ // Handle response from backend
console.log(response.data);
- // 이미지 선택 후에 새로운 스택창을 띄웁니다.
+ // Open a new stack screen after image selection
navigation.push("NewStackScreen", { selectedImage });
} catch (error) {
console.error(error);
@@ -65,14 +65,40 @@ const ImagePickerComponent = ({ navigation }) => {
};
return (
-
-
-
+
+ 이미지로
+ 분석하기
+
);
};
+const styles = {
+ buttonContainer: {
+ flex: 1,
+ marginHorizontal: 5, // Adjust margin as needed
+ borderRadius: 15, // Add border radius for rounded corners
+ overflow: "hidden", // Ensure content stays within rounded borders
+ elevation: 5, // Add shadow elevation
+ },
+ cameraButton: {
+ justifyContent: "center",
+ alignItems: "center",
+ paddingVertical: 15, // Adjust this value as needed to control the button height
+ borderRadius: 15, // Make it round
+ backgroundColor: "purple",
+ marginVertical: 20,
+ height: 100, // Fixed height for the button
+ },
+ greenButton: {
+ backgroundColor: "green", // Change color to green
+ },
+ buttonText: {
+ fontSize: 25,
+ color: "white",
+ },
+};
+
export default withNavigation(ImagePickerComponent);
diff --git a/components/KakaoLogin.js b/components/KakaoLogin.js
index 5fd037a..f190c99 100644
--- a/components/KakaoLogin.js
+++ b/components/KakaoLogin.js
@@ -35,7 +35,7 @@ const KakaoLogin = ({ navigation }) => {
})
.then(function (response) {
console.log("Backend Response:", response);
- navigation.navigate("App");
+ navigation.navigate("Home");
})
.catch(function (error) {
console.log("Backend Error:", error);
diff --git a/screens/Home.js b/screens/Home.js
index 688e4f4..52906d1 100644
--- a/screens/Home.js
+++ b/screens/Home.js
@@ -17,6 +17,9 @@ import NewStackScreen from "./NewStackScreen"; // 경로를 실제 파일 경로
import ImagePickerComponent from "../components/ImagePickerComponent";
import Header from "../components/Header"; // Import the Header component
+import { Card } from "../components";
+import articles from "../constants/articles";
+
const Stack = createStackNavigator();
const { width, height } = Dimensions.get("screen");
@@ -186,30 +189,33 @@ class Home extends React.Component {
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.articles}
>
-
+
{this.state.hasPermission && (
-
-
-
- Open Camera
-
-
-
- {
- this.setState({ selectedImage });
- this.props.navigation.push("NewStackScreen", {
- selectedImage,
- });
- }}
- />
-
+
+
+
+ 카메라로
+ 분석하기
+
+
+
+
+ {
+ this.setState({ selectedImage });
+ this.props.navigation.push("NewStackScreen", {
+ selectedImage,
+ });
+ }}
+ />
+
+
{this.state.selectedImage && (
)}
+
+
+ 이약먹어도될까?
+
+
);
};
@@ -227,14 +246,20 @@ class Home extends React.Component {
render() {
return (
-
+
{() => (
{this.renderArticles()}
)}
-
+
);
}
@@ -260,6 +285,36 @@ const styles = StyleSheet.create({
alignItems: "center",
marginVertical: 20,
},
+ buttonContainer: {
+ flex: 1,
+ marginHorizontal: 5, // Adjust margin as needed
+ borderRadius: 15, // Add border radius for rounded corners
+ overflow: "hidden", // Ensure content stays within rounded borders
+ shadowColor: "#000", // Shadow color
+ shadowOffset: {
+ width: 0,
+ height: 2,
+ },
+ shadowOpacity: 0.25, // Shadow opacity
+ shadowRadius: 3.84, // Shadow radius
+ elevation: 5, // Add shadow elevation for Android
+ },
+ cameraButton: {
+ justifyContent: "center",
+ alignItems: "center",
+ paddingVertical: 15, // Adjust this value as needed to control the button height
+ borderRadius: 10, // Make it round
+ backgroundColor: "purple",
+ marginVertical: 20,
+ height: 150, // Fixed height for the button
+ },
+ greenButton: {
+ backgroundColor: "green", // Change color to green
+ },
+ buttonText: {
+ fontSize: 25,
+ color: "white",
+ },
});
export default Home;
diff --git a/screens/NewStackScreen.js b/screens/NewStackScreen.js
index 7f37967..91281cf 100644
--- a/screens/NewStackScreen.js
+++ b/screens/NewStackScreen.js
@@ -1,15 +1,122 @@
-import React from "react";
-import { View, Text } from "react-native";
-const NewStackScreen = ({ route }) => {
- const { data } = route.params || {}; // 안전하게 접근
+import React from 'react';
+import { StyleSheet, Dimensions, ScrollView } from 'react-native';
+import { Block, theme } from 'galio-framework';
- return (
-
- 약물분석로그
- {/* 여기서 data를 사용하거나 출력할 수 있음 */}
-
- );
-};
+import { Card } from '../components';
+import articles from '../constants/articles';
+const { width } = Dimensions.get('screen');
+
+class NewStackScreen extends React.Component {
+ renderArticles = () => {
+ return (
+
+
+
+
+
+
+
+ )
+ }
+
+ render() {
+ return (
+
+ {this.renderArticles()}
+
+ );
+ }
+}
+
+const styles = StyleSheet.create({
+ home: {
+ width: width,
+ },
+ articles: {
+ width: width - theme.SIZES.BASE * 2,
+ paddingVertical: theme.SIZES.BASE,
+ },
+});
export default NewStackScreen;
+
+
+// const NewStackScreen = ({ route }) => {
+// const { data } = route.params || {}; // 안전하게 접근
+
+// return (
+//
+// 약물분석
+//
+// {/* 여기서 data를 사용하거나 출력할 수 있음 */}
+//
+// );
+// };
+
+
+
+// import React from 'react';
+// import { StyleSheet, Dimensions, ScrollView } from 'react-native';
+// import { Block, theme } from 'galio-framework';
+
+// import { Card } from '../components';
+// import articles from '../constants/articles';
+// const { width } = Dimensions.get('screen');
+
+// class NewStackScreen extends React.Component {
+// renderArticles = () => {
+// return (
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+// )
+// }
+
+// render() {
+// return (
+//
+// {this.renderArticles()}
+//
+// );
+// }
+// }
+
+// const styles = StyleSheet.create({
+// home: {
+// width: width,
+// },
+// articles: {
+// width: width - theme.SIZES.BASE * 2,
+// paddingVertical: theme.SIZES.BASE,
+// },
+// });
+
+// export default NewStackScreen;
+
+
+// const NewStackScreen = ({ route }) => {
+// const { data } = route.params || {}; // 안전하게 접근
+
+// return (
+//
+// 약물분석
+//
+// {/* 여기서 data를 사용하거나 출력할 수 있음 */}
+//
+// );
+// };
+
+
diff --git a/screens/Onboarding.js b/screens/Onboarding.js
index dd2da79..9312907 100644
--- a/screens/Onboarding.js
+++ b/screens/Onboarding.js
@@ -7,7 +7,8 @@ import {
Dimensions
} from "react-native";
import { Block, Button, Text, theme } from "galio-framework";
-
+import { NavigationContainer } from "@react-navigation/native";
+import { createStackNavigator } from "@react-navigation/stack";
import KakaoLogin from "../components/KakaoLogin";
const { height, width } = Dimensions.get("screen");