徽章不适合React Native的底部导航

Question

我尝试使用https://github.com/xotahal/react-native-material-ui中的标志，但该元素未正确适合底部导航：

这是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>
        )
      }
    },
...

我尝试将TabBarIcon自身包装到徽章中，但没有帮助。 如何正确设置此元素？还是有一个更好的库？

Answer 1

创建一个自定义选项卡栏图标组件，该组件将选项卡栏图标包装在具有更大宽度和高度的图标视图内，并确保徽章在视图范围内。参见下图：