React Navigation 6 中如何修改drawerActiveBackgroundColor属性？

问题修复说明 #

• 你当前代码中Login路由重复声明了options属性，后面的options={{headerShown: false}}会覆盖掉前面包含drawerStyle的配置，导致自定义的抽屉样式失效，需要合并两个options的配置项。
• drawerActiveBackgroundColor是控制侧边栏选中菜单项的背景色属性：
  • 写在Drawer.Navigator的screenOptions里，会对所有抽屉路由全局生效
  • 如果要给单个路由单独设置，可在对应Drawer.Screen的options里单独配置该属性，优先级高于全局配置

修改后的完整代码如下：

<Drawer.Navigator
  screenOptions={{
    // 全局配置所有选中菜单项的背景色，直接修改这里的色值即可
    drawerActiveBackgroundColor: "red",
  }}
  drawerContent={props => <DrawerContent {...props} />}
>
  <Drawer.Screen
    name="Login"
    component={Login}
    // 合并之前重复的options配置
    options={{
      headerShown: false,
      drawerStyle: {
        backgroundColor: '#c6cbef',
        width: 240,
      },
      // 如果要单独给Login路由设置选中背景色，单独加这行即可，会覆盖全局配置
      // drawerActiveBackgroundColor: "blue"
    }}
  />
  <Drawer.Screen
    name="SignUp"
    component={SignUp}
    options={{headerShown: false}}
  />
</Drawer.Navigator>

内容的提问来源于stack exchange，提问作者Haris Ahmed