1 API
DrawerNavigator(RouteConfigs
, DrawerNavigatorConfig
)
2 DrawerNavigatorConfig
drawerWidth 抽屉的宽度
drawerPosition 抽屉的位置 值有
left 、right 默认是leftcontentComponent 用来自定义抽屉的组件，默认的组件是
DrawerView 但DrawerView是不能滑动的contentOptions 配置内容
3 contentOptions
initialRouteName 默认页面组件activeTintColor 选中文字颜色activeBackgroundColor 选中背景颜色inactiveTintColor未选中文字颜色inactiveBackgroundColor未选中背景颜色style样式labelStyle 抽屉标签样式onItemPress 每次调用按钮Item时调用该方法drawerLabel 抽屉标注，可以是元素 或一个函数这个函数返回一个元素drawerIcon 抽屉图标 可以是元素 或一个函数这个函数返回一个元素
4 打开或关闭抽屉
this.props
.navigation
.navigate('DrawerOpen'); // open drawer
this.props
.navigation
.navigate('DrawerClose'); // close drawer
5 例
contentOptions使用：
const MyFirstProject
= DrawerNavigator({
Home
: {
screen
: MyHomeScreen,
},
Notifications
: {
screen
: MyNotificationsScreen,
},
},{
drawerWidth
: 200,
// 抽屉宽
drawerPosition
: 'left',
// 抽屉在左边还是右边
// contentComponent: CustomDrawerContentComponent, // 自定义抽屉组件
contentOptions
: {
initialRouteName
: 'Home',
// 默认页面组件
activeItemKey
: 'Notifications',
labelStyle
: {
//标签样式
// color : 'red',
height
: 30,
},
activeTintColor
: 'white',
// 选中文字颜色
activeBackgroundColor
: '#ff8500',
// 选中背景颜色
inactiveTintColor
: '#666',
// 未选中文字颜色
inactiveBackgroundColor
: '#fff',
// 未选中背景颜色
style
: {
// 样式
marginVertical
: 0,
},
//没有作用
onItemPress
: (route)
=> {
console.log(
'-------->' + JSON.stringify(route))
},
},
contentComponent
: props
=> {
console.log(
'contentComponent');
console.log(props);
return (
<ScrollView
>
<View
>
<View style
={{paddingVertical
: 20, paddingHorizontal
: 15, backgroundColor
:'#000'}}
>
<Text style
={{color
:'#FFF'}}
>ser Name
</Text>
</View>
<DrawerItems {...props}
/>
</View>
</ScrollView>
)
},
});
完整代码：
import React from
'react';
import {
AppRegistry,
Text,
View,
StyleSheet,
Image,
Button,
ScrollView,
} from
'react-native';
import {
DrawerNavigator ,
DrawerItems ,
} from
'react-navigation';
class MyHomeScreen
extends React.Component {
static navigationOptions
= {
//{ focused: boolean, tintColor: string }
drawerLabel
: 'Home',
//{ focused: boolean, tintColor: string }
drawerIcon
: ({ tintColor })
=> (
<Image
source
={require(
'./img/icon_1.png')}
style
={[styles.icon, {tintColor
: tintColor}]}
/>
),
};
render() {
return (
<Button
onPress
={()
=> this.props.navigation.navigate(
'DrawerOpen')}
title
=" MyHomeScreen ----> open drawer"
/>
);
}
}
const MyNotificationsScreen
= ({navigation})
=> (
<View
>
<Button
onPress
={()
=> navigation.navigate(
'DrawerOpen')}
title
="MyNotificationsScreen ---> open drawer "
/>
<Text
></Text>
</View>
);
MyNotificationsScreen.navigationOptions
= {
drawerLabel
: 'Notifications',
drawerIcon
: ()
=> (
<View
>
<Image
source
={require(
'./img/icon_1.png')}
style
={styles.icon}
/>
</View>
),
};
const MyFirstProject
= DrawerNavigator({
Home
: {
screen
: MyHomeScreen,
},
Notifications
: {
screen
: MyNotificationsScreen,
},
},{
drawerWidth
: 200,
// 抽屉宽
drawerPosition
: 'left',
// 抽屉在左边还是右边
// contentComponent: CustomDrawerContentComponent, // 自定义抽屉组件
contentOptions
: {
initialRouteName
: 'Home',
// 默认页面组件
activeItemKey
: 'Notifications',
labelStyle
: {
//标签样式
// color : 'red',
height
: 30,
},
activeTintColor
: 'white',
// 选中文字颜色
activeBackgroundColor
: '#ff8500',
// 选中背景颜色
inactiveTintColor
: '#666',
// 未选中文字颜色
inactiveBackgroundColor
: '#fff',
// 未选中背景颜色
style
: {
// 样式
marginVertical
: 0,
},
//没有作用
onItemPress
: (route)
=> {
console.log(
'-------->' + JSON.stringify(route))
},
},
contentComponent
: props
=> {
console.log(
'contentComponent');
console.log(props);
return (
<ScrollView
>
<View
>
<View style
={{paddingVertical
: 20, paddingHorizontal
: 15, backgroundColor
:'#000'}}
>
<Text style
={{color
:'#FFF'}}
>ser Name
</Text>
</View>
<DrawerItems {...props}
/>
</View>
</ScrollView>
)
},
});
const styles
= StyleSheet.create({
icon
: {
width
: 24,
height
: 24,
},
});
AppRegistry.registerComponent(
'MyFirstProject' , ()
=> MyFirstProject );
效果图：
参考：
官网
资料1
资料2
