[React Native] Navigation으로 화면 이동하기 (Navigation Between Screens)

안녕하세요 Foma 입니다!

 

오늘은 리액트 네이티브에서 네비게이션을 사용하여 스크린을 이동하는 방법에 대해 알아보도록 하겠습니다.

 

바로 시작할게요~

 

언어는 TypeScript, 환경은 Expo로 진행 하겠습니다!

---

Install

 

Native

 

npm install @react-navigation/native @react-navigation/native

 

 

Native-stack

 

npm install @react-navigation/native @react-navigation/native-stack

 

 

Safe-area-context

 

expo install react-native-screens react-native-safe-area-context

---

Navigation Initial Setting

 

App.tsx

 

초기 화면을 Navigation의 화면으로 세팅해 줍니다

 

import { StatusBar } from "expo-status-bar";
import Navigation from "./navigation";

export default function App() {
  return (
    <>
      <Navigation />
      <StatusBar style="auto" />
    </>
  );
}

---

Create two screens

 

이동할 두 화면 ScreenA, ScreenB를 각 만들어 줍니다.

 

ScreenA.tsx

 

import { View, Text, Button } from "react-native";

export default function ScreenA({ navigation }: any) {
  return (
    <View>
      <Text>I am a screen A</Text>
      <Button
        title="Go to ScreenB"
        onPress={() => navigation.navigate("ScreenB")}
      />
    </View>
  );
}

 

ScreenB.tsx

 

import { View, Text, Button } from "react-native";

export default function ScreenB({ navigation }: any) {
  return (
    <View>
      <Text>I am a screen B</Text>
      <Button
        title="Go to ScreenA"
        onPress={() => navigation.navigate("ScreenA")}
      />
    </View>
  );
}

---

Create a native stack navigator

 

네이게이션 정보를 Stack으로 담을 코드를 작성해 줍니다.

 

NavigationContainer: 네비게이션 스택을 담는 공간

 

Stack.Navigator:Screen을 스택으로 담을 공간

 

Stack.Screen:Stack으로 쌓을 Screen

 

index.tsx

 

import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { NavigationContainer } from "@react-navigation/native";

import ScreenB from "../screens/ScreenB";
import ScreenA from "../screens/ScreenA";

const Stack = createNativeStackNavigator();

export default function Navigation() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="ScreenA">
        <Stack.Screen name="ScreenA" component={ScreenA} />
        <Stack.Screen name="ScreenB" component={ScreenB} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

---

Test

 

Screen A 화면에서 Go to ScreenB 버튼을 누르면 Screen B 화면으로 이동하고,

 

Screen B 화면에서 Go to Screen A 버튼을 누르면 Screen A 화면으로 이동하게 된다.

 

---

Resolution

 

만약 아래와 같이 "'Stack.Navigator' cannot be used as a JSX component" 에러가 발생한다면 @types/react의 버전이 달라서 발생한 것입니다.

 

 

package.json으로 이동해서 resolution을 추가 해준 뒤 @types/react의 버전을 가장 최근 것으로 바꿔줍니다.

 

 "resolutions": {
    "@types/react": "17.0.43" //lastest version
  },

 

그 다음 npm install을 해주고 프로젝트를 껐다가 다시 켜면 오류가 해결될 것입니다.

 

npm install

 

가장 최신 버전을 알고 싶다면 아래 사이트로 이동해서 확인하시면 됩니다.

 

@types/react

---

Reference

 

Navigating Between Screens · React Native