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

时间:2019-12-02 19:53:40

标签: image menu background react-navigation drawer

如何在反应导航抽屉菜单上将图像设置为背景?

我正在使用expo,反应导航为^ 4.0.10

菜单应包含png图像作为BackgroundImage,(全屏)

1 个答案:

答案 0 :(得分:0)

在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>