(三).DrawerNavigator
- 基础用法/属性介绍
const DrawerNav = DrawerNavigator({
Home: { screen: MainScreen },
Bill: { screen: MainScreen1 },
Me: { screen: MainScreen1 },
},
{
drawerWidth: 200, // 抽屉宽
drawerPosition: 'right', // 抽屉在左边还是右边
// contentComponent: CustomDrawerContentComponent, // 自定义抽屉组件
contentOptions: {
initialRouteName: 'Home', // 默认页面组件
activeTintColor: 'white', // 选中文字颜色
activeBackgroundColor: '#ff8500', // 选中背景颜色
inactiveTintColor: '#666', // 未选中文字颜色
inactiveBackgroundColor: '#fff', // 未选中背景颜色
}
开启：this.props.navigation.navigate('DrawerOpen'); // open drawer
关闭：this.props.navigation.navigate('DrawerClose'); // close drawer
navigationOptions主要有以下参数：
- title：通用标题，当你不写drawerLabel时，使用此参数作为侧滑标题，通常都不写
- drawerLabel：侧滑标题
- drawerIcon：侧滑的标题图标，这里会回传两个参数，{focused: boolean, tintColor: string}，focused表示是否是选中状态，tintColor表示选中的颜色，这个颜色是我们自己在根视图定义的。当然，你也可以使用其他的组件来作为图标，比如Text。
DrawerNavigatorConfig： - drawerWidth: 侧滑栏的宽度，如果你不想写死，可以使用Dimensions获取屏幕的宽度，动态计算
- drawerPosition: 侧滑的方向，left和right，默认left
- contentComponent: 这个就比较重要了，可以自定义侧滑页，我们等会详细说。
- contentOptions: 主要配置侧滑栏条目的属性，只对DrawerItems，例如我们刚才写的例子，就可以通过这个属性来配置颜色，背景色等。其主要属性有：
- items: 这个我也没弄清是什么意思，不影响
- activeItemKey: 定义当前选中的页面的key
- activeTintColor: 选中条目状态的文字颜色
- activeBackgroundColor: 选中条目的背景色
- inactiveTintColor: 未选中条目状态的文字颜色
- inactiveBackgroundColor: 未选中条目的背景色
- onItemPress: 选中条目的回调，这个参数属性为函数，会将当前路由回调过去
- style: 定义条目的颜色
- labelStyle: 定义条目文字的颜色
Demo
const App = DrawerNavigator({
"首页" : {screen : MainView },
"设置页面" : {screen : SettingPage },
MinePage : {screen : MinePage },
}, {
drawerWidth : width / 4 * 3,
drawerPosition : 'left',
contentOptions : {
initialRouteName : 'MainView',
activeItemKey : 'Notifications',
labelStyle : {
height : 20,
},
activeTintColor : 'white',
activeBackgroundColor : '#ff8500',
inactiveTintColor : '#666',
inactiveBackgroundColor : '#fff',
style : {
marginVertical : 0,
},
},
contentComponent : props => {
return (
{
props.navigation.navigate('MinePage');
}}>
个人照片
)
},
},
);
双侧栏的架构
const TabPageDrawer = DrawerNavigator({
'MY JOBS': {screen: HomePageStack},
'Reset Password': {screen: ResetPassword},
}, {
drawerWidth: screen.width / 4 * 3,
drawerPosition: 'left',
contentOptions: {
initialRouteName: HomePageStack,
activeItemKey: 'Notifications',
labelStyle: {
height: 20,
},
activeTintColor: '#666',
activeBackgroundColor: 'transparent',
inactiveTintColor: '#666',
inactiveBackgroundColor: 'transparent',
style: {
marginVertical: 0,
marginTop: 40
},
backBehavior: 'none',
},
contentComponent: props => {
return (
1.0.1
)
},
},
);
const HomePageStack = StackNavigator({
TabHomePage: {
screen: QDPAllStatusJobs,
navigationOptions: commonNavigationOptions(),
}，
{
transitionConfig: TransitionConfiguration,
headerMode: 'screen', // 导航栏的显示模式, screen: 有渐变透明效果, float: 无透明效果, none: 隐藏导航栏
}
);
侧栏用DrawerNavigator里嵌套StackNavigator
右边侧栏用的框架
import Drawer from 'react-native-drawer-menu';