解决用ionic创建Android项目时tabs默认在上面的问题

亦凉 2022-09-26 15:55 82阅读 0赞

用Ionic创建的工程项目，IOS的tabs默认是在底部，而Android的是默认在顶部，为了解决这个问题，在网上也找了好多资料，最终解决了这个问题。就是在app.js的config里面加一段代码,如下：

app.js配置文件：

// Ionic Starter App
    
    // angular.module is a global place for creating, registering and retrieving Angular modules
    // 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
    // the 2nd parameter is an array of 'requires'
    // 'starter.services' is found in services.js
    // 'starter.controllers' is found in controllers.js
    angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
    
        .config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {
    
          $ionicConfigProvider.platform.ios.tabs.style('standard');
          $ionicConfigProvider.platform.ios.tabs.position('bottom');
          $ionicConfigProvider.platform.android.tabs.style('standard');
          $ionicConfigProvider.platform.android.tabs.position('standard');
    
          $ionicConfigProvider.platform.ios.navBar.alignTitle('center');
          $ionicConfigProvider.platform.android.navBar.alignTitle('left');
    
          $ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');
          $ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back');
    
          $ionicConfigProvider.platform.ios.views.transition('ios');
          $ionicConfigProvider.platform.android.views.transition('android');
    
    
          // Ionic uses AngularUI Router which uses the concept of states
          // Learn more here: https://github.com/angular-ui/ui-router
          // Set up the various states which the app can be in.
          // Each state's controller can be found in controllers.js
          $stateProvider
    
            // setup an abstract state for the tabs directive
              .state('tab', {
                url: "/tab",
                abstract: true,
                templateUrl: "templates/tabs.html"
              })
    
            // Each tab has its own nav history stack:
    
              .state('tab.dash', {
                url: '/dash',
                views: {
                  'tab-dash': {
                    templateUrl: 'templates/tab-dash.html',
                    controller: 'DashCtrl'
                  }
                }
              })
    
              .state('tab.chats', {
                url: '/chats',
                views: {
                  'tab-chats': {
                    templateUrl: 'templates/tab-chats.html',
                    controller: 'ChatsCtrl'
                  }
                }
              })
              .state('tab.chat-detail', {
                url: '/chats/:chatId',
                views: {
                  'tab-chats': {
                    templateUrl: 'templates/chat-detail.html',
                    controller: 'ChatDetailCtrl'
                  }
                }
              })
    
              .state('tab.account', {
                url: '/account',
                views: {
                  'tab-account': {
                    templateUrl: 'templates/tab-account.html',
                    controller: 'AccountCtrl'
                  }
                }
              });
    
          // if none of the above states are matched, use this as the fallback
          $urlRouterProvider.otherwise('/tab/dash');
    
        });