Expo React Native中openDrawer()在iOS上无法触发的问题

问题概述 #

抽屉导航组件在Android上运行正常，但iOS中点击自定义汉堡图标（TouchableOpacity）毫无反应，尝试使用navigation_drawer.dispatch(DrawerActions.openDrawer())也未解决问题。项目基于Expo 47、React Navigation 6开发。

排查与解决方案 #

1. 修复视图层级覆盖问题 #

iOS中zIndex的渲染逻辑与Android存在差异，你的汉堡图标可能被下方的LinearGradient或ScrollView覆盖。给汉堡图标的容器样式添加更高的层级：

修改styles.hamburgerIconWrapper：

hamburgerIconWrapper: {
  position: 'absolute',
  top: 40,
  left: 20,
  zIndex: 10, // 确保层级高于其他视图
  // 保留原有其他样式
}

2. 直接使用组件接收的navigation prop #

Dashboard作为Drawer.Screen的子组件，props中的navigation已经是DrawerNavigationProp类型，无需额外调用useNavigation，直接使用内置方法：

修改Dashboard组件：

import { DrawerNavigationProp, ParamListBase } from '@react-navigation/drawer';

export default function Dashboard({navigation}:{navigation: DrawerNavigationProp<ParamListBase>}) {
    // 移除 const navigation_drawer = useNavigation<DrawerNavigationProp<ParamListBase>>()

    // 修改点击事件
    return (
        <View>
            <ScrollView style={{backgroundColor: '#F5F5F5'}}>
                <LinearGradient
                    colors={['#F75A00', '#FF9D65']}
                    style={styles.header}
                />
                <TouchableOpacity onPress={() => navigation.openDrawer()} style={styles.hamburgerIconWrapper}>
                    <Icon name="menu" size={32}/>
                </TouchableOpacity>
                {/* 其他视图内容 */}
            </ScrollView>
        </View>
    )
}

3. 确保Gesture Handler正确配置 #

抽屉导航依赖react-native-gesture-handler，需要用GestureHandlerRootView包裹整个导航容器：

修改App.tsx：

import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  return (
    <PaperProvider>
      <GestureHandlerRootView style={{ flex: 1 }}>
        <NavigationContainer >
          <View style={styles.container}>
            <Stack.Navigator screenOptions={{headerShown:false}}>
              <Stack.Screen options={{headerShown:false}} name="Root" component={Root} />
              <Stack.Screen name="Home" component={Home} />
              <Stack.Screen name="History" component={History} />
            </Stack.Navigator>
          </View>
        </NavigationContainer>
      </GestureHandlerRootView>
    </PaperProvider>
  );
}

4. 检查Reanimated的Babel插件配置 #

抽屉导航依赖react-native-reanimated，确保babel.config.js中添加了对应的插件且放在最后：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      // 其他插件
      'react-native-reanimated/plugin', // 必须放在最后一位
    ],
  };
};

5. 清除项目缓存并重启 #

Expo项目的缓存可能导致iOS端异常，执行以下命令重启：

expo start --clear

验证步骤 #

完成上述修改后，重新启动iOS模拟器，点击汉堡图标测试抽屉是否正常展开。

内容的提问来源于stack exchange，提问作者Sher Mi