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

Я пытаюсь протестировать событие OnDidFocus в моем приложении React Native, используя React Navigation 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 вообще не сработает.


react-native event-handling react-navigation-stack
person Butri    schedule 26.05.2020    source источник

Ответы (3)


arrow_upward
0
arrow_downward

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

Нравится:

const willFocusSub = props.navigation.addListener(
  "willFocus",
  ()=>{console.log("testing willFocus")}      
);
person 高鵬翔    schedule 27.05.2020
comment
не имеет значения, что я использую, сначала он работает, а затем, когда вы покидаете этот экран и возвращаетесь с помощью кнопки «Назад», это событие фокуса не обнаруживается, потому что первый экран никогда не был отключен, поэтому нет необходимости в повторном рендеринге. - person Butri; 27.05.2020
comment
Я обновился, чтобы добавить функцию стрелки, попробовать? - person 高鵬翔; 27.05.2020

arrow_upward
0
arrow_downward

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

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

    return () => {
      willFocusSub.remove();
    };
},[]);
person Sagar Kulkarni    schedule 26.05.2020
comment
Я уже пробовал, такая же проблема. Похоже, что когда я нажимаю кнопку «Назад», фокус не определяется, как при обычной посадке. - person Butri; 26.05.2020
comment
Боже мой, я ошибаюсь, редактируя ваш код ... Мне очень жаль, почему рецензент одобрил это?! ..... - person 高鵬翔; 27.05.2020
comment
Боже мой .... Я подумал, что в моем коде была ошибка, и одобрил ее! Как мне отменить это? - person Sagar Kulkarni; 27.05.2020
comment
Я редактирую обратную заявку, может быть, снова дождусь утверждения? - person 高鵬翔; 27.05.2020
comment
Утвердил, теперь все ок! - person Sagar Kulkarni; 27.05.2020
comment
Да, оказалось, что вы рассмотрели, это действительно большое недоразумение LOL, код настолько близок, что я редактирую неправильно .. - person 高鵬翔; 27.05.2020
comment
Нет проблем, дружище! - person Sagar Kulkarni; 27.05.2020

arrow_upward
0
arrow_downward

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

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

import { useIsFocused } from "react-navigation-hooks";
...
const [showGallery, setShowGallery] = useState(true);
...
useEffect(() => {
    if (isFocused) {
      setShowGallery(true);
    } else {
      setShowGallery(false);
    }
    console.log("isFocused: " + isFocused);
  }, [isFocused]);

В основном я проверяю состояние экрана с помощью крючка isFocused каждый раз, когда он изменяется (когда он уходит и возвращается только так же, как didFocus и didBlur) и устанавливаю состояние setShowGallery соответственно, чтобы запускать карусель при фокусировке и останавливать ее при размытии.

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

person Butri    schedule 27.05.2020