[React-Native] Tab | Style 설정

*

<Drawer.Navigator>과 마찬가지로 <Tab.Navigator>도 각 스크린의 component에 개별 styling을 하지 않는다.

  -> 모두 공통적인 스타일 적용함

  -> <Navigator> 태그 안에 작성

  -> <Tab.Navigator>에 옵션을 주자

 

 

<Tab.Navigator
          initialRouteName="Home"
          tabBarOptions={{
            activeBackgroundColor: 'skyblue',
            activeTintColor: 'blue',
            inactiveTintColor: '#fff',
            style: {
              backgroundColor: '#c6cbef'
            }
          }}
>

  - activeBackgroundColor / activeTintColor : 선택되었을 때 배경색과 글씨색

  - inactiveTintColor : 선택되어지지 않은 글자색

 

 

 

 

---

 

 

• 스크린을 하나 추가해보자

- message_tab.js라는 파일 생성

 

import TabMessageScreen from './src/message_tab';

...

<Tab.Screen name="Message" component={TabUserScreen}/>

 

 

---

 

 

• 각 탭에 (text 대신) 그림을 삽입해보자

- 그림을 삽입함과 동시에 선택된 탭의 그림을 좀 더 크게 만드는 효과 주기

 

screenOptions={({route})=>({
            tabBarLabel: route.name,
            tabBarIcon: ({focused})=>(
              TabBarIcon(focused, route.name)
            )
          })}

  - 먼저 어떤 탭이 선택되었는지 알아야 한다.

  - route.name : <Tab.Screen>안에서 name에 정의된 string 값

  - focused -> Boolean값 : 터치된 것인지, active 상태인지 판별하는 변수

 

  - 그럼 이제 상단에 TabBarIcon 함수를 생성해보자

const TabBarIcon = (focused, name) => {
  let iconImagePath;

  if (name==='Home') {
    iconImagePath = require('./src/assets/pics/home_icon.png')
  } else if (name==='User') {
    iconImagePath = require('./src/assets/pics/user.png')
  } else if (name==='Message') {
    iconImagePath = require('./src/assets/pics/message.png')
  }

  return (
    <Image
      style={{
        width: focused? 24 : 20,
        height: focused? 24 : 20,
      }}
      source = {iconImagePath}
    />
  )
}

  - 이미지 링크를 불러올 때는 require()를 쓴다.

  - focused가 되면 크기가 커지도록 함수 생성

 

 

  - 선택하면 아이콘 크기가 더 커진다.

 

 

labelPosition: 'beside-icon'

글씨가 옆으로 가있다.

  - 원래대로 하려면 'below-icon'