[React Native] 초기 프로젝트 스켈레톤, 라우팅 설정

프로젝트를 처음 시작하면, 생각보다 막막한 것이 라우팅 구조 생성이다.
미리 템플릿이 있으면 요긴하게 사용할 수 있겠다 싶어서 적는 글.

기본 packages 설치하기

yarn add @react-navigation/native @react-navigation/stack 
yarn add react-native-gesture-handler 
yarn add react-native-safe-area-context 
yarn add react-native-screens styled-components

가독성을 위해 줄바꿈을 했지만 한 번에 설치해도 된다

페이지 구조 설정하기

// /src/types/RootStackParamList.ts

export type RootStackParamList = {
    Onboarding: undefined;
    Start: undefined;
    Select: undefined;
    Local: undefined;
    Travel: undefined;
    Items: undefined;
    Main: undefined;
};

용도에 맞게 페이지들을 설정하자.

// App.tsx

import React from 'react';
import { RecoilRoot } from 'recoil';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { RootStackParamList } from './src/types/RootStackParamList';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import StartScreen from './src/screens/Start';
import OnboardingScreen from './src/screens/Onboarding';
import SelectScreen from './src/screens/Select';
import LocalScreen from './src/screens/Local';
import TravelScreen from './src/screens/Travel';

const RootStack = createStackNavigator<RootStackParamList>();

const App = () => {
  return (
    <RecoilRoot>
      <NavigationContainer>
          <RootStack.Navigator screenOptions={{ headerShown: false }}>
              <RootStack.Screen name="Onboarding" component={OnboardingScreen} />
              <RootStack.Screen name="Start" component={StartScreen}/>
              <RootStack.Screen name="Select" component={SelectScreen}/>
              <RootStack.Screen name="Local" component={LocalScreen}/>
              <RootStack.Screen name="Travel" component={TravelScreen}/>
          </RootStack.Navigator>
      </NavigationContainer>
    </RecoilRoot>
  );
};

export default App;

App.tsx 에 nativage할 페이지들을 추가해주자.

Navigate 예시

// /src/screens/Onboarding.tsx

import React, { useEffect } from 'react';
import { Image, SafeAreaView, Text } from 'react-native';
import { StackNavigationProp } from '@react-navigation/stack';
import { RootStackParamList } from '../types/RootStackParamList';
import styled from 'styled-components';

type OnboardingScreenNavigationProp = StackNavigationProp<
    RootStackParamList,
    'Onboarding'
>;

type Props = {
    navigation: OnboardingScreenNavigationProp;
};

const OnboardingScreen = (props: Props) => {
    const { navigation } = props;

    useEffect(() => {
        setTimeout(() => navigation.navigate('Start'), 3000);
    }, [navigation]);

    return (
        <CenterSafeAreaView>
            <StyledText>Onboarding Screen</StyledText>
        </CenterSafeAreaView>
    );
};

const CenterSafeAreaView = styled(SafeAreaView)`
    flex: 1;
    justify-content: center;
    align-items: center;
`;
const StyledText = styled(Text)`
		font-size: 20%;
`
export default OnboardingScreen;

예시로 온보딩 스크린을 가져왔는데, props에서 navigation을 가져오고,
navigation.navigate('갈 곳') 이런 식으로 페이지를 이동할 수 있다.
갈 곳의 이름은 App.tsx의 name 부분에 지정해준 페이지의 이름이다.