Question

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

我知道导航路线有 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，则返回 True。相反，它返回 false

Answer 2

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

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

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

2 个答案: