如何在React Native中的TabNavigator中添加列表计数

Question

How to implement the count inside the tab navigator in react native.Below is the example image. I have asked react communities but nobody seems to have an answer for this. Please Help.

Answer 1

You have two options here:

1.Use redux or something else so that your tab component knows its own count, regardless of the route.

2.You can have a param like badgeCount, which is visible because tabBar or any other navigation option can be defined as a function of the navigation prop:

static navigationOptions = {
        tabBar: (navigation) => ({
            label: 'Home',
            icon: ({ tintColor, focused }) =>
                <IconBadge
                MainElement={
                    <Ionicons
                    name={focused ? 'ios-home' : 'ios-home-outline'}
                    size={26}
                    style={{ color: tintColor }}
                    />
                }
                badgeNumber={navigation.state.params.badgeCount}
            />,
        }),
    }

Then you can change the param by calling navigation.setParams({ badgeCount: 123 }).

This has been addressed in this Github issue

Answer 2

In your Past Page:

static navigationOptions = ({navigation}) => ({
  title: 'yourTitle',
  tabBarLabel: 'Past${navigation.state.params.count}'
})

and it will display new count after you change the count by setParams method:

navigation.setParams({count: list.length})