如何在反应原生中在TabNavigator中添加列表计数

Question

如何在反应native中实现tab导航器内的计数.Below是示例图像。我问过反应社区，但似乎没有人有这个答案。 请帮忙。

Answer 1

这里有两个选项：

1.使用redux或其他东西，以便您的标签组件知道自己的计数，无论路线如何。

2.您可以拥有类似badgeCount的参数，因为tabBar或任何其他导航选项可以定义为导航道具的函数，因此可见：

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}
            />,
        }),
    }

然后你可以通过调用navigation.setParams（{badgeCount：123}）来更改参数。

这已在this Github问题

中解决

Answer 2

在你过去的页面中：

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

并且在使用setParams方法更改计数后它将显示新计数：

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