使用 mobx 在 react-native 的底部標簽導航 V5 中顯示徽章編號

Question

我是本機反應的新手，並希望在我的本機反應底部選項卡導航器中顯示帶有通知編號的徽章。 我想要像下面的圖像：

https://cloud.githubusercontent.com/assets/1215843/24154227/8cf55b04-0e8b-11e7-8ce5-30aa00527824.png

我在我的 react-native 應用程序中使用 mobx 進行狀態管理，在每個商店中，我都會有一個徽章計數的計算值（出現在紅色徽章圖標內的數字）。

import { observable, action, flow } from "mobx";

export class DiscoverStore
{
    @observable badgeCount = 0;
}

我的底部選項卡組件如下所示：

const Tab = createBottomTabNavigator();

export default TAB1 = () => {
    
    const { trendingStore, DiscoverStore } = useStores();
    
    return (
    <Tab.Navigator style={{ height:50 }}
        screenOptions={({ route }) => ({
        headerShown: true  ,     
        tabBarIcon: ({ focused, color, size }) => 
        {
            let iconName;

            if (route.name === 'Trending') { iconName = focused ? 'home' : 'home-outline'; }
            else if (route.name === 'Discover'){ iconName = focused ? 'crosshairs-gps' : 'crosshairs';}
            else if (route.name === 'Favorites'){ iconName = focused ?  'heart' : 'heart-outline';}
            else if (route.name === 'Profile'){ iconName = focused ? 'arrow-right-bold-box' : 'arrow-right-bold-box-outline' ;}

            return <Icon name={iconName} size={25} color='rgb(68,68,68)' style={{ marginTop:5 }}/>;
        },})}
        tabBarOptions={{
            keyboardHidesTabBar: true,
            activeTintColor: 'rgb(30,30,30)',
            inactiveTintColor: 'rgb(68,68,68)',
            //activeBackgroundColor:'',
            //inactiveBackgroundColor:'',
            style : { height:50 },
            tabStyle: { paddingVertical: 2, },
            labelStyle: 
            {
                fontSize: 12,
                margin: 0,
                padding: 0,
            },
        }}
    >
        <Tab.Screen name="Trending" component={STACK1}/>
        <Tab.Screen name="Discover" component={STACK2}/>
        <Tab.Screen name="Favorites" component={STACK3}/>
        <Tab.Screen name="Profile" component={STACK4}/>
    </Tab.Navigator>
    );}

Answer 1

您可以使用屏幕的tabBarBadge導航選項：

<Tab.Screen name="Discover" component={STACK2}  
options={{tabBarBadge:(DiscoverStore.badgeCount>0?DiscoverStore.badgeCount:null)}}/>

React Navigation 文檔中的 tabBarBadge ：

https://reactnavigation.org/docs/tab-based-navigation/#add-badges-to-icons