如何在 React-Native 中设置 DrawerNavigator 的背景图片？

Posted 2023-02-19

【中文标题】如何在 React-Native 中设置 DrawerNavigator 的背景图片？

【英文标题】：How to Set background image of DrawerNavigator in React-Native?

【发布时间】：2018-06-02 22:47:28

【问题描述】：

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

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);

【问题讨论】：

非常好的问题 =) 我不知道该怎么做。也许用抽屉宽度做简单的方法：'100%'，然后分成两半以在右侧显示图像？

@Val，但没有任何默认属性。

哪个属性？在这里检查，drawerWidth 可以设置为drawerWidth: '100%' reactnavigation.org/docs/navigators/…

我将设置drawerWidth: '100%' 然后它会占用整个项目的宽度。

@Val，是的，我使用 contentComponent 解决了。reactnavigation.org/docs/navigators/…

【参考方案1】：

我们可以为 DrawerNavigator 提供自定义的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').widthsource=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);

设置抽屉背景：

【参考方案2】：

找到抽屉导航的背景图片的解决方案 这是我的代码

    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"
    
  
);

the end result