React-native 코드 분석하기 - stack navigator

AN JUHYUN·2024년 2월 19일

react-native 개발일지

목록 보기

8/15

공부가 너무 부족해서 어플개발하는 팀워크에 들어갔으나 아무것도 손을 못대는 상태이다.
이대로는 안되겠다 싶으니 코드분석을 통해서 구조를 스스로 알아보도록 한다.

로컬에서 실행하기

1. visual studio code

vs코드에 터미널을 실행하고 cmd창에 npm run start를 한다.

npm run start는 package.json에 scripts안에 정의한 것을 실행하는 커맨드이다.

2. 안드로이드 스튜디오 에뮬레이터 실행

안드로이드 스튜디오에 디바이스 매니저로 미리 설정해놓은 디바이스를 실행한다.

visual studio code 어플 실행하기

vs코드의 새 터미널을 열어서 cmd창에 npm run android를 한다.

디렉토리 구조 확인

프로젝트 디렉토리 구조는 다음과 같았다.

android : 안드로이드로 프로젝트 폴더
1) build.gradle : 안드로이드 앱을 빌드 배포할때 사용
2) app/src/main/res : 앱의 리소스 관리폴더(아이콘, 시작화면 등)
3) app/src/java/com/awesomeproject/MainActivity.kt : 안드로이드 앱 메인파일
ios : ios 프로젝트 폴더
assets : 이미지 저장폴더
node_module : npm 설치 모듈 폴더(package.json에 기록된 모듈버전에 의존하여 설치됨)
screen : 코드구현부
1) screen/route : 라우터 구성 index.tsx가 위치
2) screen/View : 실체 화면 구성페이지 위치
- 이쪽에 코드를 구성하면 된다.
package.json : 모듈 버전관리, dependencies를 통해 설치모듈 확인가능
index.js : 리액트 네이티브 시작파일
npx react-naive run-android를 실행하면 처음 실행하는 파일
이 파일을 시작으로 리액트 네이티브 코드 번들링 된다(묶어줌)
tsconfig.json : 타입스크립트 설정파일 - 타입스크립트 컴파일이 해당파일을 읽음

index.js

import React from 'react';
import { AppRegistry } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { name as appName } from './app.json'
import Main from './screen/View/Main';
import BottomTab from './screen/View/Tab/BottomTab';

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Main" component={Main} options= {
          {
            headerShown : false
          }
        }/>
        <Stack.Screen name="Tabs" component={BottomTab} options={
          {
            headerShown : false
          }
        } />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

AppRegistry.registerComponent(appName, () => App);

Stack Navigator

새로운 스크린으로 이동시키는 네비게이션

npm으로 'react-navigation-stack'을 설치하고 아래와 같이 import 한다.
import { createStackNavigator } from 'react-navigation-stack';
createStackNavigator으로 인스턴스 스택 생성
- 이때 미리 이동하고자 하는 스크린을 정의할 수 있음

// 인스턴스 생성
const Stack = createStackNavigator();

// ... 하단에서 사용
<Stack.Navigator>
	<Stack.Screen 
        	name="Main" 
            component={Main} 
            options= {{headerShown : false}}/>
</Stack.Navigator>

initialRouteName 속성 : 최초 랜더링 시 보여줄 페이지
options 속성 : headerShown속성은 화면에 헤더를 보여줄지에 대한 속성

인스턴스 스택은 최상위 네비게이터로 감싸주어야 한다.

NavigationContainer

앱 상태를 관리하고 최상위 네비게이터를 앱 환경에 연결하는 역할

역할

linking prop과의 딥링크 통합
screen tracking, state persistence 등을 위해 state의 변경사항을 알립니다.
리액트 네이티브의 BackHandler API를 사용해서 안드로이드에서 시스템 뒤로 버튼을 처리합니다.

사용법

const Stack = createNativeStackNavigator();

<NavigationContainer>
	<Stack.Navigator>
		<Stack.Screen 
        	name="Main" 
            component={Main} 
            options= {{headerShown : false}}/>
	</Stack.Navigator>
</NavigationContainer>