React Navigation / React Native Navigation 多种类型的导航结合使用,构造合理回退栈
React Navigation 更新到版本5已经是非常完善的一套导航管理组件, 提供了Stack , Tab , Drawer 导航方式 , 那么我们应该怎样设计和组合应用他们来构建一个完美的回退栈呢?
1 . 确定APP的整体风格,国外偏好使用Drawer布局, 但到了国内就很少被使用
2. 每个导航也是一个component, 可以作为另外一个导航的一个页面
其他的具体使用参考官网即可
import {createAppContainer} from 'react-navigation'; import {createBottomTabNavigator} from 'react-navigation-tabs'; import * as React from 'react'; import MineTabNavigator from '../screens/Mine/MineTabNavigator'; import DashboardTabNavigator from '../screens/Dashboard/DashboardTabNavigator'; import DeviceTabNavigator from '../screens/Device/DeviceTabNavigator'; import {MaterialTgitopTabNavigator} from '../screens/Organization/OrgTreeScreen'; import {createStackNavigator} from 'react-navigation-stack'; import NotificationTabNavigator from '../screens/Notification/NotificationTabNavigator'; import SplashScreen from '../screens/Splash/SplashScreen'; import LoginScreen from '../screens/Mine/Login/LoginScreen'; import Svg from '../components/Svg/svg';/** * 配置底部标签 */ const Tab = createBottomTabNavigator({ //每一个页面的配置 DashboardScreen: { screen: DashboardTabNavigator, navigationOptions: { //stackNavigator的属性 gestureResponseDistance: {horizontal: 300}, headerBackTitle: null, headerStyle: {backgroundColor: '#FFFFFF'},//导航栏的样式 //tab 的属性 tabBarLabel: '首页', tabBarIcon: ({focused, horizontal, tintColor}) => ( <Svg icon="abb_home_24" color={tintColor}/> ), }, }, NotificationTab: { screen: NotificationTabNavigator, navigationOptions: { //stackNavigator的属性 headerTitle: '通知', gestureResponseDistance: {horizontal: 300}, headerBackTitle: null, headerStyle: {backgroundColor: '#FFFFFF'},//导航栏的样式 headerTitleStyle: { color: '#686868', fontSize: 16, fontFamily: 'ABBvoiceCNSG-Regular', }, //tab 的属性 tabBarLabel: '消息', tabBarIcon: ({focused, horizontal, tintColor}) => ( <Svg icon="abb_alarm-bell_24" color={tintColor}/> ), }, }, MineTab: { screen: MineTabNavigator, navigationOptions: { //stackNavigator的属性 headerTitle: '我的', gestureResponseDistance: {horizontal: 300}, headerBackTitle: null, headerStyle: { backgroundColor: '#FFFFFF', },//导航栏的样式 headerTitleStyle: { color: '#686868', fontSize: 16, fontFamily: 'ABBvoiceCNSG-Regular', height: 48, }, //tab 的属性 tabBarLabel: '我的', tabBarIcon: ({focused, horizontal, tintColor}) => ( <Svg icon="abb_user_24" color={tintColor}/> ), }, }, }, { //设置TabNavigator的位置 tabBarPosition: 'bottom', //是否在更改标签时显示动画 animationEnabled: true, //是否允许在标签之间进行滑动 swipeEnabled: true, //按 back 键是否跳转到第一个Tab(首页), none 为不跳转 backBehavior: 'false', //设置Tab标签的属性 tabBarOptions: { //Android属性 upperCaseLabel: false,//是否使标签大写,默认为true //共有属性 showIcon: true,//是否显示图标,默认关闭 showLabel: true,//是否显示label,默认开启 activeTintColor: '#3366FF',//label和icon的前景色 活跃状态下(选中) inactiveTintColor: '#1F1F1F',//label和icon的前景色 活跃状态下(未选中) style: { //TabNavigator 的背景颜色 backgroundColor: 'white', height: 55, }, indicatorStyle: {//标签指示器的样式对象(选项卡底部的行)。安卓底部会多出一条线,可以将height设置为0来暂时解决这个问题 height: 0, }, labelStyle: {//文字的样式 fontSize: 13, marginTop: -5, marginBottom: 5, }, iconStyle: {//图标的样式 marginBottom: 5, }, }, }); Tab.navigationOptions = ({navigation}) => ({ header: null, }); const RootStack = createStackNavigator( { Splash: SplashScreen, Tab: Tab, Login: LoginScreen, Logout: LogoutScreen, Notification: NotificationScreen, //------------------- }, { initialRouteName: 'Splash', // mode: 'modal', // // 用于设置安卓卡片式跳转 // // transitionConfig: () => ({ // // screenInterpolator: StackViewStyleInterpolator.forHorizontal, // // }), // navigationOptions: () => ({ // gesturesEnabled: true, // }), // // 默认导航头样式设置 // defaultNavigationOptions: { // header: null, // }, headerLayoutPreset: 'center', }, ); export default AppContainer = createAppContainer(RootStack);