🤖
react-native-navigationでbottomTabにbadgeをつける方法
自分のメモ感覚でめちゃくちゃ簡潔に書きます。
まずボタンタブを設定する際に、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