feat : modify the Navigation Structure

- 갤러리 or 직접 찍는 Screen 과 실제 필터를 적용하는 화면을 분리 - Nested Navigatior 적용
hforif · Dec 14, 2020 · 5bca469 · 5bca469
1 parent f6cfd45
commit 5bca469
Show file tree

Hide file tree

Showing 7 changed files with 128 additions and 89 deletions.
diff --git a/__tests__/App-test.js b/__tests__/App-test.js
@@ -10,5 +10,5 @@ import App from '../App';
 // Note: test renderer must be required after react-native.
 
 it('renders correctly', () => {
-  renderer.create(<App />);
+	renderer.create(<App />);
 });
diff --git a/app/App.tsx b/app/App.tsx
@@ -19,7 +19,6 @@ const App = () => {
 				<Stack.Screen
 					name="FilterCamera"
 					component={FilterCamera}
-					options={{title: 'Filter Camera'}}
 				/>
 				<Stack.Screen
 					name="StickerCamera"

diff --git a/app/screens/FilterCamera/FilterCamerBtn.tsx b/app/screens/FilterCamera/FilterCamerBtn.tsx
@@ -8,13 +8,13 @@ interface ButtonProps {
 }
 
 function FilterCamerBtn({title, style, onPressFunc}: ButtonProps) {
-    return (
-        <Button
-            title={title}
-            style={style}
-            onPress={() => onPressFunc()}
-        />
-    );
+	return (
+		<Button
+			title={title}
+			style={style}
+			onPress={() => onPressFunc()}
+		/>
+	);
 }
 
-export default FilterCamerBtn;
+export default FilterCamerBtn;
diff --git a/app/screens/FilterCamera/FilterCamera.tsx b/app/screens/FilterCamera/FilterCamera.tsx
@@ -1,87 +1,27 @@
-import React, {useState} from 'react';
-import {Image, Text, View, StyleSheet} from 'react-native';
-import {filterCameraOptions} from '../../static/imagePickerOption';
-import {LaunchCamera, LaunchGallery} from './../../utils/imagePicker';
-import FilterCamerBtn from './FilterCamerBtn';
-
-const styles = StyleSheet.create({
-	container: {
-		flex: 1,
-		flexDirection: 'column',
-	},
-	content: {
-		flex: 4,
-	},
-	footer: {
-		flex: 1,
-		flexDirection: 'row',
-		flexWrap: 'wrap',
-	},
-	img: {
-		width: 100,
-		height: 200,
-	},
-	btn: {},
-});
+import React from 'react';
+import {NavigationContainer} from '@react-navigation/native';
+import {createStackNavigator} from '@react-navigation/stack';
+import FilterCameraSelctionScreen from './FilterCameraSelectionScreen';
+import FilterCameraResultScreen from './FilterCameraResultScreen';
 
 function FilterCamera() {
-	const [photoUri, setPhotoUri] = useState<string>('');
-	const CameraBtnClickListener = (): void => {
-		LaunchCamera(filterCameraOptions)
-			.then((newUri) => {
-				setPhotoUri(newUri);
-			})
-			.catch((err) => {
-				Error(err);
-			});
-	};
-
-	const GalleryBtnClickListener = (): void => {
-		LaunchGallery(filterCameraOptions)
-			.then((newUri) => {
-				setPhotoUri(newUri);
-			})
-			.catch((err) => {
-				Error(err);
-			});
-	};
-
-	const SubmitBtnClickListener = () => {
-		console.log('제출!');
-	};
+	const Stack = createStackNavigator();
 
 	return (
-		<View style={styles.container}>
-			<View style={styles.content}>
-				{photoUri !== '' ? (
-					<Image
-						style={styles.img}
-						source={{
-							uri: `${photoUri}`,
-						}}
-					/>
-				) : (
-					<Text>사진이 아직 없어요!</Text>
-				)}
-			</View>
-			<View style={styles.footer}>
-				<FilterCamerBtn
-					title="카메라"
-					style={styles.btn}
-					onPressFunc={CameraBtnClickListener}
-				/>
-				<FilterCamerBtn
-					title="갤러리"
-					style={styles.btn}
-					onPressFunc={GalleryBtnClickListener}
+		<NavigationContainer>
+			<Stack.Navigator>
+				<Stack.Screen
+					name="Selection"
+					component={FilterCameraSelctionScreen}
+					options={{title: '사진 선택하기'}}
 				/>
-				<FilterCamerBtn
-					title="제출"
-					style={styles.btn}
-					onPressFunc={SubmitBtnClickListener}
+				<Stack.Screen
+					name="Result"
+					component={FilterCameraResultScreen}
+					options={{title: '필터 적용하기'}}
 				/>
-			</View>
-		</View>
+			</Stack.Navigator>
+		</NavigationContainer>
 	);
 }
 

diff --git a/app/screens/FilterCamera/FilterCameraResultScreen.tsx b/app/screens/FilterCamera/FilterCameraResultScreen.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import {View, Text} from 'react-native';
+
+function FilterCameraResultScreen() {
+	return (
+		<View>
+			<Text> 결과 창</Text>
+		</View>
+	);
+}
+
+export default FilterCameraResultScreen;
diff --git a/app/screens/FilterCamera/FilterCameraSelectionScreen.tsx b/app/screens/FilterCamera/FilterCameraSelectionScreen.tsx
@@ -0,0 +1,88 @@
+import React, {useState} from 'react';
+import {Image, Text, View, StyleSheet} from 'react-native';
+import {filterCameraOptions} from '../../static/imagePickerOption';
+import {LaunchCamera, LaunchGallery} from '../../utils/imagePicker';
+import FilterCamerBtn from './FilterCamerBtn';
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		flexDirection: 'column',
+	},
+	content: {
+		flex: 4,
+	},
+	footer: {
+		flex: 1,
+		flexDirection: 'row',
+		flexWrap: 'wrap',
+	},
+	img: {
+		width: 100,
+		height: 200,
+	},
+	btn: {},
+});
+
+function FilterCameraSelctionScreen() {
+	const [photoUri, setPhotoUri] = useState<string>('');
+	const CameraBtnClickListener = (): void => {
+		LaunchCamera(filterCameraOptions)
+			.then((newUri) => {
+				setPhotoUri(newUri);
+			})
+			.catch((err) => {
+				Error(err);
+			});
+	};
+
+	const GalleryBtnClickListener = (): void => {
+		LaunchGallery(filterCameraOptions)
+			.then((newUri) => {
+				setPhotoUri(newUri);
+			})
+			.catch((err) => {
+				Error(err);
+			});
+	};
+
+	const SubmitBtnClickListener = () => {
+		console.log('제출!');
+	};
+
+	return (
+		<View style={styles.container}>
+			<View style={styles.content}>
+				{photoUri !== '' ? (
+					<Image
+						style={styles.img}
+						source={{
+							uri: `${photoUri}`,
+						}}
+					/>
+				) : (
+					<Text>사진이 아직 없어요!</Text>
+				)}
+			</View>
+			<View style={styles.footer}>
+				<FilterCamerBtn
+					title="카메라"
+					style={styles.btn}
+					onPressFunc={CameraBtnClickListener}
+				/>
+				<FilterCamerBtn
+					title="갤러리"
+					style={styles.btn}
+					onPressFunc={GalleryBtnClickListener}
+				/>
+				<FilterCamerBtn
+					title="제출"
+					style={styles.btn}
+					onPressFunc={SubmitBtnClickListener}
+				/>
+			</View>
+		</View>
+	);
+}
+
+export default FilterCameraSelctionScreen;
diff --git a/app/screens/Home/Home.tsx b/app/screens/Home/Home.tsx
@@ -21,7 +21,7 @@ const styles = StyleSheet.create({
 
 const Home = ({navigation}) => {
 	const navigateToFilterScreen = () => {
-		navigation.navigate('FilterCamera');
+		navigation.navigate('FilterCamera', {screen: 'FilterCameraSelectionScreen'});
 	};
 
 	const navigateToStickerScreen = () => {