Javascript activeTintColor在抽屉中不工作-REACT-NATIVE

我有一个抽屉，activeTintColor不工作，代码如下：

   const drawer = createDrawerNavigator(
    {
        home: Home_stack, //routes
        archived_notes: Archived_notes_stack,
        about: About_stack,
    },
    {  
        initialRouteName: "home", //config
        contentComponent: Drawer_style,
        overlayColor: 1,
        contentOptions: {
            activeTintColor: "red",
        }
    }
);

const Route = createAppContainer(
    createSwitchNavigator({
        drawer
    })
);

export default Route;

class Drawer_style extends Component {
    
    icon_config = [
        {name: "Home", screen: "home", icon: <Entypo name = "home" size = {30} color = "black"></Entypo>, key: "home"},
        {name: "Archive", screen: "archived_notes", icon: <MaterialIcons name="archive" size = {30} color = "black"/>, key: "archive"},
        {name: "About", screen: "about", icon: <FontAwesome5 name = "exclamation-circle" size = {30} color =  "black"></FontAwesome5>, key: "about"},
    ];
    
    
    render() {
        return (
            <View style = {styles.container}> 
                <FlatList
                    data = {this.icon_config}
                    renderItem = {({item}) => (
                        <Drawer
                            navigation = {this.props.navigation}
                            screen = {item.screen}
                            icon = {item.icon}
                            name = {item.name}>
                        </Drawer>
                    )}>
                </FlatList>
            </View>
       );
    }

}

const Drawer = ({navigation, screen, icon, name}) => {
    return (
        <TouchableOpacity
            onPress = {() => navigation.navigate(`${screen}`)}
            style = {styles.container_icon}>
            <Text style = {styles.icon}>{icon}</Text>
            <Text style = {styles.name}>{name}</Text>
        </TouchableOpacity>
    );
}

const styles = StyleSheet.create({
    container: {
        marginTop: StatusBar.currentHeight,
    },
    container_icon: {
        flexDirection: "row",
        justifyContent: "flex-start",
    },
    icon: {
        margin: 10,
    },  
    name: {
        fontSize: 25,
        margin: 10,
    }
})

export default Drawer_style;

如您所见，

路由

是stackNavigator，而

配置

是抽屉的配置，我有

内容选项

和

activeTintColor

但当我选择其中一个屏幕时，它不起作用：

现在我在家里，家里的图标应该是红色的，但它不是，

contentComponent:Drawer\u style

是图标所在的组件，下面是代码：

   const drawer = createDrawerNavigator(
    {
        home: Home_stack, //routes
        archived_notes: Archived_notes_stack,
        about: About_stack,
    },
    {  
        initialRouteName: "home", //config
        contentComponent: Drawer_style,
        overlayColor: 1,
        contentOptions: {
            activeTintColor: "red",
        }
    }
);

const Route = createAppContainer(
    createSwitchNavigator({
        drawer
    })
);

export default Route;

class Drawer_style extends Component {
    
    icon_config = [
        {name: "Home", screen: "home", icon: <Entypo name = "home" size = {30} color = "black"></Entypo>, key: "home"},
        {name: "Archive", screen: "archived_notes", icon: <MaterialIcons name="archive" size = {30} color = "black"/>, key: "archive"},
        {name: "About", screen: "about", icon: <FontAwesome5 name = "exclamation-circle" size = {30} color =  "black"></FontAwesome5>, key: "about"},
    ];
    
    
    render() {
        return (
            <View style = {styles.container}> 
                <FlatList
                    data = {this.icon_config}
                    renderItem = {({item}) => (
                        <Drawer
                            navigation = {this.props.navigation}
                            screen = {item.screen}
                            icon = {item.icon}
                            name = {item.name}>
                        </Drawer>
                    )}>
                </FlatList>
            </View>
       );
    }

}

const Drawer = ({navigation, screen, icon, name}) => {
    return (
        <TouchableOpacity
            onPress = {() => navigation.navigate(`${screen}`)}
            style = {styles.container_icon}>
            <Text style = {styles.icon}>{icon}</Text>
            <Text style = {styles.name}>{name}</Text>
        </TouchableOpacity>
    );
}

const styles = StyleSheet.create({
    container: {
        marginTop: StatusBar.currentHeight,
    },
    container_icon: {
        flexDirection: "row",
        justifyContent: "flex-start",
    },
    icon: {
        margin: 10,
    },  
    name: {
        fontSize: 25,
        margin: 10,
    }
})

export default Drawer_style;

class-Drawer\u样式扩展组件{
图标配置=[
{名称：“主页”，屏幕：“主页”，图标：，键：“主页”}，
{名称：“存档”，屏幕：“存档笔记”，图标：，键：“存档”}，
{名称：“关于”，屏幕：“关于”，图标：，键：“关于”}，
];
render（）{
返回(
(
)}>
);
}
}
常量抽屉=（{导航、屏幕、图标、名称}）=>{
返回(
导航（`${screen}`）}
style={style.container_icon}>
{icon}
{name}
);
}
const styles=StyleSheet.create({
容器：{
marginTop:StatusBar.currentHeight，
},
容器图标：{
flexDirection:“行”，
justifyContent:“灵活启动”，
},
图标：{
差额：10，
},  
姓名：{
尺寸：25，
差额：10，
}
})
导出默认抽屉样式；

我怎样才能让它工作