React native 我可以在单击选项卡屏幕时禁用选项卡边沿吗？

我使用Tab.Navigator显示了4个底部导航图标，其中一个是通知图标。我想在单击时禁用

选项卡边沿

选项。怎么做

这是我使用的代码

 <Tab.Screen
        name="Notifications"
        component={Notifications}
        options={{
          tabBarIcon: ({ focused }) =>
            focused ? (
              <Notification_icon  />
            ) : (
              <Notification_icon_inactive />
            ),
          tabBarBadge: 2,
        }}
      />

专注？(
) : (
),
塔巴贝奇：2，
}}
/>

有一种方法可以使用

NavigationContainer

的ref并通过一些状态变量控制徽章的可见性。在ref上侦听

状态

事件。在此事件的处理程序中，使用

ref.current？.getCurrentRoute（）？.name

获取当前路由的名称。如果此名称等于

通知

屏幕名称，则将

notificationBadgeVisible

设置为false，从而隐藏徽章。检查以下代码

const App = () => {
  const ref = React.useRef<NavigationContainerRef>(null);

  const [notificationBadgeVisible, setNotificationBadgeVisible] = React.useState(true);

  const navigationStateChangeHandler = () => {
    if (ref.current?.getCurrentRoute()?.name === 'Notifications') {
      setNotificationBadgeVisible(false);
    }
  }

  React.useEffect(() => {
    ref.current?.addListener('state', navigationStateChangeHandler);
    return () => { ref.current?.removeListener('state', navigationStateChangeHandler); }
  });

  return (
    <NavigationContainer ref={ref}>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen
          name="Notifications"
          component={Notifications}
          options={{
            tabBarIcon: ({ focused }) =>
              focused ? (
                <Notification_icon />
              ) : (
                <Notification_icon_inactive />
              ),
            tabBarBadge: (notificationBadgeVisible ? 2 : undefined)
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

const-App=（）=>{
const ref=React.useRef（null）；
const[notificationBadgeVisible，setNotificationBadgeVisible]=React.useState（true）；
常量navigationStateChangeHandler=（）=>{
如果（ref.current？.getCurrentRoute（）？.name=='Notifications'）{
setNotificationBadgeVisible（假）；
}
}
React.useffect（（）=>{
ref.current？.addListener（'state'，navigationStateChangeHandler）；
return（）=>{ref.current？.removeListener（'state'，navigationStateChangeHandler）；}
});
返回(
专注(
) : (
),
TabbarEdge：（notificationBadgeVisible？2：未定义）
}}
/>
);
};

您只需在这些情况下使用状态，如启用，您可以将其设置为true，否则将其设置为FalseTabEdge不是布尔属性。它不是字符串就是数字。很抱歉，我想它不能隐藏。谢谢@Fahad Farooq。“我会试试这个，然后告诉你它是否管用。@ShreyaB，管用吗？”？