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

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 ===“设置”？这个:那个

Answer 1

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

你可以使用 Prop focused。如果您的选项卡聚焦，它会返回 True。相反，它返回 false