From 3cbb030399318e8ce46e90cbe9565544a790af0c Mon Sep 17 00:00:00 2001 From: hobak12 Date: Mon, 9 Jan 2023 03:32:57 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20stack=20=EA=B3=BC=20bottom=20tab=20?= =?UTF-8?q?=EC=9D=B4=EC=9A=A9=ED=95=98=EC=97=AC=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=9D=B4=EB=8F=99=20=EA=B5=AC=ED=98=84=20#1=20#6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- App.js | 18 +++++----------- src/Navigations/Root.js | 20 ++++++++++++++++++ src/Navigations/Stack.js | 0 src/Navigations/Stacks.js | 17 +++++++++++++++ src/Navigations/Tab.js | 0 src/Navigations/Tabs.js | 44 +++++++++++++++++++++++++++++++++++++++ src/screen/EditPage.jsx | 15 +++++++++++++ src/screen/Index.js | 7 +++++++ src/screen/LoginPage.jsx | 18 ++++++++++++++++ src/screen/MainPage.jsx | 15 +++++++++++++ src/screen/MyPage.jsx | 21 +++++++++++++++++++ src/screen/SignupPage.jsx | 18 ++++++++++++++++ 12 files changed, 180 insertions(+), 13 deletions(-) delete mode 100644 src/Navigations/Stack.js create mode 100644 src/Navigations/Stacks.js delete mode 100644 src/Navigations/Tab.js create mode 100644 src/Navigations/Tabs.js diff --git a/App.js b/App.js index 2ebec8b..1012493 100644 --- a/App.js +++ b/App.js @@ -1,23 +1,15 @@ -import { StatusBar } from 'expo-status-bar'; -import { StyleSheet, Text, View } from 'react-native'; import { QueryClientProvider, QueryClient } from 'react-query'; +import { NavigationContainer } from '@react-navigation/native'; +import Root from './src/Navigations/Root'; const queryClient = new QueryClient(); export default function App() { return ( - {/* - */} + + + ); } - -const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: '#fff', - alignItems: 'center', - justifyContent: 'center', - }, -}); diff --git a/src/Navigations/Root.js b/src/Navigations/Root.js index e69de29..e85ffd7 100644 --- a/src/Navigations/Root.js +++ b/src/Navigations/Root.js @@ -0,0 +1,20 @@ +import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import Stacks from './Stacks'; +import Tabs from './Tabs'; + +const Stack = createNativeStackNavigator(); + +const Root = () => { + return ( + + + + + ); +}; + +export default Root; diff --git a/src/Navigations/Stack.js b/src/Navigations/Stack.js deleted file mode 100644 index e69de29..0000000 diff --git a/src/Navigations/Stacks.js b/src/Navigations/Stacks.js new file mode 100644 index 0000000..af2660d --- /dev/null +++ b/src/Navigations/Stacks.js @@ -0,0 +1,17 @@ +import { createNativeStackNavigator } from '@react-navigation/native-stack'; + +import { SignupPage, LoginPage, EditPage } from '../screen/Index'; + +const Stack = createNativeStackNavigator(); + +const Stacks = () => { + return ( + + + + + + ); +}; + +export default Stacks; diff --git a/src/Navigations/Tab.js b/src/Navigations/Tab.js deleted file mode 100644 index e69de29..0000000 diff --git a/src/Navigations/Tabs.js b/src/Navigations/Tabs.js new file mode 100644 index 0000000..12b197b --- /dev/null +++ b/src/Navigations/Tabs.js @@ -0,0 +1,44 @@ +import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; +import { MyPage, MainPage } from '../screen/Index'; +import { Entypo } from '@expo/vector-icons'; +import { FontAwesome } from '@expo/vector-icons'; + +const Tab = createBottomTabNavigator(); + +const Tabs = () => { + return ( + + + focused ? ( + + ) : ( + + ), + }} + name="메인 페이지" + component={MainPage} + /> + + + focused ? ( + + ) : ( + + ), + }} + name="마이 페이지" + component={MyPage} + /> + + ); +}; + +export default Tabs; diff --git a/src/screen/EditPage.jsx b/src/screen/EditPage.jsx index e69de29..c60a473 100644 --- a/src/screen/EditPage.jsx +++ b/src/screen/EditPage.jsx @@ -0,0 +1,15 @@ +import { View, Text, TouchableOpacity } from 'react-native'; + +const EditPage = ({ navigation: { navigate } }) => { + return ( + + navigate('Tabs', { screen: '마이 페이지' })} + > + 마이 페이지로 + + + ); +}; + +export default EditPage; diff --git a/src/screen/Index.js b/src/screen/Index.js index e69de29..f36952d 100644 --- a/src/screen/Index.js +++ b/src/screen/Index.js @@ -0,0 +1,7 @@ +import SignupPage from './SignupPage'; +import MyPage from './MyPage'; +import MainPage from './MainPage'; +import LoginPage from './LoginPage'; +import EditPage from './EditPage'; + +export { SignupPage, MyPage, MainPage, LoginPage, EditPage }; diff --git a/src/screen/LoginPage.jsx b/src/screen/LoginPage.jsx index e69de29..32a96db 100644 --- a/src/screen/LoginPage.jsx +++ b/src/screen/LoginPage.jsx @@ -0,0 +1,18 @@ +import { TouchableOpacity, View, Text } from 'react-native'; + +const LoginPage = ({ navigation: { navigate } }) => { + return ( + + navigate('Tabs', { screen: '메인 페이지' })} + > + 로그인 + + navigate('회원가입')}> + 회원가입 + + + ); +}; + +export default LoginPage; diff --git a/src/screen/MainPage.jsx b/src/screen/MainPage.jsx index e69de29..a919076 100644 --- a/src/screen/MainPage.jsx +++ b/src/screen/MainPage.jsx @@ -0,0 +1,15 @@ +import { View, Text, TouchableOpacity } from 'react-native'; + +const MainPage = ({ navigation: { navigate } }) => { + return ( + + navigate('Stacks', { screen: '로그인' })} + > + 로그아웃 + + + ); +}; + +export default MainPage; diff --git a/src/screen/MyPage.jsx b/src/screen/MyPage.jsx index e69de29..a754974 100644 --- a/src/screen/MyPage.jsx +++ b/src/screen/MyPage.jsx @@ -0,0 +1,21 @@ +import { View, Text, TouchableOpacity } from 'react-native'; + +const MyPage = ({ navigation: { navigate } }) => { + return ( + + navigate('Stacks', { screen: '수정 페이지' })} + > + 수정 페이지로 + + + navigate('Stacks', { screen: '로그인' })} + > + 로그아웃 + + + ); +}; + +export default MyPage; diff --git a/src/screen/SignupPage.jsx b/src/screen/SignupPage.jsx index e69de29..c65055c 100644 --- a/src/screen/SignupPage.jsx +++ b/src/screen/SignupPage.jsx @@ -0,0 +1,18 @@ +import { View, Text, TouchableOpacity } from 'react-native'; + +const SignupPage = ({ navigation: { navigate } }) => { + return ( + + navigate('Tabs', { screen: '메인 페이지' })} + > + 회원가입 + + navigate('로그인')}> + 로그인 페이지로 + + + ); +}; + +export default SignupPage;