React-Native-Navigation (WIX)：如何更新底部标签的徽章计数？

Posted 2023-02-16

【中文标题】React-Native-Navigation (WIX)：如何更新底部标签的徽章计数？

【英文标题】：React-Native-Navigation (WIX) : How do I update the badge count for a bottomTab?

【发布时间】：2019-01-01 18:04:01

【问题描述】：

我正在使用 Navigation.mergeOptions() 函数尝试更新第三个选项卡 (tabindex = 2) 的标记计数，但是标记计数没有更新。这是 setRoot 的原始布局对象的样子：

    root: 
        bottomTabs: 
            children: [
                
                    stack: 
                        children: [
                            
                                component: 
                                    name: 'navigation.main.Dispensaries',
                                ,
                            
                        ],
                        options: 
                            topBar,
                            bottomTab: NavStyles.tab('Dispensaries', dispensariesTabIcon),
                        
                    
                ,
                
                    stack: 
                        children: [
                            
                                component: 
                                    name: 'navigation.main.Orders',
                                ,
                            
                        ],
                        options: 
                            bottomTab: NavStyles.tab('My BudBuddy', myBudbuddyTabIcon),
                            topBar,
                        
                    
                ,
                
                    stack: 
                        children: [
                            
                                component: 
                                    name: 'navigation.main.Checkout',
                                ,
                            
                        ],
                        options: 
                            bottomTab: NavStyles.tab('Bag', bagTabIcon, badge),
                            topBar,
                        
                    
                ,
            ], options: 
                //topBar,
                bottomTabs: 
                    currentTabIndex: 0,
                ,
            ,
        ,
    

然后，在我的一个组件中，我这样做了，但它对徽章计数没有影响：

Navigation.mergeOptions(this.props.componentId, 
            bottomTabs: 
                children: [
                    , ,
                    
                        stack: 
                            options: 
                                bottomTab: 
                                    badge: '31',
                                ,
                            ,
                        ,
                    ,
                ],
            ,
        );

我很确定这是错误的，我什至尝试在上面的第一个代码块中复制原始布局对象，但徽章计数不同，但它什么也没做。有任何想法吗？谢谢！

【参考方案1】：

Updating options for a specific tab

希望这会有所帮助。

【讨论】：

我认为您没有完全阅读我上面的问题。请注意，我已经在您的链接中使用了该功能。

对，但是您将某种布局结构传递给mergeOptions，而该方法需要一个简单的选项对象作为第二个参数。

是的，好点。因此，如果我放入一个带有属性bottomTab 的简单选项对象，其中包含一个包含属性badge 的对象（就像这里的示例：wix.github.io/react-native-navigation/v2/#/docs/…），它会更新我的第一个选项卡上的徽章（索引 = 0)，但我无法更新第三个选项卡上的徽章计数（索引 = 2）。是否可以使用 mergeOptions 更新我的第三个选项卡上的徽章计数？如果是这样，你能给我看一个最小的例子吗？

mergeOptions 接受 componentId 作为第一个参数，更新该组件所在的选项卡的 bade。例如，如果 componentId 表示在第二个选项卡中推送到堆栈的组件 - 那么第二个标签的徽章应该更新。

这解决了谢谢你指出来，因为它在文档中并不明显。它现在运行良好。