You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React Native底部Tab点击无响应 tabPress监听导致导航跳转异常

问题原因

异常是tabPress事件的触发逻辑和你的拦截代码缺少必要判断导致的:

  • React Navigation底部标签的tabPress事件是导航器全局触发的:你给Favoritos标签配置的监听,会在任意一个底部标签被点击时执行,不是只有点击Favoritos才会触发。
  • 当root.mapStore.isoWeekDay == 6(周六)的条件成立时,不管你点击哪个标签,回调里的e.preventDefault()都会执行,直接中断全局的标签跳转动作,最终所有标签都无法切换。
修复方案

在拦截逻辑前新增一层判断:只有当前点击的确实是Favoritos标签本身时,才执行周六的锁定规则。
Tab.Screen的listeners属性支持传入函数,可拿到当前标签对应的路由信息,通过对比事件的target和当前路由key就能判断点击的是不是目标标签,修复后代码如下:

<Tab.Navigator /* 其他配置保留 */>
  <Tab.Screen name="Descubre" component={STACK1} />
  <Tab.Screen 
    name="Favoritos" 
    component={STACK2} 
    listeners={({ route }) => ({
      tabPress: (e) => {
        // 点击的不是Favoritos标签时直接放行,不做拦截
        if (e.target !== route.key) {
          return;
        }
        // 仅当点击的是Favoritos时,才判断是否需要周六锁定
        if (root.mapStore.isoWeekDay == 6) {
          e.preventDefault();
          // 可选:增加提示告知用户锁定原因,比如"周六该功能暂不开放"
        }
      },
    })}
  />
  <Tab.Screen name="Pedidos" component={STACK3} />
  <Tab.Screen name="Más" component={STACK4}/>
</Tab.Navigator>

内容的提问来源于stack exchange,提问作者gabogabans

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.27 06:09:26