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

Question

在 react-navigation/drawer 的 DrawerItem 上，有没有办法添加活动和非活动背景色？我按照此文档来实现此 https://reactnavigation.org/docs/drawer-navigator/。

我已将这些代码行添加到 drawerItems。但它对我不起作用。

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',
  },
});