如何为Ionicons渲染徽章？ （TabBar图标）

Question

我正在使用<Ionicons>作为TabBar Icon。

我正在获取用户尚未阅读的通知数据。

{... "unread": 1} - ＆gt;所以在这种情况下，我想向Icon显示1。我想我们称之为badging

例如，

这是我的代码片段。如果您使用过Expo，那么展览会提供的默认项目没有太大变化。

import { Ionicons } from '@expo/vector-icons';

...

tabBarIcon: ({ focused }) => {
    <Ionicons
        name={iconName}
        size={30}
        style={{ marginBottom: -3 }}
        color={focused ? Colors.tabIconSelected : Colors.tabIconDefault}
    />

我不知道我是否可以用<View />包裹Ionicons并做一些造型。

Answer 1

如果您使用的是React或React-Native，则可以将您的内容包装在其他组件中。为了获得您想要的徽章，您需要将您的内容包装在一个或类似的组件中。其中一个可以在npm上找到，名为react-native-icon-badge https://www.npmjs.com/package/react-native-icon-badge

   <IconBadge
            MainElement={
                 <Ionicons
                    name={iconName}
                    size={30}
                    style={{ marginBottom: -3 }}
                    color={focused ? Colors.tabIconSelected : 
                           Colors.tabIconDefault}
                   />
            }
            badgeNumber={count}
        />