React Native导航抽屉项点击/长按背景变灰问题求助

你看到的灰色背景是抽屉项的按压状态反馈色，这是组件默认的临时交互反馈，和你设置的drawerActiveBackgroundColor（选中后的持久背景）是两个不同状态。要修改或移除它，有两种可行方案：

方案1：全局配置修改 #

在Drawer.Navigator的screenOptions中添加drawerItemStyle，通过pressColor属性自定义按压颜色，或者设为透明完全移除：

<Drawer.Navigator
  screenOptions={{
    headerPressColor: Colors['blue'],
    headerShadowVisible: true,
    drawerActiveBackgroundColor: Colors['primary'],
    drawerActiveTintColor: '#fff',
    drawerInactiveTintColor: '#333',
    drawerLabelStyle: {
      marginLeft: -20,
      fontFamily: 'Poppins-Regular',
      fontSize: 15,
    },
    itemStyle: { flex: 1, marginVertical: 5 },
    // 自定义按压反馈颜色，或设为'transparent'移除
    drawerItemStyle: { pressColor: Colors['primary'] },
  }}
  drawerContent={(props) => <CustomSidebarMenu {...props} />}
>

方案2：自定义抽屉组件内修改 #

由于你使用了自定义的CustomSidebarMenu，可以直接在组件内针对单个抽屉项调整：

• 如果你用的是DrawerItem组件，直接给它添加pressColor属性：

  <DrawerItem
    label="首页"
    onPress={() => props.navigation.navigate('Home')}
    pressColor={Colors['primary']}
  />
  

• 如果你是自己用TouchableOpacity/TouchableHighlight封装的项：
  • 对TouchableOpacity，调整activeOpacity（用透明度替代灰色背景）：

    <TouchableOpacity
      onPress={() => props.navigation.navigate('Home')}
      activeOpacity={0.6}
      style={/* 你的样式 */}
    >
      {/* 抽屉项内容 */}
    </TouchableOpacity>
    

  • 对TouchableHighlight，设置underlayColor自定义按压背景：

    <TouchableHighlight
      onPress={() => props.navigation.navigate('Home')}
      underlayColor={Colors['primary']}
      style={/* 你的样式 */}
    >
      {/* 抽屉项内容 */}
    </TouchableHighlight>
    

两种方案选其一即可：方案1全局生效，适合统一修改；方案2更灵活，适合需要单独配置部分抽屉项的场景。

内容的提问来源于stack exchange，提问作者Madhu Paka