Hubo un par de preguntas relacionadas con este tema, pero ninguna de ellas tiene una respuesta adecuada. Entonces, lo que quiero hacer es calcular el tiempo para navegar a una pantalla. así que básicamente el temporizador comienza aquí;
navigation.navigate("SomePage")por lo que debería iniciar algún tipo de temporizador cada vez que se activa la función de navegación.
Puedo finalizar el temporizador en NavigationContainer con onStateChange;
<NavigationContainer ref={navigationRef} onStateChange={() => // I can end timer here} >Entonces cómo podemos hacer esto?
¿Te preocupa el tiempo de navegación, o el tiempo de montaje de la pantalla? Creo que el tiempo de navegación será insignificante, y el montaje será siempre la operación costosa.
React 16.9 hizo estable el componente Profiler , que incluye una API para medir los tiempos de montaje de pantallas completas o incluso subconjuntos de pantallas. Envolvería los componentes que desea medir en el componente Profiler:
import React, { Profiler } from 'react'; ... <Profiler onRender={onRender}> <View> ... </Profiler>Se requiere el prop onRender y tiene la siguiente firma (a partir de React 17.0.1, que se incluye con RN 64):
function onRenderCallback( id, // the "id" prop of the Profiler tree that has just committed phase, // either "mount" (if the tree just mounted) or "update" (if it re-rendered) actualDuration, // time spent rendering the committed update baseDuration, // estimated time to render the entire subtree without memoization startTime, // when React began rendering this update commitTime, // when React committed this update interactions // the Set of interactions belonging to this update ) { // Aggregate or log render timings... } Probablemente la forma más fácil es restar startTime de commitTime cuando la fase es 'mount' .