当用户在 React Native 中导航到特定屏幕时，如何跟踪用户的屏幕时间？

Question

我想跟踪用户浏览屏幕和离开屏幕的时间。 我还想设置状态，然后将这些数据发送到 API。

const Stack = createStackNavigator();
const Tab = createMaterialTopTabNavigator();
export default function BootcampWeeksScreen(props){
    const { navigation } = props;
const pathway_id=navigation.getParam('pathway_id');
  return (


    <NavigationContainer>
      <Tab.Navigator tabBarOptions={{ scrollEnabled: true }}>
      <Tab.Screen name="Course" component={Courses} initialParams={{pathway_id:pathway_id}} />
        <Tab.Screen name="Roadmap" component={Roadmap} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

当用户导航到Course屏幕时，我想跟踪用户离开屏幕的时间。

我怎样才能做到这一点？

Answer 1

您可以通过将时间存储在整个组件都可以访问的全局变量中来实现。 您可以为此使用 react 上下文或 redux。

当用户导航到您可能会使用的其他页面时

useEffect(()=>{

return ()=>{
  //  when the user navigated to another page this gets execute
  // setting of new date will be from here
 }
},[])