DrawerNavigator嵌套stackNavigator嵌套BottomTabNavigator,实现侧滑栏包含tab导航栏并可跳转其他路由页面.
最外层DrawerNavigation部分主要代码:
const CustomDrawerContentComponent = (props) => (
<CustomDrawerComponent mProps = {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 (<SafeAreaView style={{flex: 1}}>
<View style={{position:'absolute',zIndex:this.state.mZIndex,width:'100%',height:50,backgroundColor:'orange'}}></View>
<ScrollView onScroll={(e)=>{
this.onScroll(e)
}}>
<SafeAreaView style={styles.container} forceInset={{top: 'always', horizontal: 'never'}}
>
<View style={{width: '100%', height: 180, backgroundColor: '#FB7298'}}>
<View style={styles.horizontalHeader}>
<Image style={styles.iconHeader} source={require('./image/icon_head.jpg')}/>
<Image style={styles.headerRight} source={require('./image/scan.png')}/>
</View>
<View style={styles.horizontalNick}>
<Text style={styles.nickName}>ashlgs</Text>
<Text style={styles.level}>lv3</Text>
<Text style={styles.prince}>正式会员</Text>
</View>
</View>
{
}
<DrawerItems {...this.props.mProps} />
<DrawerItems {...this.props.mProps} />
<DrawerItems {...this.props.mProps} />
<DrawerItems {...this.props.mProps} />
<DrawerItems {...this.props.mProps} />
<DrawerItems {...this.props.mProps} />
<DrawerItems {...this.props.mProps} />
<DrawerItems {...this.props.mProps} />
<DrawerItems {...this.props.mProps} />
<DrawerItems {...this.props.mProps} />
<DrawerItems {...this.props.mProps} />
<DrawerItems {...this.props.mProps} />
{/*
<DrawerItems {...props} />*/}
</SafeAreaView>
</ScrollView>
<View style={styles.bottomContainer}>
<View style={styles.bottomItemContainer}>
<Image style={styles.bottomIcon} source={require('./image/setting.png')}/>
<Text> 设置</Text>
</View>
<View style={styles.bottomItemContainer}>
<Image style={styles.bottomIcon} source={require('./image/main_title.png')}/>
<Text> 主题</Text>
</View>
<View style={styles.bottomItemContainer}>
<Image style={styles.bottomIcon} source={require('./image/night.png')}/>
<Text> 夜间</Text>
</View>
</View>
</SafeAreaView>
)
}
}
//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 (
<Image
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 (
<Image
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 (
<Image
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 (
<Image
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的样式。
}
})
网友评论