从堆栈导航回来时 OnDidFocus 事件不起作用

Question

我正在尝试使用 React Navigation 4 和以下事件侦听器在我的 React Native 应用程序中测试 OnDidFocus 事件：

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。如果我返回并 return 到 MoviesList，则根本不会触发事件 onDidFocus。

Answer 1

尝试修改对此的 useEffect 调用！

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

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

Answer 2

我想你可以试试 "willFocus"。

像这样：

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

Answer 3

我找到了另一种检测焦点和模糊事件的方法，这似乎是使用“返回”按钮时跟踪事件的唯一方法。

我没有订阅事件，而是使用 react-navigation-hooks 库中可用的 useIsFocused() 挂钩检查屏幕的焦点状态。

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 钩子检查屏幕的状态（当它离开时 returns 仅与 didFocus 和 didBlur 相同）并将状态 setShowGallery 相应地设置为运行聚焦时旋转木马，模糊时停止旋转木马。

希望对大家有所帮助！

从堆栈导航回来时 OnDidFocus 事件不起作用

OnDidFocus event not working when you navigate back from the stack

event-handling

react-native

react-navigation-stack