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
相关产品推荐
相关产品推荐

