反应导航在每次屏幕变化时调用一个函数

Question

我正在寻找一种在每个屏幕上调用函数以跟踪用户与每个屏幕的交互的方法。 例如：

function track(screenName){
 console.log(screenName)
}

function ScreenA(){
 track('ScreenA')
 return <View />
}

function ScreenB(){
 track('ScreenB')
 return <View />
}

不必在每个屏幕中分别手动调用该函数，我相信必须有一种方法可以直接从导航器中执行此操作。 我在用着 ：

react-navigation 5.9 
react-native 0.65

Answer 1

使用@sushrut619 答案我应用了以下内容：

export function App(){
  const [routeName, setRouteName] = React.useState('Unknown');

return (
   ...
   <NavigationContainer
     linking={linking}
     onStateChange={state => {
      const newRouteName = getActiveRouteName(state);

      if (routeName !== newRouteName) {
       setRouteName(newRouteName);
       //use whatever tracking function you want with newRouteName
      }
     }}>
     <MainAppStack />
    </NavigationContainer>
   ...
  );
}

在另一个实用程序文件中我添加了这个功能：

export function getActiveRouteName(state: NavigationState | PartialState<NavigationState> | undefined): string {
  if (!state || typeof state.index !== 'number') {
    return 'Unknown';
  }

  const route = state.routes[state.index];

  if (route.state) {
    return getActiveRouteName(route.state);
  }

  return route.name;
}