Bottom tabs navigator 배치하기 - 2(아이콘, 배경색)

Bottom tabs navigator 배치하기 - 1

Bottom tabs navigator 배치하기 - 1

이전 글에 이어서 아이콘 설정과, 네비게이션 바를 배치하면서 바뀐 배경색을 변경해본다.

 

1. 아이콘 설정

아이콘은 <Tab.Navigator> 내부에 <Tab.Screen> 의 options 속성에서 변경할 수 있다.

tabBarIcon은 함수 형태의 값을 가져야하며, boolean 형태의 focused와 string 형태의 color 을 인자로 가질 수 있다. focused를 사용하여 해당 항목이 선택 되었을 때와 선택되지 않았을 경우를 구분하여 아이콘을 배치해준다. (삼항연산자를 사용해 배치하였다. !focused ? 파랑 하트 : 분홍하트 → 포커싱 되지 않은 경우가 더 빈번하게 일어날 것이라고 생각해 not연산자를 사용해 순서를 바꿔줬다!)

// BottomTabs.tsx
<Tab.Screen
  name="Home"
  component={Typography_Ex}
  options={{
    tabBarIcon: ({focused}) =>
      !focused ? (
        <Image
          source={require('../Assets/navigation/ic_navigation.png')}
          style={styles.iconStyle}
        />
      ) : (
        <Image
          source={require('../Assets/navigation/ic_navigation_selected.png')}
          style={styles.iconStyle}
        />
      ),
  }}
/>

 

2. 배경 색 변경

네비게이션을 배치하였더니 아이콘을 클릭했을때 뜨게 되는 컴포넌트의 배경 색이 옅은 회색으로 바뀌었다. 다시 흰색으로 변경해주기 위하여, App.tsx 로 이동한다.

 

이는 NavigationContainer의 theme 속성을 이용해서 변경할 수 있다. 스프레드 연산자를 이용해 나머지항목들을 기본 값으로 가져오고, colors의 background(colors 역시 background를 제외한 나머지 항목들을 spread 연산자를 통해 가져와준다)를 원하는 색상으로 변경 가능하다. 이 경우 흰색으로 바꾸고 싶기 때문에 background : 'white' 로 설정해준다.

// App.tsx
const App = () => {
  return (
    <NavigationContainer
      theme={{
        ...DefaultTheme,
        colors: {
          ...DefaultTheme.colors,
          background: 'white',
        },
      }}>
      <BottomTabs />
    </NavigationContainer>
  );
};