DrawerNavigator嵌套stackNavigator嵌套BottomTabNavigator,实现侧滑栏包含tab导航栏并可跳转其他路由页面.
最外层DrawerNavigation部分主要代码:
const CustomDrawerContentComponent = (props) => (
);
class CustomDrawerComponent extends React.Component{
constructor(props) {
super(props)
this.state={
mZIndex:0
}
}
onScroll(e){
let scrollY = e.nativeEvent.contentOffset.y;//滑动的偏移量,
console.log(scrollY)
if(scrollY > 130 && this.state.mZIndex!= 9){
this.setState({
mZIndex:9
})
return
}
if(scrollY <= 130 && this.state.mZIndex != 0) {
this.setState({
mZIndex:0
})
}
}
render(){
return (
this.onScroll(e)
}}>
> { } {/*
)
}
}
//this.props.navigation.openDrawer();//打开抽屉
//this.props.navigation.closeDrawer();//关闭抽屉
const MyDrawerNavigator = createDrawerNavigator({
Main: {
screen: Stack
},
Set: {
screen: Setting
},
}, {
order: ['Main','Set' ],//routeNames数组，用于定义抽屉项目的顺序。
initialRouteName: 'Main',//初始路由的routeName。
drawerLockMode:'unlocked', //here
// drawerLockMode: 'unlocked',//设置是否响应手势
//允许使用返回手势
gesturesEnabled: true,
//'unlocked' 可以通过手势和代码 打开关闭抽屉
//'locked-closed' 抽屉关闭状态 不能通过手势打开 只能通过代码实现
//'locked-open' 抽屉打开状态 不能通过手势关闭 只能通过代码实现
drawerWidth: 300, //抽屉的宽度或返回的功能。
drawerPosition: 'left', //选项是left或right。默认是left位置。
useNativeAnimations: false, //启用原生动画。默认是true。
drawerBackgroundColor: 'white', //使用抽屉背景获取某种颜色。默认是white。
//用于呈现抽屉内容的组件，例如导航项。收到navigation抽屉的道具。默认为DrawerItems
//用于自定义
//contentComponent: '',
contentComponent: CustomDrawerContentComponent,
//配置抽屉内容 /*********************************************************************************items相关************************************/
contentOptions: {
activeTintColor: '#FB7299', //活动标签的标签和图标颜色
activeBackgroundColor: '#E9E9E9', //活动标签的背景颜色
inactiveTintColor: '#7F7F7F', //非活动标签的标签和图标颜色
inactiveBackgroundColor: 'white', //非活动标签的背景颜色
itemsContainerStyle: {
width: '100%',
},
itemStyle: {
// width:'100%',
}
}
})
export default MyDrawerNavigator;
Stack部分:
import Reactfrom 'react'
import {createStackNavigator} from 'react-navigation'
import Register from "./pages/register/Register";
import AccountLogin from "./pages/login/AccountLogin";
import SmsLogin from "./pages/login/SmsLogin";
import RegisterNext from "./pages/register/RegisterNext";
import FindPasswordScreen from "./pages/password/FindPasswordScreen";
import TermsScreen from "./pages/register/TermsScreen";
import ResetPasswordScreen from "./pages/password/ResetPasswordScreen";
import TabNavigatorfrom "./TabNavigator";
export default Stack = createStackNavigator({
Home:{
screen:TabNavigator,
navigationOptions: {
header: null,
}
},
AccountRegister: {
// screen: RegisterScreen,
screen: Register,
navigationOptions: {
header: null
}
},
AccountLogin: {
screen: AccountLogin,
navigationOptions: {
header: null,
drawerLockMode:'unlocked', //here
}
},
SmsLogin: {
screen: SmsLogin,
navigationOptions: {
header: null
}
},
AccountRegisterNext: {
screen: RegisterNext,
navigationOptions: {
header: null
}
},
FindPassword: {
screen: FindPasswordScreen,
navigationOptions: {
header: null
}
},
TermsScreen: {
screen: TermsScreen,
navigationOptions: {
header: null
}
},
ResetPassword: {
screen: ResetPasswordScreen,
navigationOptions: {
header: null
}
},
},{ drawerLockMode:'unlocked', //here
})
BottomTabNavigator部分:
export default MainTab = createBottomTabNavigator({
Home: {
screen: Home,
navigationOptions: ({navigation, screeProps}) => ({
//这里设置StackNavigator属性和一般情况下Tabbar不同页面可能会不同的属性
//设置StackNavigator属性
header: null,
headerTitle: '首页',
headerStyle: styles.navigator,
headerTitleStyle: styles.navigatorTitle,
gesturesEnabled: true,
drawerLockMode: 'unlocked',
//这里设置Tabbar不同页面可能会不同的属性
tabBarVisible: true,
tabBarLabel: '首页',
tabBarIcon: (({tintColor, focused}) => {
return (
source={focused? MainTabSelectedIcon : MainTabUnSelectedIcon} style={styles.tabbarImage} /> ) }), }) }, Video: { screen: Video, navigationOptions: ({navigation, screeProps}) => ({ //这里设置StackNavigator属性和一般情况下Tabbar不同页面可能会不同的属性 //设置StackNavigator属性 header: null, headerTitle: '视频', headerStyle: styles.navigator, headerTitleStyle: styles.navigatorTitle, gesturesEnabled: true, //这里设置Tabbar不同页面可能会不同的属性 tabBarVisible: true, tabBarLabel: '视频', tabBarIcon: (({tintColor, focused}) => { return ( source={focused? VideoTabSelectedIcon : VideoTabUnSelectedIcon} style={styles.tabbarImage} /> ) }), }) }, SmallVideo: { screen: SmallVideo, navigationOptions: ({navigation, screeProps}) => ({ //这里设置StackNavigator属性和一般情况下Tabbar不同页面可能会不同的属性 //设置StackNavigator属性 header: null, headerTitle: '小视频', headerStyle: styles.navigator, headerTitleStyle: styles.navigatorTitle, gesturesEnabled: true, //这里设置Tabbar不同页面可能会不同的属性 tabBarVisible: true, tabBarLabel: '小视频', tabBarIcon: (({tintColor, focused}) => { return ( source={focused? SmallVideoTabSelectedIcon : SmallVideoTabUnSelectedIcon} style={styles.tabbarImage} /> ) }), }) }, QA: { screen: QA, navigationOptions: ({navigation, screeProps}) => ({ //这里设置StackNavigator属性和一般情况下Tabbar不同页面可能会不同的属性 //设置StackNavigator属性 header: null, headerTitle: '问答', headerStyle: styles.navigator, headerTitleStyle: styles.navigatorTitle, gesturesEnabled: true, //这里设置Tabbar不同页面可能会不同的属性 tabBarVisible: true, tabBarLabel: '问答', tabBarIcon: (({tintColor, focused}) => { return ( source={focused? QATabSelectedIcon : QATabUnSelectedIcon} style={styles.tabbarImage} /> ) }), }) } }, { //这里设置的是一般情况下Tabbar共同的属性 tabBarPosition: 'bottom', // 设置tabbar的位置，iOS默认在底部，安卓默认在顶部。（属性值：'top'，'bottom') swipeEnabled: true, // 是否允许在标签之间进行滑动。 animationEnabled: false, // 是否在更改标签时显示动画。 lazy: true, // 是否根据需要懒惰呈现标签，而不是提前制作，意思是在app打开的时候将底部标签栏全部加载，默认false,推荐改成true哦。 initialRouteName: '', // 设置默认的页面组件 backBehavior: 'none', // 按 back 键是否跳转到第一个Tab(首页)， none 为不跳转 tabBarOptions: { activeTintColor: '#d81e06', // label和icon的前景色 活跃状态下（选中）。 inactiveTintColor: '#515151', // label和icon的前景色 不活跃状态下(未选中)。 labelStyle: { fontSize: 12, }, //label的样式。 } })