React navigation (1)

1. NavigationContainer

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

• navigation tree를 관리하고 navigation state를 포함하는 구성 요소.
• 이 구성 요소는 모든 네비게이터 구조를 랩핑해야하며, 즉, Root에 있어야한다. 때문에 일반적으로 App.tsx 에 랩핑한다.

2. createStackNavigator

import {createStackNavigator} from '@react-navigation/stack';

const Stack = createStackNavigator();

 <Stack.Navigator
 initialRouteName="RootTab"
 screenOptions={{
 headerShown: false,
}}>
  <Stack.Screen name="RootTab" component={RootTab} />
</Stack.Navigator>

• Screen 및 Navigator라는 두 가지 속성이 포함 된 객체를 반환하는 함수.
  • Stack.Navigator는 Screen들의 부모라고 생각하면 될 거 같다. 예를 들어, Stack.Navigator에서 내비게이터의 스타일을 지정해주면, Screen 하나하나에 스타일을 부여하지 않아도 부모를 따라간다.
  • 타이틀을 공통으로 가져가고 싶다면 screenOptions={{ title: 'hello' }} 을 사용한다.
  • <Stack.Navigator initialRouteName="Home" screenOptions={{ title: 'hello' }} >
  • Stack.Screen은 컴포넌트를 포함한 페이지들이라고 보면 된다. 내비게이터의 가장 작은 단위이며 여기에 페이지가 정의되지 않으면 해당 페이지로 이동할 수 없다. Screen마다 세세한 스타일이나 타이틀을 부여하고 싶다면 하나하나 옵션을 넣어준다.
• <Stack.Navigator initialRouteName="Home">
  • initialRouteName : 초기 경로를 지정한다. 말 그대로 '초기 경로'이기 때문에, 한 번 initailRouteName이 생성되었다면(페이지에 진입했다면) 추후 router 등으로 initialRouteName을 동적으로 바꾸는 건 불가능하다.
  • <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'hello' }} />
• 화면마다 title을 다르게 지정하고 싶다면 Screen에서 option에 title을 따로 지정해준다.

3. createBottomTabNavigator

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();

• BottomTab을 사용하고 싶을 때 사용한다. 원리는 2 번과 같다.
• 하나의 바텀 내비게이션이 Focus가 되었을 때 아이콘의 색깔을 바꾸고 싶다면 options 에서 삼항조건문을 사용하면 된다.

export const BottomTab = () => {
  return (
    <Tab.Navigator
      initialRouteName="HomeTab"
      screenOptions={{
        headerShown: false,
        tabBarLabelStyle: {
          fontSize: Theme.fontSize(12),
        },
        tabBarStyle: {
          height: 56,
          paddingTop: Theme.height(5),
          paddingBottom: Theme.height(5),
        },
        tabBarHideOnKeyboard: true,
        tabBarActiveTintColor: '#005500',
      }}>
      <Tab.Screen
        name="HomeTab"
        component={HomeTab}
        options={{
          tabBarLabel: '홈',
          tabBarIcon: ({focused}) => (focused ? <IconHomeAct /> : <IconHome />),
        }}
      />
      <Tab.Screen
        name="WeatherTab"
        component={WeatherTab}
        options={{
          tabBarLabel: '날씨',
          tabBarIcon: ({focused}) =>
            focused ? <IconWeatherAct /> : <IconWeather />,
        }}
      />
      <Tab.Screen
        name="SettingTab"
        component={SettingTab}
        options={{
          tabBarLabel: '설정',
          tabBarIcon: ({focused}) =>
            focused ? <IconSettingAct /> : <IconSetting />,
        }}
      />
    </Tab.Navigator>
  );
};

4. createMaterialTopTabNavigator

import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
const Tab = createMaterialTopTabNavigator();

• 하나의 페이지에 두 개의 페이지가 같이 있을 때 사용한다. (좌우로 스와이프하면 페이지가 이동되는 것처럼 보이는 내비게이터)
• 원리는 2번과 같다

const Weather = ({route}) => {
  return (
    <Tab.Navigator
      initialRouteName={route.params.pastDate ? '지난 날씨' : '오늘 날씨'}
      screenOptions={{
        swipeEnabled: false,
        tabBarIndicatorStyle: {
          backgroundColor: Theme.colors.main,
        },
        tabBarPressColor: 'transparent',
        tabBarActiveTintColor: Theme.colors.main,
        tabBarInactiveTintColor: Theme.colors.disable,
        tabBarLabelStyle: {
          fontSize: 16,
          fontWeight: 'bold',
        },
      }}>
      <Tab.Screen name="지난 날씨" component={PastWeather} />
      <Tab.Screen name="오늘 날씨" component={TodayWeather} />
      <Tab.Screen name="다음 날씨" component={ForecastWeather} />
    </Tab.Navigator>
  );
};

5. 화면 간 이동

• 보통은 onPress 콜백에 navigation.navigate('Details') 이런 식으로 이동하고 싶은 Screen의 Name을 적어준다.
• navigation.goBack() 뒤로가기 콜백
• navigation.popToTop() 스택의 첫 번째 화면으로 이동
• navigation.pop(index) 스택의 이전 화면으로 돌아감. 하나의 선택적 인수(index)를 사용하여 몇 개의 화면을 다시 표시할지 지정할 수 있습니다.
• https://reactnavigation.org/docs/stack-actions/ 참조

6. 경로에 매개 변수 전달

• navigation.navigate('RouteName', { /* params go here */ })

          navigation.navigate('Details', {
            itemId: 86,
            otherParam: 'anything you want here',
          });

• 이런 식으로 넘겨주면, 해당 스크린에서 route를 받아올 수 있다.

  const Details = ({route}) => {
  const { itemId, otherParam } = route.params;
  return (
    ...
  );
  };
  export default Details;

• setParams 메소드를 사용하면 현재 화면의 매개변수(route.params)를 업데이트할 수 있다.

function ProfileScreen({ navigation: { setParams } }) {
  render() {
    return (
      <Button
        onPress={() =>
          navigation.setParams({
            friends:
              route.params.friends[0] === 'Brent'
                ? ['Wojciech', 'Szymon', 'Jakub']
                : ['Brent', 'Satya', 'Michaś'],
            title:
              route.params.title === "Brent's Profile"
                ? "Lucy's Profile"
                : "Brent's Profile",
          })
        }
        title="Swap title and friends"
      />
    );
  }
}

여기까지는 문서만 보면 알 수 있는 내용이므로 개발하면서 겪었던 이슈는 다음 장에서 다루겠습니다!