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

