react-native - 如何在 React-Native 中设置 DrawerNavigator 的背景图像？

Question

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

DrawerNavigator

DrawerNavigation代码

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

Answer 1

我们可以提供定制 contentComponent用于 DrawerNavigator。请参阅下面的代码。

代码:

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

设置抽屉背景: