如何在 react-native 中向标签栏添加徽章? [英] How to add badge to tab-bar in react-native?

问题描述

我正在使用 tabnavigator (createbottomBottomTabNavigator) 并且需要关于使用 redux 的 bage 计数的帮助.

I am using the tabnavigator (createbottomBottomTabNavigator) and need help with the bage count using redux.

推荐答案

使用 redux 有自定义方法可以做到这一点，您可以使用相同的方法制作自定义组件 :-

There is custom way to do this using redux, you can make your custom component using the same :-

screen: NotificationScreen,
    navigationOptions: {
      tabBar: (state, acc) => ({
        icon: ({ tintColor, focused }) => (
          <BadgeTabIcon
            iconName="notification"
            size={26}
            selected={focused}
          />
        ),
        visible: (acc && acc.visible !== 'undefined') ? acc.visible : true,
      }),
    },
  },

哪里，

export default connect(state => ({
  notificationCount: state.notifications.count,
}))(({ dispatch, nav }) => (
  <View>
    <TabIcon {...props} />
    {
      props.notificationCount > 0 ?
        <View style={{ position: 'absolute', right: 10, top: 5, backgroundColor: 'red', borderRadius: 9, width: 18, height: 18, justifyContent: 'center', alignItems: 'center' }}>
          <Text style={{ color: 'white' }}>{props.notificationCount}</Text>
        </View> : null
    }
  </View>
));

在此处阅读更多

此外，react native 中的官方 tabnavigation 也有同样的支持，你可以阅读 这里 更多

Also, official tabnavigation in react native have the support for the same, you can read here more

我希望这会有所帮助...谢谢:)

I hope this helps...Thanks :)

这篇关于如何在 react-native 中向标签栏添加徽章?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！