Событие OnDidFocus не работает при переходе назад из стека

Question

Я пытаюсь протестировать событие OnDidFocus в моем приложении React Native с помощью реагирующей навигации 4 и следующего прослушивателя событий:

useEffect(() => {
    const willFocusSub = props.navigation.addListener(
      "onDidFocus",      
      console.log("testing onDidFocus")      
    );

    return () => {
      willFocusSub.remove();
    };
  });

Когда я впервые загружаю страницу, она работает нормально, но когда я двигаюсь прочь, а затем вернитесь на тот же экран с помощью кнопки «Назад». Кажется, он не воспринимает событие фокуса.

Это мой стек

const MovieNavigator = createStackNavigator(
  {
    MoviesList: HomeMovies,
    MovieDetail: MovieDetailScreen,
    PopularMovies: PopularMoviesScreen,
    CrewMember: CastDetailScreen,
    GenreSearch: GenreSearchScreen,
    MovieSearch: MovieSearchScreen,
  },

Я в MoviesList и в событии срабатывает нормально, затем я перехожу к MovieDetail. Если я нажму Back и вернусь в MoviesList, событие onDidFocus вообще не сработает.

Answer 1

Думаю, вы могли бы попробовать "willFocus" вместо этого.

Вот так:

const willFocusSub = props.navigation.addListener(
  "willFocus",
  ()=>{console.log("testing willFocus")}      
);

Answer 2

Я нашел другой способ обнаружить событие фокуса и размытия и, кажется, единственный способ отследить событие при использовании кнопки «Назад».

Вместо подписки на события я проверяю статус фокуса экран с помощью хуков useIsFocused (), доступных из библиотеки react-navigation-hooks. как didFocus и didBlur) и установив состояние setShowGallery соответственно, чтобы запускать карусель при фокусировке и останавливать ее при размытии.

Надеюсь, это поможет другим!

Answer 3

Попробуйте изменить свой useEffect вызов на это!

useEffect(() => {
    const willFocusSub = props.navigation.addListener(
      "onDidFocus",      
      console.log("testing onDidFocus")      
    );

    return () => {
      willFocusSub.remove();
    };
},[]);