Ионный заголовок с ионами позади строки состояния ios

Как избежать того, чтобы ионный заголовок не заходил за панель состояния ios?

Заголовок появляется из этого кода:

<ion-view title="{{title}}" hide-nav-bar="false">

Ответ 1

Наконец, проблема решена.

в app.js

$ionicPlatform.ready(function() {
  if (window.cordova && $cordovaKeyboard) {
    $cordovaKeyboard.hideAccessoryBar(true);
  }
  if (window.StatusBar) {
    StatusBar.styleDefault();
  }
}

и, если это еще не решает проблему. В index.html, cordova.js должен быть импортирован в последний раз.

<head>
    ...

    <script src="cordova.js"></script>
</head>

Это решает мою проблему.

Ответ 2

От: http://www.sitepoint.com/5-ionic-app-development-tips-tricks/

Ionic имеет специфические классы для решения этой проблемы - платформы-ios и платформы-кордовы. Предварительно созданные элементы Ionics нацеливают эти классы и добавляют верхнюю границу 20px к кнопкам в вашем заголовке, чтобы компенсировать эти ситуации. Чтобы мои собственные пользовательские элементы делали то же самое, я придерживаюсь одного и того же шаблона. Для моего .search-bar выше я добавляю маржу, если у нас есть класс body.platform-ios.platform-cordova: not (.fullscreen). Пример:

.platform-ios.platform-cordova:not(.fullscreen) .search-bar {
     margin-top: 20px;
}

Это должен быть правильный ответ.

Ответ 3

Решение с StatusBar.styleDefault(); не работает для меня, но вызов StatusBar.overlaysWebView(false) выполнил задание.

Первый снимок экрана - это пользовательский интерфейс приложения перед вызовом StatusBar.overlaysWebView(false), вы можете видеть, что строка состояния iOS находится над приложением, и пользователь не может щелкнуть по всей области кнопки меню:

Теперь, когда я вызываю StatusBar.overlaysWebView(false), строка состояния iOS больше не находится над кнопкой меню:

Ответ 4

Я давно застрял в одной и той же проблеме, и ни один из вышеперечисленных решений не работал у меня. И, наконец, чтобы строка состояния перекрывалась в представлении приложения, я добавил следующий preference в мой config.xml файл и альт:

  <preference name="StatusBarOverlaysWebView" value="false" />
  <preference name="StatusBarBackgroundColor" value="#000000" />
  <preference name="StatusBarStyle" value="lightcontent" />

Для этого требуется плагин: cordova-plugin-statusbar "StatusBar".

Надеюсь, что это поможет.

Ответ 5

Этот код работает для меня с ионным 3 (3.7.1) Откройте App.scss в папке app, затем добавьте этот код:

.platform-ios 
{
  page-home { // replaced by your page HERE
     top: 20px !important;
  }
}