时间戳

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

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

问题描述

我正在使用反应导航 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>

IEroute.name === "Settings" ? this : that

标签： reactjsreact-nativereact-navigationreact-navigation-v5react-navigation-bottom-tab

解决方案

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

你可以使用道具focused。如果您的选项卡返回 True focused。相反，它返回false

推荐阅读