Wie Hintergrundbild von DrawerNavigator in React-Native festlegen?

Question

Ich integriere DrawerNavigator in mein Projekt. es funktioniert gut, aber es gibt keine Eigenschaft, Hintergrundbild zu setzen. Wie kann ich ein Hintergrundbild in DrawerNavigator hinzufügen?

DrawerNavigator

Code of 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

wir die kundenspezifische contentComponent für DrawerNavigator zur Verfügung stellen kann. Siehe den folgenden Code.

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

Set Hintergrund der Schublade: