React Navigationのタブバーのバッジが見えないので背景色を変える

2006 ワード
reactnative reactnavigation reactnative テキストリンク

React Navigationのタブバーのアイコンにバッジを表示したくて調べてみたところ、tabBarBadgeというオプションがあるのを発見しました。

Tab navigation | React Navigation
https://reactnavigation.org/docs/tab-based-navigation/

このオプション、@react-navigation/bottom-tabsが5.6.1では存在しなかったような気がするのですが、5.8.0にバージョンを上げたところ使えるようになっていました。

早速tabBarBadgeを試してみたところ、文字色が白で背景色が透明？なのか思うように表示されません。以下のアイコンの右上に"4"てバッジが表示されているはずなんですけどわかるでしょうか？

色の変更については公式ドキュメントにも特に記載が見当たりません。ググってみたところ、以下のチケットで解決方法についてコメントを書いている人を発見しました。

The color for the "tabBarBadge" can't be changed #8812
https://github.com/react-navigation/react-navigation/issues/8812

NavigationContainerにthemeを設定すると、文字色が白で背景色が赤となり綺麗に表示されました。

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

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

なお、tabBarBadgeにゼロ"0"を指定するとゼロがそのまま表示されてしまいます。バッジを表示したくない場合はundefinedを指定しましょう。

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