Reactjs CustomDrawerNavigator：更改活动和非活动背景颜色

在react navigation/drawer's DrawerItem上，是否有添加活动和非活动背景色的方法？我遵循这份文件来实现这一点

我已将这些代码行添加到

抽屉中。但这对我不起作用

drawerContentOptions={{
    activeTintColor: '#fff', /* font color for active screen label */
    activeBackgroundColor: '#68f', /* bg color for active screen */
    inactiveTintColor: 'grey', /* Font color for inactive screens' labels */
}}

由以下命令初始化：

import * as React from 'react'; 
import {
  Button,
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Image,
} from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import {
  createDrawerNavigator,
  DrawerContentScrollView,
  DrawerItem,
} from '@react-navigation/drawer';
import Home from '../home/containers';
import NavigationService from '../../navigation/NavigationService';
import * as homeActions from '../../features/home/actions';
import * as loginActions from '../../features/login/actions';
import { Images } from '../../config';
import i18n from 'i18n-js';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        onPress={() => NavigationService.navigate('Notifications')}
        title="Go to notifications"
      />
    </View>
  );
}

function NotificationsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button onPress={() => NavigationService.goBack()} title="Go back home" />
    </View>
  );
}

function CustomDrawerContent({ props, navigation }) {
  const dispatch = useDispatch();
  const outlets = useSelector((state) => state.homeReducer.outlets);
  const defaultOutLet = useSelector((state) => state.homeReducer.defaultOutLet);

  const drawerItems = outlets.map((outlet) => {
    return (
      console.log("############## nav drawr ################## " + outlet.name),
      <DrawerItem
        {...props}
        key={outlet.userCompanyId}
        label={outlet.name}
        onPress={() => {
          dispatch(homeActions.changeSelectedOutlet(outlet));
          navigation.closeDrawer();
        }}
      />
    );
  });
  return (
    <View style={styles.flexView}>
      <View style={styles.container}>
        <Image
          style={styles.image}
          source={Images.icons.logo}
          resizeMode="contain"
        />
        {defaultOutLet && <Text style={styles.text}>{defaultOutLet.name}</Text>}
      </View>
      <View style={styles.separator} />
      <View style={styles.flexView}>{drawerItems}</View>
      <View style={styles.separator} />
      <View style={styles.bottomView}>
        <TouchableOpacity
          style={styles.logoutContainer}
          onPress={() => {
            dispatch(homeActions.clearUserCompany());
            dispatch(loginActions.completeLogOutClearingUserData());
          }}>
          <Image
            style={styles.logoutIcon}
            source={Images.icons.power}
            resizeMode="center"
          />
          <Text style={styles.logoutText}>{i18n.t('common.logout')}</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const Drawer = createDrawerNavigator();

export default function DrawerNavigator() {
  return (
    <Drawer.Navigator
      drawerContent={(props) => <CustomDrawerContent {...props} />}
      initialRouteName="Home">
      <Drawer.Screen name="Home" component={Home} />
    </Drawer.Navigator>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 0.3,
    width: '100%',
    backgroundColor: 'white',
  },
  flexView: {
    flex: 1,
  },
  text: {
    marginVertical: 12,
    color: 'black',
    textAlign: 'center',
  },
  logoutContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    width: '100%',
  },
  logoutText: {
    color: 'gray',
  },
  logoutIcon: {
    flex: 0.4,
  },
  image: {
    flex: 1,
    marginTop: 20,
    alignSelf: 'center',
  },
  separator: {
    width: '100%',
    height: 1,
    backgroundColor: 'gray',
  },
  bottomView: {
    flex: 0.15,
    width: '100%',
    justifyContent: 'center',
  },
});

import*as React from'React'；
进口{
按钮
看法
文本，
样式表，
可触摸不透明度，
形象,，
}从“反应本机”；
从'react redux'导入{useDispatch，useSelector}；
进口{
createDrawerNavigator，
DroperContentScrollView，
抽屉式，
}来自“@react导航/抽屉”；
从“../Home/containers”导入主页；
从“../../navigation/NavigationService”导入NavigationService；
从“../../features/home/actions”导入*作为homeActions；
从“../../features/login/actions”导入*作为登录选项；
从“../../config”导入{Images}；
从“i18n js”导入i18n；
功能主屏幕（{navigation}）{
返回(
NavigationService.navigate（'Notifications'）}
title=“转到通知”
/>
);
}
函数通知屏幕（{navigation}）{
返回(
NavigationService.goBack（）}title=“回家”/>
);
}
函数CustomDrawerContent（{props，navigation}）{
const dispatch=usedpatch（）；
const outlets=useSelector（（state）=>state.homeReducer.outlets）；
constDefaultOutlet=useSelector（（state）=>state.homeReducer.defaultOutLet）；
const drawerItems=outlets.map（（outlet）=>{
返回(
控制台。日志（“导航绘图机”名称），
{
调度（homeActions.changeSelectedOutlet（出口））；
navigation.closeDrawer（）；
}}
/>
);
});
返回(
{defaultOutLet&&{defaultOutLet.name}
{drawerItems}
{
分派（homeActions.clearUserCompany（））；
调度（loginActions.completeLogOutClearingUserData（））；
}}>
{i18n.t（'common.logout'）}
);
}
const Drawer=createDrawerNavigator（）；
导出默认函数DrawerNavigator（）{
返回(
}
initialRouteName=“主页”>
);
}
const styles=StyleSheet.create({
容器：{
弹性系数：0.3，
宽度：“100%”，
背景颜色：“白色”，
},
flexView：{
弹性：1，
},
正文：{
玛吉：12，
颜色：'黑色'，
textAlign:'中心'，
},
注销容器：{
flexDirection:'行'，
对齐项目：“居中”，
宽度：“100%”，
},
logoutText：{
颜色：'灰色'，
},
Logooticon：{
弹性系数：0.4，
},
图片：{
弹性：1，
玛金托普：20，
对齐自我：“中心”，
},
分离器：{
宽度：“100%”，
身高:1,，
背景颜色：“灰色”，
},
底视图：{
弹性系数：0.15，
宽度：“100%”，
为内容辩护：“中心”，
},
});
我看不出你把抽屉内容选项放在抽屉里的什么地方了。我在发布这个问题后添加了这些行，
>
但这不适用于这种情况。我无法重现你的错误，但我可以让你访问我的。它可以给你一些洞察力。