如何将数据发送到我的标签栏 - 反应原生路由器通量

Question

这是标签栏。在此通知部分中，我希望每次发出新通知时都发送计数器。

这是路由器组件。在notification_page场景中，如果有通知，我想更新计数器。

 <Router>
            <Stack key="root" hideNavBar={true}>
                <Scene key="lightbox"  lightbox >
                    <Scene key="drawer" drawer contentComponent={Drawer}>
                        <Scene key="tabbar"
                            showLabel={true}         
                        >
                            <Scene
                                key="landing_page"
                                component={Landing}

                                title={'Timeline'}
                            />
                            <Scene 
                                key="search_tab" 
                                component={Search} title="Search" 
                                renderLeftButton={() => this.renderLeftMenuButton()}
                            />
                            <Scene
                                key="tab3_1" 
                                component={CreateBlog} 
                                title="Create" 
                                renderLeftButton={() => this.renderLeftMenuButton()} 
                            />
                            <Scene 
                                tabBarLabel = {({ focused }) => (
                                <View>
                                <Icon
                                    size={40}
                                    name={`ios-notifications-outline`}
                                    text={`My Account`}
                                />
                            </View>
                            )} 
                                key="notification_page" 
                                component={Notifications} 
                                title="Notifications" 
                                renderLeftButton={() => this.renderLeftMenuButton()} 
                            />
                        </Scene>
                    </Scene>
                </Scene>
            </Stack>
        </Router>

我使用Redux进行状态管理。

 <Provider store={store}>
     <View style={{flex:1}}>
          <RouterComponent  />
     </View>
 </Provider>

Answer 1

如果您正在使用带有状态的redux或辅助方法，那么每当有新的通知出现时，您都可以使用actions方法使用计数器刷新标签栏道具。

Actions.refresh({ counter: 1 }) // or whatever the counter is 

• React Native Router Flux Docs