有没有办法在显示另一个组件之前检查特定的底部选项卡是否处于活动状态？

Question

我正在使用 react navigation 5 并使用 createBottomTabNavigator() 创建底部选项卡，以便在点击时使用不同的组件呈现正文。现在的问题是，我还需要仅在 'Settings' 选项卡处于活动状态并且显示“设置”组件时才显示文本组件。有没有办法检查哪个底部标签处于活动状态？

我知道导航路线有 useRoutes 有类似的东西吗？

    <Tab.Navigator
        initialRouteName="Home"
        tabBarOptions={{
          inactiveTintColor: theme.inactive,
          activeTintColor: theme.active,
        }}>
        <Tab.Screen
          name="Home"
          options={{
            tabBarIcon: ({color}) => <HomeIcon color={color} />,
          }}>
          {() => (
            <Home content={feed} />
          )}
        </Tab.Screen>
        <Tab.Screen
          name="Settings"
          component={Settings}
          options={{
            tabBarIcon: ({color}) => <SettingsIcon color={color} />,
          }}
        />
      </Tab.Navigator>

即route.name === "Settings" ? this : that

Answer 1

options={{
        tabBarIcon: ({focused}) => <SettingsIcon color={focused ? 'red' : 'blue'} />,
      }}

你可以使用道具 focused。如果您的选项卡 focused，它 return 为真。相反，它 return false

Answer 2

React Navigation 提供的 useFocusEffect() hook 是我问题的答案。

https://reactnavigation.org/docs/use-focus-effect/