且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何在 react-native 中向标签栏添加徽章?

更新时间:2023-09-21 21:08:16

使用 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 :)