[React Native] Navigation Basics - 설치, 타입, 옵션, 활용, Flow 설계, Flow 활용, UseCase

React Native
Nadan
Nadan Dev Blog

React Navigation Basics 1 - 설치, 타입, 옵션, 활용, Flow 설계, Flow 활용, UseCase

● Docs

https://reactnavigation.org/docs/tab-based-navigation/

● React Navigation 타입

navigation 1

  • createStackNavigator
  • createSwitchNavigator
  • createBottomTabNavigator
  • createDrawerNavigator

● React Navigation 설치

React Navigation

  • react-navigation
  • react-native-gesture-handler
  • react-native-reanimated
  • react-native-screens
  • react-native-safe-area-context
  • @react-native-community/masked-view

React Navigation Stack

  • react-navigation-stack
  • @react-native-community/masked-view

React Navigation Tabs

  • react-navigation-tabs

● Import

import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';

● React Navigation Options

  • defaultNavigationOptions

    • title
    • initialRoutes

  • navigationOptions

    • title
    • tabBarIcon
navigationOptions = () => {
    return {
        title: 'Add Track',
        tabBarIcon: <FontAwesome name="plus" size={20} />
    }
}

● React Navigation Flow 설계

안드로이드랑 다른 점이 안드로이드는 시스템에서 화면 전환을 담당하고, 플래그 값으로 조정했는데, 리액트 네이티브는 다른 네비게이션을 사용하려면 처음 설계부터가 달라야 하기 때문에 처음부터 어떤 네이게이션을 사용할지 설계를 해야 하는군

navigation 2

navigation 3

예시 -> 예시 변경

import { FontAwesome } from '@expo/vector-icons';

const trackListFlow = createStackNavigator({
  TrackList: TrackListScreen,
  TrackDetail: TrackDetailScreen
});

trackListFlow.navigationOptions = {
  title: 'Tracks',
  tabBarIcon: <FontAwesome name="th-list" size={20} />
}

const switchNavigator = createSwitchNavigator({
  loading: LoadingScreen,
  loginFlow: createStackNavigator({
    SignUp: SignUpScreen,
    SignIn: SignInScreen
  }),
  mainFlow: createBottomTabNavigator({
    trackListFlow,
    TrackCreate: TrackCreateScreen,
    Account: AccountScreen 
  })
});

● React Navigation 화면간 이동

화면 전환

navigation.navigate("Settings")

뒤로가기

이전 화면으로 돌아갈 수 있는 navigation 함수

navigation.pop()

● React Navigation 화면간 데이터 전달

데이터 전달

onPress={() => navigation.navigate('ResultsShow', { id: item.id })}>
onPress={() => navigation.navigate('Edit', { id: navigation.getParam('id') })}

데이터 가져오기

navigation.getParam('id')

● React Navigation Props 전체

navigation 4

● UseCase1 bottomTabNavigator 사용할 때 header 사라짐 방지

이 경우 stacknavigator로 감싸줘야 함

navigator = createSwitchNavigator({
    Launcher,
    loginFlow: createStackNavigator({
        SignIn,
        SignUp
    }),
    mainFlow: createBottomTabNavigator({
        trackListFlow: createStackNavigator({
            TrackList,
            TrackDetail
        }, {
            navigationOptions: {
                tabBarIcon: <Feather name="list" size={24} color="black" />
            }
        }),
        TrackCreate : createStackNavigator({ 
            TrackCreate 
        }, {
            navigationOptions: {
                tabBarIcon: <AntDesign name="plus" size={24} color="black" />
            }
        }),
        Account : createStackNavigator({ 
            Account 
        }, {
            navigationOptions: {
                tabBarIcon: <MaterialCommunityIcons name="account-circle-outline" size={24} color="black" />
            }
        })
    }, {
        tabBarOptions: {
            showLabel: false
        },
        headerShown: true
    })
});

● UseCase2 특정 화면에서 bottom navigation 보이지 않게 하기

track list → track detail로 갈 때, detail 화면에서 하단 탭이 보이지 않게 하기 위해 구조를 변경함. 서로 탭끼리 움직여야 하는 애들을 createBottomTabNavigator 안에 배치하고, 해당 탭에서 가고 싶은 화면은 createBottomTabNavigator 밖에 stack으로 배치한다

기존 코드

const trackListFlow = createStackNavigator({
  TrackList, 
  TrackDetail
});

trackListFlow.navigationOptions = {
  tabBarIcon: <Feather name="list" size={24} color="black" />
};

const mainNavigator = createSwitchNavigator({
  Launcher,
  loginFlow: createStackNavigator({
    SignIn, 
    SignUp
  }),
  mainFlow: createBottomTabNavigator({
    trackListFlow,
    TrackCreate,
    Account
  }, {
    tabBarOptions: { 
      showLabel: false
    }
  })
});

변경 코드

const mainNavigator = createSwitchNavigator({
  Launcher,
  loginFlow: createStackNavigator({
    SignIn, 
    SignUp
  }),
  mainFlow: createStackNavigator({
    tabFlow: createBottomTabNavigator({
      TrackList,
      TrackCreate,
      Account
    }, {
      tabBarOptions: { 
        showLabel: false,
      },
      navigationOptions: {
        headerShown: false
      }
    }),
    TrackDetail,
  })
});