React-Native Route 설정 및 Navigation사용하기!

 

리액트네이티브도 리액트 라우터처럼

화면이 이동하는 라우터 설정을 해줘야한다.

 

여기서 사용되는것은

react-navigation/stack이다!

 

 

---

▼react-navigation 공식문서▼

 

https://reactnavigation.org/docs/native-stack-navigator/

https://reactnavigation.org/docs/native-stack-navigator/

---

설치진행!

yarn add @react-navigation/native-stack

 

App.js설정

import "react-native-gesture-handler";
import { NavigationContainer } from "@react-navigation/native";
import { ThemeProvider } from "styled-components/native";
import KakaoLogin from "./Screen/Login/KakaoLogin";
import CommunityRoutes from "./Navigation/CommunityRoutes";
import Theme from "./Theme/Theme";
import MainRoutes from "./Navigation/MainRoutes";
import Login from "./Screen/Login/Login";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Provider, useAtom, useAtomValue, useSetAtom } from "jotai";
import KakaoLogout from "./Screen/Login/KakaoLogout";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { createStackNavigator } from "@react-navigation/stack";
import { isLoggedInAtom } from "./Jotai/atoms/authAtoms";
import MainTab from "./Navigation/MainTab";
import { Suspense, useEffect } from "react";
import AsyncStorage from "@react-native-async-storage/async-storage";
import IsLoading from "./Common/Loading/IsLoading";
import ScreenHeader from "./Common/ScreenHeader/ScreenHeader";
import GeneralLogin from "./Screen/Login/GeneralSignUp";
import GeneralSignUp from "./Screen/Login/GeneralSignUp";

const AuthStack = createStackNavigator();
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      suspense: true,
    },
  },
});

export default function App() {
  const isLoggedIn = useAtomValue(isLoggedInAtom);
  const setIsLoggedIn = useSetAtom(isLoggedInAtom);

  useEffect(() => {
    const getTokenAsync = async () => {
      let userToken;

      try {
        userToken = await AsyncStorage.getItem("accessToken");
      } catch (e) {
        // Restoring token failed
      }
      if (userToken) {
        setIsLoggedIn(true);
      } else {
        setIsLoggedIn(false);
      }
    };

    getTokenAsync();
  }, []);

  return (
    <QueryClientProvider client={queryClient}>
      <NavigationContainer>
        <ThemeProvider theme={Theme}>
          <Suspense fallback={<IsLoading />}>
            <Provider>
              <AuthStack.Navigator
                initialRouteName="Login"
                screenOptions={{
                  headerStyle: {
                    backgroundColor: "#48B7E2",
                  },
                  headerLeft: false,
                }}
              >
                <AuthStack.Screen
                  name="MainTab"
                  component={MainTab}
                  options={{
                    headerTitle: () => <ScreenHeader />,
                  }}
                />
                <AuthStack.Screen
                  name="Login"
                  component={Login}
                  options={{ headerShown: false }}
                />
                <AuthStack.Screen
                  name="KakaoLogin"
                  component={KakaoLogin}
                  options={{ headerShown: false }}
                />
              </AuthStack.Navigator>
            </Provider>
          </Suspense>
        </ThemeProvider>
      </NavigationContainer>
    </QueryClientProvider>
  );
}

지금 플젝중인 App.js 모습이다. 

 

createStackNavigator 를 import하고  

상단에 const AuthStack = createStackNavigator(); 선언하여 return에서 설정한 후 사용한다. 

return에서 provider 안에 navigator설정한다.

 

<AuthStack.Screen
  name="MainTab"
  component={MainTab}
  options={{
  headerTitle: () => <ScreenHeader />,
  }}
/>

설정방법은 만들어놓은 라우터의 이름과 

라우터 설정 컴포넌트를 component = {} 중괄호 안에 넣는다.

 

현재 플젝에서 라우터 설정 컴포넌트는 

Navigation이라는 폴더를 만들어

관리하고있다.

  ┣ Navigation
  ┣ CommunityRoutes.js
  ┣ MainRoutes.js
  ┣ MainTab.js
  ┣ MyPageRoutes.js
  ┣ NoticeRoutes.js
  ┣ SearchRoutes.js
  ┗ Tab.js

플젝에서는 로그인/회원가입이 진행되면

메인화면으로 올수있기에 App.js에서는 로그인과 Tab Bar만 

라우팅설정해놓았다.

 

젤 중요한건 라우팅이 계속 연결이 되어야한다!

로그인해서 메인 >> 메인에서 다른페이지로 연결의

흐름이 끊기면 안된다!

 

 

 const navigation = useNavigation();

 

 이제 메인화면에서 다른 컴포넌트로 전환할때

navigation을 선언해준다. 

 

 <TouchableOpacity
                style={styles.center}
                onPress={() =>
                  navigation.navigate("MainRoutes", {
                    screen: "CategoryDetail",
                    params: { category: "연극/뮤지컬" },
                  })
                }
              >
                <Circle>
                  <Logo source={require("../../assets/Icon/musical.png")} />
                </Circle>
                <Text>연극/뮤지컬</Text>
              </TouchableOpacity>

 

 

TouchableOpacity안에 onPress처리하여 사용한다.

그리고 라우트안에서 이동할때 param으로 값을 주고받고할수있다.

 

위 의 내용에서는 MainRoutes로 전환되는데

Main Routes 컴포넌트는

import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import React from "react";
import CategoryDetail from "../Screen/ContentList/CategoryDetail";
import ContentDetail from "../Screen/ContentList/ContentDetail";
import Main from "../Screen/Main/Main";
import NoticeRoutes from "../Navigation/NoticeRoutes";
import MyPageRoutes from "./MyPageRoutes";
import Search from "../Screen/Search/Search";

const MainStack = createNativeStackNavigator();

function MainRoutes() {
  return (
    <MainStack.Navigator initialRouteName="Main">
      <MainStack.Screen name="Main" options={{ headerShown: false }}>
        {(props) => <Main {...props} />}
      </MainStack.Screen>
      <MainStack.Screen
        name="CategoryDetail"
        component={CategoryDetail}
        options={{ headerShown: false }}
      />
      <MainStack.Screen
        name="ContentDetail"
        component={ContentDetail}
        options={{ headerShown: false }}
      />
      <MainStack.Screen
        name="NoticeRoutes"
        component={NoticeRoutes}
        options={{ headerShown: false }}
      />
      <MainStack.Screen
        name="MyPageRoutes"
        component={MyPageRoutes}
        options={{ headerShown: false }}
      />
      <MainStack.Screen
        name="Search"
        component={Search}
        options={{ headerShown: false }}
      />
    </MainStack.Navigator>
  );
}

export default MainRoutes;

이렇게 설정하여 사용하고있다. 

 

다음 포스팅에서는 라우트에서 Param으로 내용전달받아

사용하는 방법을 포스팅하도록 하겠슴당

 

그럼이만 총총