在选项卡更改时反应导航 [英] React Navigation on tab change

问题描述

在不使用 Redux 的情况下，如何使用 React 导航选项卡导航器检测选项卡更改?

Without using Redux, how do I detect a tab change with a react navigation tab navigator?

我知道我需要以某种方式使用 onNavigationStateChange 但我不知道如何更新当前视图.

I know I need to somehow use onNavigationStateChange but I can't figure out how to update the current view.

export default () => <MyTabNav
    ref={(ref) => { this.nav = ref; }}
    onNavigationStateChange={(prevState, currentState) => {
        //call function on current view
    }}
/>;

推荐答案

export default () => <MyTabNav
    ref={(ref) => { this.nav = ref; }}
    onNavigationStateChange={(prevState, currentState) => {
       const getCurrentRouteName = (navigationState) => {
         if (!navigationState) return null;
         const route = navigationState.routes[navigationState.index];
         if (route.routes) return getCurrentRouteName(route);
         return route.routeName;
       };
    global.currentRoute = getCurrentRouteName(currentState);
  }}
/>;

如果您不想使用 redux，这就是您可以存储有关当前路由的全局信息的方式，这样您既可以检测选项卡更改，也可以判断哪个选项卡现在处于活动状态.

If you don't want to use redux, this is how you can store global information about the current route, so you can both detect a tab change and also tell which tab is now active.

这篇关于在选项卡更改时反应导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！