React Native - React Navigation

React Native

 

 

✅ React Navigation

---

React Navigation

 

React Navigation은 React Native에서 화면 이동(네비게이션)을 만드는 가장 대표적인 라이브러리

앱의 “화면 스택”, “탭”, “서랍 메뉴”, “딥링크”, “전환 애니메이션” 같은 걸 표준적으로 구성할 수 있다.

React Navigation이 해주는 것

• Stack Navigation: A → B → C처럼 화면을 쌓아가며 이동 (뒤로가기 포함)
• Tab Navigation: 하단 탭(홈/검색/마이페이지 같은)
• Drawer Navigation: 옆에서 나오는 사이드 메뉴
• Nested Navigation: 탭 안에 스택, 스택 안에 탭 같은 조합
• Params 전달: navigate("Detail", { id }) 처럼 화면 간 데이터 전달
• Deep Linking: myapp://detail/123 같은 링크로 특정 화면 열기

 

✅ Bottom Tabs Navigator

---

https://reactnavigation.org/docs/bottom-tab-navigator?config=dynamic

Bottom Tabs Navigator | React Navigation

 

Navigator(stack or tab)를 렌더링하려면 NavigationContainer를 먼저 렌더링 해야 한다.

(app폴더 구조를 사용하는 Expo Router면 필요없다.)

 

Tab.Navigator prop

screenOptions: 다양한 옵션들 설정 가능
(모든 Screen에 같은 설정을 하고 싶다면)

export default function Tabs() {
  return (
    <Tab.Navigator
      initialRouteName="Movies"
      screenOptions={{
        tabBarLabelStyle: {
          backgroundColor: "red",
        },
      }}
    >
      <Tab.Screen name="Movies" component={Movies}></Tab.Screen>
      <Tab.Screen name="Tv" component={Tv}></Tab.Screen>
      <Tab.Screen name="Search" component={Search}></Tab.Screen>
    </Tab.Navigator>
  );
}

 

각 Screen에 설정을 따로 주고 싶다면 각 Screen의 options prop을 사용.

      <Tab.Screen
        name="Tv"
        component={Tv}
        options={{
          tabBarLabelStyle: {
            backgroundColor: "purple",
          },
        }}
      ></Tab.Screen>

 

tabBarIcon

Function that given { focused: boolean, color: string, size: number } returns a React.Node, to display in the tab bar.

      <Tab.Screen
        name="Movies"
        component={Movies}
        options={{
          tabBarIcon: ({focused, color, size }) => (
            <Ionicons name="film-outline" color={color} size={size} />
          ),
        }}
      />

 

 

https://reactnavigation.org/docs/bottom-tab-navigator#options

Bottom Tabs Navigator | React Navigation

 

 

✅ Stack Navigator

---

Stack vs Native Stack

Stack Navigator는 React Navigation에 있는 것이고, javascript로 구현된 것.

(각 Platform의 navigation을 사용하지 않는다. Native로 구현된 navigation보다 성능이 안 좋을 수 있음)

 

Native Stack Navigator는 Native API를 이용해 구현된 것.

createNativeStackNavigator를 사용하여 navigator를 만들면 native로 만든 일반 어플리케이션과 완전히 같은 방식으로 작동하고, 퍼포먼스도 똑같다.

(대신 커스텀 할 수 있는 영역이 조금 줄어든다.)

(공식문서에서는 Native를 추천)

npm install @react-navigation/native-stack

or

npx expo install @react-navigation/native-stack

📌 expo install을 쓰는 이유

현재 Expo SDK 버전에 맞는 버전 자동 선택

iOS/Android 네이티브 의존성 호환 보장

 

Usage

import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { Text, View } from "react-native";

const NativeStack = createNativeStackNavigator();

const ScreenOne = () => (
  <View>
    <Text>One</Text>
  </View>
);
const ScreenTwo = () => (
  <View>
    <Text>Two</Text>
  </View>
);
const ScreenThree = () => (
  <View>
    <Text>Three</Text>
  </View>
);

export default function Stack() {
  return (
    <NativeStack.Navigator>
      <NativeStack.Screen name="One" component={ScreenOne} />
      <NativeStack.Screen name="Two" component={ScreenTwo} />
      <NativeStack.Screen name="Three" component={ScreenThree} />
    </NativeStack.Navigator>
  );
}

 

 

Navigation prop reference

navigate

const ScreenOne = ({ navigation: { navigate } }: any) => (
  <TouchableOpacity onPress={() => navigate("Two")}>
    <Text>Go to Two</Text>
  </TouchableOpacity>
);
const ScreenTwo = ({ navigation: { navigate } }: any) => (
  <TouchableOpacity onPress={() => navigate("Three")}>
    <Text>Go to Three</Text>
  </TouchableOpacity>
);
const ScreenThree = ({ navigation: { goBack } }: any) => (
  <TouchableOpacity onPress={() => goBack()}>
    <Text>Go Back</Text>
  </TouchableOpacity>
);

 

 

Stack.Navigator props

animation

플랫폼의 animation 기본값을 변경할 수 있다. iOS에서는 flip도 사용 가능.

 

headerBackTitleVisible: false -> headerBackButtonDisplayMode: "minimal"

뒤로가기 버튼에 제목을 없애는 속성 이름이 바뀜(iOS only)

 

 

✅ Stack navigator와 Tab navigator 같이 사용하기

---

먼저 Root Stack navigator를 만들고 Tabs와 Stack을 Screen으로 렌더링 한다.

import { createNativeStackNavigator } from "@react-navigation/native-stack";
import Stack from "./Stack";
import Tabs from "./Tabs";

const Nav = createNativeStackNavigator();

export default function Root() {
  return (
    <Nav.Navigator screenOptions={{ headerShown: false }}>
      <Nav.Screen name="Tabs" component={Tabs} />
      <Nav.Screen name="Stack" component={Stack} />
    </Nav.Navigator>
  );
}

 

그리고 Tabs 내의 Movies component에서 props로 navigation내의 navigate와 TouchableOpacity를 사용해 스크린이 눌렸을 때, Stack 컴포넌트 내의 Three Screen으로 이동하기 위해 다음과 같은 코드를 사용.

import { Text, TouchableOpacity } from "react-native";

export default function Movies({ navigation: { navigate } }: any) {
  return (
    <TouchableOpacity
      onPress={() => navigate("Three")}
      style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
    >
      <Text>Movies</Text>
    </TouchableOpacity>
  );
}

다음과 같은 에러 발생 The action 'NAVIGATE' with payload {"name":"Three"} was not handled by any navigator.

서로 다른 Navigator(Stack과 Tab) 사이를 이동하려면 다른 방법을 사용해야 한다.

 

먼저 Stack navigator에 가서 그 다음 Three Screen으로 이동하고 싶다고 적어줘야 함.

import { Text, TouchableOpacity } from "react-native";

export default function Movies({ navigation: { navigate } }: any) {
  return (
    <TouchableOpacity
      onPress={() => navigate("Stack", { screen: "Three" })}
      style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
    >
      <Text>Movies</Text>
    </TouchableOpacity>
  );
}

특정 화면에 들어가서 Stack navigator를 사용할 때, Tab navigator가 보이지 않았으면 할 때 이 방법을 사용한다.

(보통 이렇게 많이 사용)

 

Stack에서만 modal을 사용하고 Search screen으로 돌아갈 때는 modal로 열린 stack을 닫고 돌아가는 방법

<Root.tsx>

export default function Root() {
  return (
    <Nav.Navigator screenOptions={{ headerShown: false }}>
      <Nav.Screen name="Tabs" component={Tabs} />
      <Nav.Screen
        name="Stack"
        component={Stack}
        options={{ presentation: "modal" }}
      />
    </Nav.Navigator>
  );
}

 

<Stack.tsx>

const ScreenThree = ({ navigation }: any) => (
  <TouchableOpacity
    onPress={() => {
      const parent = navigation.getParent();
      parent.goBack();
      requestAnimationFrame(() => {
        parent.navigate("Tabs", { screen: "Search" });
      });
    }}
  >
    <Text>Go to Search</Text>
  </TouchableOpacity>
);

navigation.goBack()은 “현재 Stack 안에서만 뒤로 가는 것”이고
navigation.getParent().goBack()은 “modal로 열린 Stack 자체를 닫는 것”이다.
지금 구조에서는 반드시 parent를 써야 한다.

 

requestAnimationFrame이 필요한 이유
• v7에서는 modal dismiss 애니메이션이 시작되기 전에 navigate하면
• 여전히 “modal 컨텍스트”로 처리되는 경우가 있음
• 한 프레임 늦추면 안정적으로 분리됨