React Native常用第三方框架之导航react-navi

(三).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 (
<ScrollView>
<View>
<View style={{backgroundColor: '#ffff' }}>
<TouchableOpacity
onPress={() => {
props.navigation.navigate('MinePage');
}}>
<Text style={styles.titleMsg}>个人照片</Text>
<Image source={require('./../icons/one.png')} style={styles.img}/>
</TouchableOpacity>
</View>
<DrawerItems {...props} />
</View>
</ScrollView>
)
},
},
);

双侧栏的架构

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 (
<View style={styles.container1}>
<ListItem/>
<DrawerItems {...props} />
<Button
containerStyle={styles.containerButtonStyle}
style={{fontSize: px2dp(20), color: 'white'}}
onPress={
}>
LOGOUT
</Button>
<View style={styles.versionContainer}>
<Text style={styles.version}>1.0.1</Text>
</View>
</View>
)
},
},
);

const HomePageStack = StackNavigator({
TabHomePage: {
screen: QDPAllStatusJobs,
navigationOptions: commonNavigationOptions(),
}，

{
transitionConfig: TransitionConfiguration,
headerMode: 'screen', // 导航栏的显示模式, screen: 有渐变透明效果, float: 无透明效果, none: 隐藏导航栏
}
);

侧栏用DrawerNavigator里嵌套StackNavigator
右边侧栏用的框架

import Drawer from 'react-native-drawer-menu';