在反应导航的抽屉导航器菜单上将图像设置为背景答案

【问题标题】：set image as background on drawer navigator menu on react navigation在反应导航的抽屉导航器菜单上将图像设置为背景
【发布时间】：2019-12-02 19:53:40
【问题描述】：

如何将图像设置为 react-navigation 抽屉菜单的背景？

我正在使用 expo，带有反应导航 ^4.0.10

菜单应包含一个 png 图像作为 BackgroundImage，（全屏）

【问题讨论】：

标签： image menu background react-navigation drawer

【解决方案1】：

在react-navigation中使用自定义抽屉组件。查看react-navigation中自定义抽屉组件的例子here

const DrawerNavigatorExample = createDrawerNavigator(
  {
    //Drawer Optons and indexing
    NavScreen1: {
      screen: FirstActivity_StackNavigator,
      navigationOptions: {
        drawerLabel: 'Demo Screen 1',
      },
    },
    NavScreen2: {
      screen: Screen2_StackNavigator,
      navigationOptions: {
        drawerLabel: 'Demo Screen 2',
      },
    },
    NavScreen3: {
      screen: Screen3_StackNavigator,
      navigationOptions: {
        drawerLabel: 'Demo Screen 3',
      },
    },
  },
  {
    //For the Custom sidebar menu we have to provide our CustomSidebarMenu
    contentComponent: CustomSidebarMenu,
    //Sidebar width
    drawerWidth: Dimensions.get('window').width - 130,
  }
);

const CustomSidebarMenu=()=><ImageBackground source={{uri:'imgbg'}}><Text>Drawer</Text></ImageBackground>

【讨论】：