我将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);
最佳答案
我们可以为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').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);
设置抽屉背景: