React Native | React Navigation을 이용한 스크린 이동

1. react-navigation 설치

npm install @react-navigation/native

expo로 만든 프로젝트는 expo에도 설치

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

 

2. NavigationContainer로 감싸기

전체 앱을 NavigationContainer로 감싼다. 이제 navigation처리를 할 준비가 끝났다.

// App.js

import "react-native-gesture-handler";
import React from "react";
import { NavigationContainer } from "@react-navigation/native";

export default function App() {
  return (
    <NavigationContainer>
      {/* */}
    </NavigationContainer>
  );
}

 

3. 스크린 이동해보기

src폴더를 만들고, 그 밑에 Screens폴더를 만들어주었다.

Screens폴더에는 Home.js와 Login.js파일을 생성. 두 스크린 간 이동을 해볼것임.... 

 

 

Login.js도 똑같이 만들어주었다. 텍스트만 다르게..

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

function Home() {
  return (
    <View>
      <Text>Home!</Text>
    </View>
  );
}

export default Home;

 

우선 stack 네이게이터 라이브러리를 설치한다.

npm install @react-navigation/stack

 

✔️createStackNavigator는 Screen과 Navigator 두 가지 속성을 포함하는 객체를 반환하는 함수

✔️initialRouteName에 기본적으로 렌더링할 화면을 등록

✔️options를 통해 헤더 제목을 바꾸거나 네비게이터 옵션을 지정할 수 있음

import "react-native-gesture-handler";
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

import Home from "./src/Screens/Home";
import Login from "./src/Screens/Login";

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Login" component={Login} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

 

그리고 화면 이동을 위해 Home.js와 Login.js를 수정한다

✔️navigation props를 통해 화면간 이동이 가능해진다!

✔️navigation.naviagate()대신에 navigation.push()를 사용할 수 있음

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

function Home({ navigation }) {
  return (
    <View>
      <Text>Home!</Text>
      <Button
        title="Go to Login"
        onPress={() => navigation.navigate("Login")}
      />
    </View>
  );
}

export default Home;

잘...된다...

---

 

Moving between screens | React Navigation