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

Expo升级至47.0.9后Android端material-top-tabs点击失效

解决方案

针对Expo 47.0.9下Android端@react-navigation/material-top-tabs点击无响应的问题,可按以下步骤排查修复:

1. 统一react-navigation相关依赖版本

Expo版本升级后,需确保@react-navigation/material-top-tabs、@react-navigation/native、react-native-tab-view等核心包版本兼容Expo 47。执行以下命令安装匹配版本:

npm install @react-navigation/material-top-tabs@^6.6.2 @react-navigation/native@^6.1.6 react-native-tab-view@^3.5.2

2. 替换废弃的tabBarOptions配置

新版本react-navigation已废弃tabBarOptions,改用screenOptions内置的tabBar相关配置。Android端可能因旧配置导致触摸事件失效,修改代码如下:

<Tab.Navigator 
  initialRouteName="Overview"
  screenOptions={({route}) => ({
    headerShown: false,
    // 将原tabBarOptions的配置移至此处
    tabBarLabelStyle: { fontSize: 15, fontFamily: 'Inter_700Bold', textTransform: 'none' },
    tabBarIndicatorStyle: { backgroundColor: 'black', height: 2 }
  })}
>
  <Tab.Screen name="Leerdoelen">
    {props => <Overview {...props} isHybrid={isHybrid} moduleScore={moduleScore} moduleUsers={moduleUsers} data={data} userData={userData} colorBox={colorBox} accentColor={accentColor} />}
  </Tab.Screen>
  <Tab.Screen name="Onderwijs">
    {props => <Curriculum {...props} listOfBibleschoolHybridUserIn={listOfBibleschoolHybridUserIn} isHybrid={isHybrid} data={data} userData={userData} colorBox={colorBox} accentColor={accentColor} />}
  </Tab.Screen> 
  {isHybrid !== true &&
    <Tab.Screen name="Overig">
      {props => <Teachers {...props} data={data} teacherData={teacherData} colorBox={colorBox} accentColor={accentColor} userData={userData} />}
    </Tab.Screen>
  }
  {isHybrid === true &&
    <Tab.Screen name="Opdrachten">
      {props => <Assignments {...props} data={data} teacherData={teacherData} colorBox={colorBox} accentColor={accentColor} userData={userData} />}
    </Tab.Screen>
  }
</Tab.Navigator>

*注意:移除手动传递的navigation={navigation},改用组件props自带的navigation,避免上下文冲突。

3. 清除Expo缓存

缓存异常可能导致Android端渲染逻辑出错,执行命令清除缓存后重启项目:

expo r -c

4. 检查上层组件触摸拦截

确认Tab.Navigator外层没有设置pointerEvents="none"的View,或存在PanResponder等手势组件拦截触摸事件。确保Tabs区域未被其他UI元素覆盖。

内容的提问来源于stack exchange,提问作者Sander van Maastricht

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.08.05 21:50:36