如何在底部标签导航器中显示徽章？答案

【问题标题】：How can I show badges in bottom tabs navigator?如何在底部标签导航器中显示徽章？
【发布时间】：2020-07-30 18:22:54
【问题描述】：

我的 React Native 应用程序使用底部选项卡导航器。我想尽可能显示带有数字的徽章作为通知。我使用 mobx 商店进行状态管理。如何在标签导航器中显示徽章？

这是我的底部标签导航器的代码。

const Tab = createBottomTabNavigator();

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

            if (route.name === 'Browse')
            {
              iconName = focused ? 'checkbox-blank-circle' : 'checkbox-blank-circle-outline';
            }
            else if (route.name === 'Find deals')
            {
              iconName = focused ? 'clipboard-alert' : 'clipboard-alert-outline';
            }
            else if (route.name === 'Favorites')
            {
              iconName = focused ?  'checkbox-multiple-blank-circle' : 'checkbox-multiple-blank-circle-outline';
            }
            else if (route.name === 'More')
            {
              iconName = focused ? 'checkbox-multiple-marked-circle' : 'checkbox-multiple-marked-circle-outline' ;
            }

            // You can return any component that you like here!
            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:52 },
          tabStyle: { paddingVertical: 2, },
          labelStyle: {
            fontSize: 12,
            margin: 0,
            padding: 0,
          },
        }}

      >
        <Tab.Screen name="Browse" component={PLACEcard1} />
        <Tab.Screen name="Find deals" component={PLACEcard2} />
        <Tab.Screen name="Favorites" options={{headerShown: false}} component={SCREEN1} />
        <Tab.Screen name="More" component={MODAL3} />
      </Tab.Navigator>
    
  );
}

【问题讨论】：

标签： reactjs react-native native

【解决方案1】：

Ciao，如果您不想制作自己的徽章图标，可以在您的 tabBarIcon 上返回 Icon 和 react-native-icon-badge。然后，使用 mobx 你可以隐藏/显示徽章，设置/重置数字或文本。我的意思是：

tabBarIcon: ({ focused, color, size }) => {
        ...
        return (
           <View>
              <Icon name={iconName} size={25} color='rgb(68,68,68)' style={{ marginTop:5 }}/>
              <IconBadge
                MainElement={
                   <View>
                      // customize your badge icon
                   </View>
                }
                BadgeElement={
                   // here your text in badge icon
                   <Text style={{color:'#FFFFFF'}}>{/*here mobx state to notify for example a number*/}</Text>
                }
                IconBadgeStyle={
                  // here the style 
                  }
                Hidden={/*here mobx state show/hide*/}
               />
           </View>
        );
      },

【讨论】：