如何在反应本机中将徽章添加到标签栏？

Question

我正在使用 tabnavigator (createbottomBottomTabNavigator) 并需要使用 redux 进行包计数方面的帮助。

Answer 1

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

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 也支持相同的功能，您可以在这里阅读更多内容

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