[React-Native] React-Navigation :: 화면 전환하기

화면을 전환시켜보자!

React-Navigation

앱 내 화면 간 전환을 처리하기 위해 사용하는 라이브러리

화면을 전환시키는 방법의 차이

Next.js & React

• next/router, react-router
• 화면을 아예 이동하는 방식

React-Native

• React-Navigation 라이브러리를 이용한다.
• React-Navigation에 컨테이너를 만들어 놓고 화면을 가져와서 보여준다.
• 화면을 이동하는 것이 아닌, 하나씩 쌓여가는 stack 방식으로 화면이 전환된다.

---

React-Navigation 설치

[React-Navigation]

1. Navigation 설치

yarn add @react-navigation/native

2. react-native-screens와 react-native-safe-area-context 설치

Navigation으로 만들어진 화면을 디바이스에 보여주는 라이브러리이다.
react navigation을 통해 탐색된 컨테이너를 앱에 노출해주기 위해 사용해야하는 종속 라이브러리
expo install react-native-screens react-native-safe-area-context

expo가 아닌, Xcode나 Android Studio로 개발을 할 경우, Pod을 설치해야 한다.

3.native-stack 설치

yarn add @react-navigation/native-stack

설치 끗

---

React-Navigation 사용 방법

• 실무에서는 app.js를 화면으로 쓰지 않는다. Navigation도 컴포넌트 하나로 뺀다.

1. 기본 폴더 구조를 만든다.

• 스크린들을 네비게이션 안에 import하고, 네비게이션을 app.tsx에 import해서 사용한다.

pages/navigation
pages/screens

2. Navigation에 추가할 screen을 만든다.

• 화면 이동시키기 위해 페이지 함수의 인자로 {navigation}을 받는다.
  navigation은 모든 스크린마다 <Stack.Screen>으로 연결을 해줬으면 모든 컴포넌트에 네비게이션이 연결되어있는 것이라서 별도의 작업 없이 navigation을 가져올 수 있다.
• 화면을 이동시킬 태그에 onPress를 추가한다.
  <MoveScreen onPress={()=>navigation.navigate("screen2")}>
  ⭐️ 3번의 Navigation 컨테이너에서 <Stack.Screen> 태그에 넣은 name의 값을 넣어줘야 한다.

pages/screens/screen1/index.tsx

import {  NativeSyntheticEvent,  Text,  TextInputChangeEventData } from 'react-native';
import styled from '@emotion/native'

export default function Screen1({navigation}) {
    const onChangeInput = (e:NativeSyntheticEvent<TextInputChangeEventData>)=>{
        console.log(e.nativeEvent.text)
    }
  return (
    <ViewContainer>
    <Title>프론트엔드 6기</Title>
    <SubTitle>리액트 네이티브 2일차</SubTitle>
    <Input onChange={onChangeInput} />
    <MoveScreen onPress={()=>navigation.navigate("screen2")}><TouchableTitle>스택 이동</TouchableTitle></MoveScreen>
    <Storage><Text>스토리지 저장</Text></Storage>
  </ViewContainer>
  );
}

pages/screens/screen2/index.tsx

const Screen2 = ()=>{
    return (
        <ViewContainer>
            <Text>여기가 Screen2입니다.</Text>
        </ViewContainer>
    )
}

3. Navigation 컨테이너를 만든다.

• <NavigationContainer>는 한 앱 당 하나만 만들어줘야 오류가 안 난다!
• <Stack.Screen> 태그에는 name과 component 속성이 꼭! 들어가야한다.
• 2번에서 screen을 부를 때는 name으로 불러온다.

pages/navigation/index.tsx

import {NavigationContainer} from "@react-navigation/native"
import {createNativeStackNavigator} from "@react-navigation/native-stack"
import Screen1 from "../screens/screen1"
import Screen2 from "../screens/screen2"

const Stack = createNativeStackNavigator()
const Navigation = ()=>{
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="screen1" component={Screen1}></Stack.Screen>
                <Stack.Screen name="screen2" component={Screen2}></Stack.Screen>
            </Stack.Navigator>
        </NavigationContainer>
    )
}
export default Navigation

4. app.tsx에 3에서 만든 Navigation 컨테이너를 추가한다.

• app.tsx에 연결을 했으니, 이제 화면에서 Navigation에 설정한 화면을 볼 수 있다.

import Navigation from './pages/navigation';

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

---

Nesting Navigator

네비게이터 화면 안에 네비게이터를 렌더링할 경우, 위의 방법대로 하면 중첩 스택이기 때문에 에러가 발생한다.
그룹으로 만들어줘야 한다.

<Stack.Navigator>
  {isLoggedIn ? (
    // Screens for logged in users
    <Stack.Group>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Profile" component={Profile} />
    </Stack.Group>
  ) : (
    // Auth screens
    <Stack.Group screenOptions={{ headerShown: false }}>
      <Stack.Screen name="SignIn" component={SignIn} />
      <Stack.Screen name="SignUp" component={SignUp} />
    </Stack.Group>
  )}
  {/* Common modal screens */}
  <Stack.Group screenOptions={{ presentation: 'modal' }}>
    <Stack.Screen name="Help" component={Help} />
    <Stack.Screen name="Invite" component={Invite} />
  </Stack.Group>
</Stack.Navigator>