将背景图像添加到反应导航抽屉

Question

我正在尝试将背景图像添加到 React 导航抽屉

import React from "react";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { StackNavigator } from "../../routes/HomeStack";
import { MaterialIcons } from "@expo/vector-icons";
import { DemonHunterIcon, DruidIcon} from "../../icons";

import { DemonHunter } from "../../screens/DemonHunter";
import { Druid } from "../../screens/Druid";

import { HomeHeader } from "../../components/Header";
import { ImageBackground } from "react-native";

const { Navigator, Screen } = createDrawerNavigator();

export default function Drawer() {
  return (
    <ImageBackground source={require("../../assets/drawer-bg.png")} style={{ flex: 1 }}>
      <Navigator initialRouteName="Home" hideStatusBar>
        <Screen
          name="Home"
          options={{
            drawerIcon: () => <MaterialIcons name="home" size={24} color="black" />,
          }}
        >
          {() => <StackNavigator component={Home} name="Home" header={HomeHeader} />}
        </Screen>
        <Screen
          name="Hunter"
          options={{
            drawerIcon: () => <HunterIcon />,
          }}
        >
          {() => <StackNavigator component={Hunter} name="Hunter" />}
        </Screen>
        <Screen name="Demon Hunter" options={{ drawerIcon: () => <DemonHunterIcon /> }}>
          {() => <StackNavigator component={DemonHunter} name="Demon Hunter" />}
        </Screen>
        <Screen name="Druid" options={{ drawerIcon: () => <DruidIcon /> }}>
          {() => <StackNavigator component={Druid} name="Druid" />}
        </Screen>

      </Navigator>
    </ImageBackground>
  );
}

尝试将抽屉包裹在标签上，但没有奏效。关于如何做到这一点的任何线索？我搜索了很多，没有找到解决方案。

另外，如果您能告诉我如何更改标签的字体系列和颜色，我将不胜感激:)