Как реализовать функцию callBack при изменении экрана в react-native?

Question

Мне нужна функция при выполнении смены экрана, я имею в виду, когда с домашнего экрана перейдите к экрану, выполняющему функцию обратного вызова.

Сценарий

Я хочу создать глобальный стек при изменении любой функции обратного вызова naviagte run для некоторой проверки, например (userToken, состояние Интернета, местоположение проверки - одно или отключено и т. Д.)

Попробуй это

я создаю компонент класса для навигации по стеку и реализации UNSAFE_componentWillUpdate, может обнаружена любая навигация.

Код

       UNSAFE_componentWillUpdate(prevProp, prevState) {
    if (prevProp != this.props) {
      console.log('change state navigation');
    }
  }

Ошибка таким образом

• Не удается обнаружить первый экран index-zero Главный экран.
• Я должен написать этот код для каждого стека.

Мой стек

       <Stack.Navigator>
    <Stack.Screen
      name="Home"
      component={Home}
    />
   <Stack.Screen
      name="About"
      component={About}
    />
</Stack.Navigator>

Answer 1

для React Navigation 5.x

      <NavigationContainer
  onStateChange={(st) => {
      let routeName = st.routes[st.index].name
      /* your other code */
  }}>
</NavigationContainer>

Answer 2

Вы можете получить текущий маршрут с помощью свойства "onNavigationStateChange" в "NavigationContainer"

React Navigation 4.x

onNavigationStateChange={(prevState, currentState) => {
    const currentScreen = this.getCurrentRouteName(currentState);
    const prevScreen = this.getCurrentRouteName(prevState);
}}

// gets the current screen from navigation state
function getCurrentRouteName(navigationState) {
  if (!navigationState) {
    return null;
  }
  const route = navigationState.routes[navigationState.index];
  // dive into nested navigators
  if (route.routes) {
    return getCurrentRouteName(route);
  }
  return route.routeName;
}

React Navigation 5.x

<NavigationContainer
      ref={navigationRef}
      onReady={() => routeNameRef.current = navigationRef.current.getCurrentRoute().name}
      onStateChange={() => {
        const previousRouteName = routeNameRef.current;
        const currentRouteName = navigationRef.current.getCurrentRoute().name

        if (previousRouteName !== currentRouteName) {
          // The line below uses the expo-firebase-analytics tracker
          // https://docs.expo.io/versions/latest/sdk/firebase-analytics/
          // Change this line to use another Mobile analytics SDK
          Analytics.setCurrentScreen(currentRouteName);
        }

        // Save the current route name for later comparision
        routeNameRef.current = currentRouteName;
      }}
 >
   {/* ... */}
 </NavigationContainer>