Как реплицировать onDidBlur или onWillBlur с помощью React Navigation 5?

Question

Как они указывают в документах , они избавились от 4 слушателей навигационных событий и вместо этого решили использовать События жизненного цикла .

Но Проблема, с которой я сталкиваюсь в React Navigation 5, заключается в том, что событие blur не работает так, как мне нужно! Раньше я мог добавить onWillBlur прослушиватель и выполнять какие-либо действия, когда пользователь временно покидает (а не закрывает) приложение (например, закрывать соединение через сокет, а затем снова открывать его, когда пользователь повторно входит в приложение).

Как я могу скопировать события onWillBlur или onDidBlur для такого варианта использования? Мне не нужно знать, размыт ли экран A после того, как пользователь перешел на экран B после нажатия кнопки.

Answer 1

Вы можете использовать хук useFocusEffect.

Документация здесь

РЕДАКТИРОВАТЬ:

Добавлен пример из React Navigation.

import { useFocusEffect } from '@react-navigation/native';

function Profile() {
  useFocusEffect(
    React.useCallback(() => {
      // Do something when the screen is focused, onFocus


      return () => {
        // Do something when the screen is unfocused, onBlur
        // Useful for cleanup functions
      };
    }, [])
  );

  return <ProfileContent />;
}

РЕДАКТИРОВАТЬ 2:

Я не проверял это на кнопке home, но нашел сообщение, которое тоже помогает с этим

Проверьте здесь

Надеюсь, на этот раз вы довольны моим ответом.

И вот у вас есть рабочий пример:

import React from 'react'
import { Text, AppState } from 'react-native'

const MyComponent = () => {

    const [appState, setAppState] = React.useState(AppState.currentState)

    React.useEffect(() => {
      AppState.addEventListener('change', handleChanges)

      setAppState(AppState.currentState)

      return AppState.removeEventListener('change')
    },[])

    const handleChanges = (nextAppState) => {
        if (appState.match(/inactive|background/) && nextAppState === 'active') {

          console.log('App has come to the foreground!');
        } else {
          console.log('App has gone to the background!');
          // start your background task here
        }

        setAppState(nextAppState)
    }

    return  <Text>{appState}</Text>
}