我正在尝试用customDrawerNavigator替换默认的抽屉导航器。我使用了ScrollView、DrawerNavigatorItems，并在自定义抽屉组件中传递道具。我有一个AppNavigator组件，它呈现抽屉导航器。
，这是我迄今为止尝试过的
import React from 'react';
import { createDrawerNavigator, ScrollView,DrawerNavigatorItems } from 'react-navigation-drawer';
import {Icon, Body, Button, Container, Header, Content, Left} from 'native-base';
import {Image, View} from 'react-native';
import Admin from '../screens/Admin.js';
import Manager from '../screens/Manager.js';
import Login from '../screens/Login.js'
const DrawerNavigator = createDrawerNavigator({
Admin: {
screen: Admin
},
Manager: {
screen: Manager
},
Login: {
screen: Login
}
},
{
initialRouteName: 'Admin',
drawerPosition: 'left',
contentComponent: CustomDrawerContentComponent,
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle'
}
);
const CustomDrawerContentComponent = (props) => (
<Container>
<Header style={{height: 200, backgroundColor: 'white', paddingTop: 50}}>
<Body>
<Image style={{width: 30, height: 30}} source={require("../assets/logo.png")}/>
<ScrollView>
<DrawerNavigatorItems {...props} />
<Text>Your Own Footer Area After</Text>
</ScrollView>
</Body>
</Header>
</Container>
);
export default DrawerNavigator;
我有一个AppNavigator内容来包装这个DrawerNavigator，并在App.js文件中呈现。
export default createAppContainer(
createSwitchNavigator({
// Auth: Login,
Main:DrawerNavigator,
})
);
但是我有一个空抽屉。
导航器需要封装在react navigation:提供的createAppContainer中
import { createAppContainer } from 'react-navigation';
const DrawerNavigator = createDrawerNavigator({
Admin: {
screen: Admin
},
Manager: {
screen: Manager
},
Login: {
screen: Login
}
},
{
initialRouteName: 'Admin',
drawerPosition: 'left',
contentComponent: CustomDrawerContentComponent,
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle'
}
);
const Container = createAppContainer(DrawerNavigator);
export default Container;
希望，这会有所帮助。