如何在React-Native中设置DrawerNavigator的背景图像? [英] How to Set background image of DrawerNavigator in React-Native?

问题描述

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

I integrate DrawerNavigator in my project. its working fine, but there are no any property to set background image. How can I will add background image in 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);

推荐答案

我们可以为DrawerNavigator提供自定义的contentComponent.请参见下面的代码.

we can provide the custom contentComponent for DrawerNavigator. See the below code.

代码:

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中设置DrawerNavigator的背景图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！