Блог

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

Сценарий

Я хочу создать глобальный стек при изменении любой навигации, чтобы запустить функцию обратного вызова для некоторой проверки, например (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>
  

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

Реагирующая навигация 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 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>