使用expo-router/drawer在Android上操作抽屉时出现灰线闪烁问题

我之前处理过好几起expo-router抽屉在Android上出现灰线的问题，结合你贴的代码、依赖版本和问题描述，这个灰线基本是Android系统默认的抽屉阴影/边框，或者是透明样式配置导致的底层过渡效果透出来了。给你几个针对性的解决办法，按顺序试应该能搞定：

方法1：移除Android抽屉的默认阴影与边框 #

在你的screenOptions里添加Android专属的drawerElevation属性，并优化drawerStyle的样式，彻底移除默认的阴影和边框：

screenOptions={{
  headerShown: false,
  swipeEnabled: true,
  drawerPosition: "left",
  drawerType: "back",
  overlayColor: "transparent",
  drawerElevation: 0, // 关键：去掉Android抽屉的默认阴影
  drawerStyle: {
    width,
    backgroundColor: "transparent",
    borderWidth: 0, // 移除默认边框
    shadowColor: 'transparent', // 确保iOS端也不会有多余阴影
  },
}}

方法2：给DrawerProfile设置不透明的根容器背景 #

你当前把抽屉容器的backgroundColor设为了transparent，如果DrawerProfile组件的根容器没有设置明确的背景色，就会透出Android抽屉底层的默认灰线。打开DrawerProfile组件，给最外层的View设置你需要的背景色：

// 示例：DrawerProfile组件的根容器修改
import { View } from 'react-native';

export default function DrawerProfile(props) {
  return (
    <View style={{ flex: 1, backgroundColor: '#f5f5f5' }}> {/* 替换为你的实际主题背景色 */}
      {/* 你的抽屉内容，比如头像、菜单等 */}
    </View>
  );
}

方法3：切换抽屉类型（drawerType） #

如果保留drawerType: "back"还是有问题，可以尝试切换为"slide"类型，这种抽屉的过渡逻辑不同，大概率不会触发Android的默认灰线效果：

screenOptions={{
  // ...其他原有配置
  drawerType: "slide", // 替换原有的"back"类型
}}

方法4：禁用硬件加速（极端兜底方案） #

如果以上方法都无效，可能是Android硬件加速导致的过渡闪烁，可以在android/app/src/main/AndroidManifest.xml中给主Activity添加禁用配置：

<activity
  android:name=".MainActivity"
  android:hardwareAccelerated="false">
  <!-- 其他原有配置 -->
</activity>

⚠️ 注意：这个方法会影响App整体性能，仅作为最后尝试的兜底方案。

内容来源于stack exchange