React native 徽章不'；在react native中不适合底部导航

我尝试使用来自的徽章，但该元素不适合底部导航：

以下是AppNavigator.js中的代码：

import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";
import { Badge, Icon, Avatar } from "react-native-material-ui";

export const SignedIn = createMaterialBottomTabNavigator(
  {
    MeetingsScreen: {
      screen: MeetingsScreen,
      navigationOptions: {
        tabBarLabel: "Заседания",
        tabBarIcon: ({ focused }) => (
          <Badge text="3">
            <TabBarIcon
              focused={focused}
              name={
                Platform.OS === "ios"
                  ? `ios-people${focused ? "" : "-outline"}`
                  : "md-people"
              }
            />
          </Badge>
        )
      }
    },
...

从“反应导航材料底部选项卡”导入{createMaterialBottomTabNavigator}；
从“react native material ui”导入{Badge，Icon，Avatar}；
export const SignedIn=createMaterialBottomTabNavigator(
{
会议筛选：{
屏幕：会议屏幕，
导航选项：{
tabBarLabel：“ааааааа，
tabBarIcon:（{focused}）=>(
)
}
},
...

我试着把TabBarIcon包在徽章上，但没用。

---

如何正确设置此元素？或者有更好的库吗？

创建一个自定义选项卡栏图标组件，将选项卡栏图标包装在图标更宽和更高的视图中，并确保徽章位于视图周界内。请参见下图：

是否尝试在上处理

溢出

属性ode>TabBarIcon或包含组件？