React Native Navigation TabBar 양 끝 모서리 둥글게 커스텀하기

리액트 네이티브에서 react-navigation을 사용하여 탭바를 커스텀해볼게요!

 

tabBarOptions={{
          safeAreaInsets: { bottom: 0 },
          tabStyle: { backgroundColor: 'transparent' },
          style: {
            position: 'absolute',
            bottom: 0,
            left: 0,
            right: 0,
            backgroundColor: 'rgba(255,255,255,0.9)',
            borderColor: '#CCD2D9',
            borderTopRightRadius: 20,
            borderTopLeftRadius: 20,
            borderWidth: 1,
          },
        }}

 

• safeAreaInsets는 tabBar가 화면과의 마진이라고 생각하면 되는데요. bottom:0을 주게 되면 화면 아래와 딱! 붙습니다.
• tabStyle은 tabBar에 각 tabItem에 대한 스타일을 정의할 때를 말합니다.
• style은 tabBar 전체에 주는 스타일을 정의해줘요!

결과 화면: