如何检查屏幕是否在选项卡堆栈中聚焦 - React Navigation

Question

我正在创建一个使用 React Navigation 的 React Native 应用程序。

在我的 1 个选项卡中，我有 3 个屏幕。如果我位于该选项卡中非主屏幕的任何屏幕中，并且点击选项卡图标，它会将我带到该选项卡的主屏幕。太棒了，太棒了。

但是，它不会触发 useIsFocused 挂钩，因此不会运行屏幕不再显示时需要运行的关键函数。

我理想地想要一种方法来找出选项卡是否已被按下或屏幕是否在我的屏幕中内未聚焦，因为我需要引用该屏幕上的内容。

我在文档中找到了这个：

React.useEffect(() => {
  const unsubscribe = navigation.addListener('tabPress', (e) => {
    // Prevent default behavior
    e.preventDefault();

    // Do something manually
    // ...
  });

  return unsubscribe;
}, [navigation]);

但这似乎在屏幕内不起作用。点击选项卡不会触发 useEffect。

Answer 1

使用navigation.getState()

useNavigation 钩子为您提供一个状态对象。对于作为初始路由嵌套在堆栈导航器内的选项卡导航器，它看起来像这样（附在下面）。 请注意，每个导航对象都有自己的状态。主堆栈有一个索引，甚至内部的选项卡也有一个索引，表示当前聚焦于哪个屏幕。

const state = {
  type: 'stack',
  key: 'stack-1',
  routeNames: ['Home', 'Profile', 'Settings'],
  routes: [
    {
      key: 'home-1',
      name: 'Home',
      state: {
        key: 'tab-1',
        routeNames: ['Feed', 'Library', 'Favorites'],
        routes: [
          { key: 'feed-1', name: 'Feed', params: { sortBy: 'latest' } },
          { key: 'library-1', name: 'Library' },
          { key: 'favorites-1', name: 'Favorites' },
        ],
        index: 0,
      },
    },
    { key: 'settings-1', name: 'Settings' },
  ],
  index: 1,
};

因此，在您的情况下，您有一个嵌套在选项卡导航器内的堆栈导航器。您可以使用该特定导航器的嵌套状态对象内的索引属性来检查屏幕是否仍然打开。像这样的东西

useEffect(() => {
    if(navigation.getState().state.index === yourScreenIndex){
      doSomething()
    };
  }, [navigation.getState()]);