[RN]리액트 네이티브-Today I'm Learned (10)"네비게이터"

- 오늘 학습한 내용.

npm install @react-navigation/native

npm install @react-navigation/bottom-tabs

 

네비게이션 적용

 

- 오늘의 코드 내용.

하단 tab  네비게이션을 사용했는데, 

해당 페이지 호출하는 데 있어서 매우 곤란했다.

일일히 호출 해줘야 하는 게 있었는데,

이를 안하고 싶었던 게 있었다

 

stack.screen

일일히 따로 그룹핑해서 화면을 뿌려주는건 감을 잡았는데, 이를 어떻게 보여줄 것인가가 문제였다.

 

구조는 stack 한개, tab 한개로 짰다.

문제점으로

1. stack을 호출하지 않는 컴포넌트로 이동시 navigation.navigate('특정 페이지')가 제대로 호출되지 않았다.

2. 위 문제를 해결하기 위해서 따로 해결하려고 제일 처음 Stack에 해당 컴포넌트를 출력했다.

3. 그랬더니 하단바 사라짐.

 

이를 해결하기 위해서 

하단바가 없는 것을 default로 출력

그 중 한개에서 하단바 호출.

그 호출된 하단바에서 그룹화된 카테고리 컴포넌트 출력방식으로 해결했다.

 

이거 해결하느라 3시간 걸린 것은 함정.

 <ServiceCategory.Navigator>
      <ServiceCategory.Screen 
        name=''
        component=''
        options={{headerShown: false}}
      />
      <ServiceCategory.Screen 
        name=''
        component=''
        options={{headerShown: false}}
      />
      <ServiceCategory.Screen 
        name=''
        component=''
        options={{headerShown: false}}
      />
      <ServiceCategory.Screen 
        name=''
        component=''
        options={{headerShown: false}}
      />
    </ServiceCategory.Navigator>
  );

 <Tab.Navigator initialRouteName='Home'>
      <Tab.Screen
        name='Home'
        component={HomeScreen}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({ color, size }) => (
            <Icon
              name="home"
              color={color}
              size={size} />
          ),
        }}
      />
      <Tab.Screen
        name='Service'
        component={ServiceScreen}
        options={{
          tabBarLabel: 'Service',
          tabBarIcon: ({ color, size }) => (
            <Icon 
              name="ios-bar-chart"
              color={color}
              size={size}
            />
          ),
        }}
      />
      <Tab.Screen
        name='Settings'
        component={SettingsScreen}
        options={{
          tabBarLabel: 'Settings',
          tabBarIcon: ({ color, size }) => (
            <Icon
              name="settings"
              color={color}
              size={size}
            />
          ),
        }}
      />
    </Tab.Navigator>

 

- 소감

개발하기 힘들구만~