React Navigation의 탭 바 배지가 보이지 않기 때문에 배경색 변경

React Navigation의 탭 표시줄 아이콘에 배지를 표시하고 싶은 점을 살펴보면 tabBarBadge라는 옵션이 있음을 발견했습니다.

Tab navigation | React Navigation
h tps : // 레아 ct ゔ ぃ가 치온. 오 rg / 드 cs / ta-Buse d- ゔ ぃ가 치온 /

이 옵션, @react-navigation/bottom-tabs가 5.6.1에서는 존재하지 않았던 것 같은 생각이 듭니다만, 5.8.0에 버젼을 올렸더니 사용할 수 있게 되어 있었습니다.

조속히 tabBarBadge를 시도해 보았는데, 문자색이 흰색이고 배경색이 투명? 인지 생각해 보이지 않습니다. 아래 아이콘의 오른쪽 상단에 "4"로 배지가 표시되어 있을 것입니다만 알겠습니까?



색의 변경에 대해서는 공식 문서에도 특별히 기재가 보이지 않습니다. 구그라고 보았더니, 이하의 티켓으로 해결 방법에 대해서 코멘트를 쓰고 있는 사람을 발견했습니다.

The color for the "tabBarBadge"can't be changed #8812
htps : // 기주 b. 코 m / Rea ct-na-ga-chion / Rea-ct-na-ga-chion / Issue s / 8812

NavigationContainer에 테마를 설정하면 문자색이 흰색이고 배경색이 빨간색이되어 깨끗하게 표시되었습니다.

const MyTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    notification: 'red',
  },
}

<NavigationContainer theme={MyTheme}>
...
</NavigationContainer>

tabBarBadge에 0 "0"을 지정하면 0이 그대로 표시됩니다. 배지를 표시하지 않으려면 undefined를 지정합시다.

        options={{
          title: 'AAA',
          tabBarIcon: tabBarIconAAA,
          tabBarBadge: someCondition ? undefined : 1,
        }}