Reactjs 如何在react native中的TabNavigator中添加列表计数

如何在react native中实现选项卡导航器内的计数。下面是示例图像。我问过社区，但似乎没有人对此有答案。 请帮忙。

---

这里有两个选项：

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

静态导航选项={
选项卡栏：（导航）=>({
标签：“家”，
图标：（{tintColor，focused}）=>
,
}),
}

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

---

这已在Github问题中解决

这里有两个选项：

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

静态导航选项={
选项卡栏：（导航）=>({
标签：“家”，
图标：（{tintColor，focused}）=>
,
}),
}

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

这一点已在Github问题中得到解决，在您过去的页面中：

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

通过setParams方法更改计数后，它将显示新计数：

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

在您过去的页面中：

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

通过setParams方法更改计数后，它将显示新计数：

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