🤖

react-native-navigationでbottomTabにbadgeをつける方法

2021/02/13に公開

自分のメモ感覚でめちゃくちゃ簡潔に書きます。
まずボタンタブを設定する際に、componentIdを設定する必要があります。
以下のように3つのボタンタブを作成しました。

Navigation.setRoot({
    root: {
      bottomTabs: {
        children: [
          {
            stack: {
              children: [
                {
                  id: '1',
                  component: {
                    id: 'TimeLine',
                    name: 'TimeLine',
                    passProps: {
                      text: 'This is tab 1',
                    },
                    options: {},
                    },
                  },
                },
              ],
              options: {
                bottomTab: {
		  text: 'タイムライン',
                  icon: require('../images/timeline.png'),
                },
              },
            },
          },
          {
            stack: {
              children: [
                {
                  id: '2',
                  component: {
                    id: 'Calendar',
                    name: 'Calendar',
                    passProps: {
                      text: 'This is tab 2',
                    },
                    options: {
                      topBar: {
                        title: {
                          text: 'カレンダー',
                          color: 'black',
                        },
                      },
                    },
                  },
                },
              ],
              options: {
                bottomTab: {
                  text: 'カレンダー',
                  icon: require('../images/calendar.png'),
                },
              },
            },
          },
          {
            stack: {
              children: [
                {
                  id: '3',
                  component: {
                    id: 'MyPage',
                    name: 'MyPage',
                    passProps: {
                      text: 'This is tab 3',
                    },
                    options: {},
                  },
                },
              ],
              options: {
                bottomTab: {
                  text: 'マイページ',
                  icon: require('../images/mypage.png'),
                },
              },
            },
          },
        ],
      },
    },
  });

componentIdは以下の部分です。このidを指定して、バッジをつけます。

componentId: {
  id: 'TimeLine',
}

Navigation.mergeOptionsを使って、バッジをつけます。

useEffect(() => {
  Navigation.mergeOptions('TimeLine', {
    bottomTab: {
      badge: 1,
    },
  });
},[])

Discussion