React-native navigation 기본개념

최근 포트폴리오작업물,레주메 만드느라 한동안 정신이 없었다😭
이제 리액트를 어느정도 숙달을 하여서 네이티브를 배우고 있는데 리액트 기반이긴 하지만 프레임워크에 좀더 가까운 느낌이 든다..(vue를 배웠을때와 비슷한 기분..)

기본적으로 핸드폰으로 구동하는 app을 만드는것이라 컴포넌트를 렌더링 하는것이 아닌 stack을 겹겹이 쌓는 방식이라고 생각하면 될것같다.

react 에서는 react-router-dom 라이브러리를 설치해서 route를 잡고 그안에 렌더링할 component를 정해 주었는데 이와비슷하지만 태그가 조금 달라진것같다.

npm install @react-navigation/native
npm install @react-navigation/native-stack
expo install react-native-screens react-native-safe-area-context

우선 3개의 라이브러리를 설치해준다.(마지막은 expo라이브러리)

그후 App.js에서

우선 설치한 라이브러리를 import해줍니다.

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

const Stack = createNativeStackNavigator();
export default function App (){
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName='메인페이지 stack이름'>
        <Stack.Screen name="라우트명1" component={Home} options={{ title: '홈',
        headerStyle: { backgroundColor: '#29b6f6', }, headerTintColor: '#ffffff',headerTitleStyle: { fontWeight: 'bold', fontSize: 20, }}} />
        <Stack.Screen name="List" component={List} options={{ title:'일정표' }} />
        <Stack.Screen name="SubList" component={SubList} options={{ }} />
        <Stack.Screen name="Headerless" component={HeaderlessScreen} options={{headerShown:false}} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

export와 동시에 함수를 만들어서 사용하면 함수형 컴포넌트형식으로 만들때보다 컴포넌트명이 바뀔때 두번에서 한번으로 줄기때문에 이렇게 만들었습니다

Stack으로 선언한 변수는 긴이름을 변수에 담아둔것이고 react-router-dom의 route와 비슷한 개념입니다.

initialRouteName = 메인페이지로 사용할 stack의 name값
name = stack명 지정
component = 컴포넌트명
options = title:컴포넌트의 상단 네비게이션 타이틀네임
등 다른 옵션들 코드를 넣을때 사용

기본 틀은
 <NavigationContainer>
 	<Stack.Navigator initialRouteName='메인페이지 stack이름'>
    	<Stack.Screen name="List" component={List} options={{ title:'일정표' }} />
    </Stack.Navigator>
 <NavigationContainer>

리액트 hashrouter,routes,route 와비슷한 구조로 되어있고 이름이 다를뿐이다.