React native 如何在React Native中设置抽屉驱动程序的背景图像？

我将DrawerNavigator集成到我的项目中。其工作正常，但没有任何属性设置背景图像。如何在抽屉中添加背景图像

付款人授权代码

import { AppRegistry  , Dimensions} from 'react-native';

import Library from './ViewControllers/Library';
import Language from './ViewControllers/Language';
import AboutUS from './ViewControllers/AboutUS';
import Support from './ViewControllers/Support';
import { DrawerNavigator } from 'react-navigation';

const MyApp = DrawerNavigator({
  Library: {
    screen: Library,
  },
  Language: {
    screen: Language,
  },
  AboutUS: {
    screen: AboutUS,
  },
  Support: {
    screen: Support,
  },

},{
      initialRouteName:'Library',
      drawerWidth: Dimensions.get('window').width / 2.0,
      drawerPosition: 'left',
      useNativeAnimations : false,
      drawerBackgroundColor : 'white',
      contentOptions: {
        activeTintColor: 'black',
        activeBackgroundColor : 'transparent',
        inactiveTintColor : 'black',
        itemsContainerStyle: {
          marginVertical: 0,
        },
        iconContainerStyle: {
          opacity: 1
        },
        itemStyle :{
          height : 50,
        }

      },

  }
);



AppRegistry.registerComponent('Basair', () => MyApp);

---

我们可以为抽屉驱动程序提供定制的

contentComponent

。请参阅下面的代码

代码：

import { AppRegistry  , Dimensions , ScrollView , Image} from 'react-native';

import React, { Component } from 'react';

import Library from './ViewControllers/Library';
import Language from './ViewControllers/Language';
import AboutUS from './ViewControllers/AboutUS';
import Support from './ViewControllers/Support';

import { DrawerNavigator , DrawerItems, SafeAreaView  } from 'react-navigation';

const CustomDrawerContentComponent = (props) => (
  <ScrollView>
    <Image style={{flex: 1 , position : 'absolute' , top : 0 , height :Dimensions.get('window').height  , width : Dimensions.get('window').width}}source={require('./menuOverlay.png')}/>
    <SafeAreaView style={{flex: 1 , backgroundColor : 'transparent'}} forceInset={{ top: 'always', horizontal: 'never' }}>
      <DrawerItems {...props} />
    </SafeAreaView>
  </ScrollView>
);

const MyApp = DrawerNavigator({
  Library: {
    screen: Library,
  },
  Language: {
    screen: Language,
  },
  AboutUS: {
    screen: AboutUS,
  },
  Support: {
    screen: Support,
  },

},{
      initialRouteName:'Library',
      drawerWidth: Dimensions.get('window').width,
      drawerPosition: 'left',
      useNativeAnimations : false,
      drawerBackgroundColor : 'transparent',
      contentComponent: CustomDrawerContentComponent,
      contentOptions: {
        activeTintColor: 'black',
        activeBackgroundColor : 'transparent',
        inactiveTintColor : 'black',
        itemsContainerStyle: {
          marginVertical: 0,
        },
        iconContainerStyle: {
          opacity: 1,
        },
        itemStyle :{
          height : 50,
        }

      },

  }
);



AppRegistry.registerComponent('Basair', () => MyApp);

从'react native'导入{AppRegistry，Dimensions，ScrollView，Image}；
从“React”导入React，{Component}；
从“./ViewController/Library”导入库；
从“/ViewControllers/Language”导入语言；
从“./ViewController/AboutUS”导入AboutUS；
从“/ViewControllers/Support”导入支持；
从“react navigation”导入{DroperNavigator、DroperItems、SafeAreaView}；
常量CustomDrawerContentComponent=（道具）=>(
);
const MyApp=抽屉驱动程序({
图书馆：{
屏幕：图书馆，
},
语言：{
屏幕：语言，
},
关于：{
屏幕：AboutUS，
},
支持：{
屏幕：支持，
},
},{
initialRouteName:“库”，
抽屉宽度：尺寸。获取（'窗口'）。宽度，
抽屉位置：'左'，
UsenationAnimations:false，
抽屉背景颜色：“透明”，
contentComponent:CustomDrawerContentComponent，
内容选项：{
activeTintColor:'黑色'，
activeBackgroundColor:'透明'，
颜色：“黑色”，
itemsContainerStyle：{
结果：0，
},
iconContainerStyle：{
不透明度：1，
},
项目样式：{
身高：50，
}
},
}
);
AppRegistry.registerComponent（'Basair'，（）=>MyApp）；

设置抽屉的背景：

---

找到了抽屉导航背景图像的解决方案 这是我的密码

    import {
  createDrawerNavigator,
  createAppContainer,
  createStackNavigator,
  createSwitchNavigator,
  createBottomTabNavigator,
  DrawerItems
} from "react-navigation"; //React navigation imports
//Creating the custom Drawer menu Component
const CustomDrawerComponent = props => (
  <SafeAreaView style={{ flex: 1 }}>
    <ImageBackground source={drawerBg}  style={styles.Backgroundcontainer}>
    <Image
      source={require("./assets/images/logo.png")}
      style={{ height: 120, width: 120, borderRadius: 0 , marginTop:20 }}
    />
    <ScrollView>
      <DrawerItems {...props} />
    </ScrollView>
    </ImageBackground>
  </SafeAreaView>
);
const AppDrawerNavigator = createDrawerNavigator( //Creating the drawer navigator
  {
    Accueil: {
      screen: Accueil,
      navigationOptions: {
        title: "Accueil",
        drawerIcon: ({ tintColor }) => (
          <Icon name="md-home" style={{ fontSize: 24, color: tintColor }} />
        )
      }
    },
    RendezVous: {
      screen: StackNavigator,   //Returns the StackNavigator that has a tabnavigaotr nested in it
      navigationOptions: {
        title: "Rendez-vous",
        drawerIcon: ({ tintColor }) => (
          <Icon name="md-calendar" style={{ fontSize: 24, color: tintColor }} />
        )
      }
    },
    ParcoursDeSoin: {
      screen: ParcoursDeSoin,
      navigationOptions: {
        title: "Examen medicale",
        drawerIcon: ({ tintColor }) => (
          <Icon name="md-document" style={{ fontSize: 24, color: tintColor }} />
        )
      }
    },
    Analyses: {
      screen: Analyses,
      navigationOptions: {
        title: "Analyses",
        drawerIcon: ({ tintColor }) => (
          <Icon name="md-medical" style={{ fontSize: 24, color: tintColor }} />
        )
      }
    },
    Ordonnance: {
      screen: Ordonnance,
      navigationOptions: {
        title: "Ordonnance",
        drawerIcon: ({ tintColor }) => (
          <Icon name="md-medkit" style={{ fontSize: 24, color: tintColor }} />
        )
      }
    },
    Profil: {
      screen: Profil,
      navigationOptions: {
        title: "Profile",
        drawerIcon: ({ tintColor }) => (
          <Icon name="ios-man" style={{ fontSize: 24, color: tintColor }} />
        )
      }
    },
    APropos: {
      screen: APropos,
      navigationOptions: {
        title: "A propos",
        drawerIcon: ({ tintColor }) => (
          <Icon
            name="md-analytics"
            style={{ fontSize: 24, color: tintColor }}
          />
        )
      }
    }
  },
  {
    contentComponent: CustomDrawerComponent, //calling back to the customdrawerComponent
    drawerWidth: width/2,
    contentOptions: {
      activeTintColor: "orange"
    }
  }
);

导入{
createDrawerNavigator，
createAppContainer，
createStackNavigator，
createSwitchNavigator，
CreateBoottomTabNavigator，
抽屉
}从“反应导航”//反应导航导入
//创建自定义抽屉菜单组件
const CustomDrawerComponent=props=>(
);
const AppDrawerNavigator=createDrawerNavigator（//创建抽屉导航器
{
准确地说：{
屏幕：Accueil，
导航选项：{
标题：“Accueil”，
抽屉图标：（{tintColor}）=>(
)
}
},
会合地点：{
screen:StackNavigator，//返回嵌套了tabnavigautr的StackNavigator
导航选项：{
标题：“你的朋友们”，
抽屉图标：（{tintColor}）=>(
)
}
},
帕库斯德松：{
屏幕：ParcoursDeSoin，
导航选项：{
标题：“医疗考试”，
抽屉图标：（{tintColor}）=>(
)
}
},
分析：{
屏幕：分析，
导航选项：{
标题：“分析”，
抽屉图标：（{tintColor}）=>(
)
}
},
秩序：{
屏幕：Ordonance，
导航选项：{
标题：“秩序”，
抽屉图标：（{tintColor}）=>(
)
}
},
档案：{
屏幕：Profil，
导航选项：{
标题：“简介”，
抽屉图标：（{tintColor}）=>(
)
}
},
关于：{
屏幕：恰到好处，
导航选项：{
标题：“提案人”，
抽屉图标：（{tintColor}）=>(
)
}
}
},
{
contentComponent:CustomDrawerComponent，//调用CustomDrawerComponent
抽屉宽度：宽度/2，
内容选项：{
activeTintColor：“橙色”
}
}
);

---

真是个好问题=）我不知道怎么做。也许可以简单地使用抽屉宽度：“100%”，并拆分一半以在右侧显示图像？@Val，但没有任何默认属性。哪个属性？选中此处，使用

drawerWidth

您可以将其设置为

drawerWidth:'100%'

我将设置drawerWidth:'100%'，然后使用项目的全宽。@Val，是的，我使用contentComponent解决。