Ионные 4 иконки вкладок не отображаются правильно - PullRequest
Новая
       20

Ионные 4 иконки вкладок не отображаются правильно

0 голосов
/ 02 ноября 2018

Недавно я обновил угловую, кордовую и ионную версии, и с тех пор значки вкладок отображаются частично. Скажем, у меня есть 4 вкладки, там показаны первая и третья иконки при загрузке приложения. Затем, если я коснусь одного «невидимого» значка, это означает, что если выбрана вкладка, появится значок. при касании другой вкладки она снова исчезает. Отображаются все названия вкладок.

Любая помощь приветствуется. 

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
 <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"> 
</ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion- 
 tab>
<ion-tab [root]="tab4Root" tabTitle="Impostazioni" tabIcon="settings"></ion- 
tab>


$ ionic --version
4.3.0

$ cordova --version
8.1.2 (cordova-lib@8.1.1)

$ npm --version
5.6.0

"dependencies": {
"@angular/animations": "7.0.2",
"@angular/cli": "^7.0.3",
"@angular/common": "7.0.2",
"@angular/compiler": "7.0.2",
"@angular/compiler-cli": "7.0.2",
"@angular/core": "7.0.2",
"@angular/forms": "7.0.2",
"@angular/http": "7.0.2",
"@angular/platform-browser": "7.0.2",
"@angular/platform-browser-dynamic": "7.0.2",
"@ionic-native/contacts": "^4.15.0",
"@ionic-native/core": "^4.16.0",
"@ionic-native/globalization": "^4.16.0",
"@ionic-native/local-notifications": "^4.15.0",
"@ionic-native/splash-screen": "~4.16.0",
"@ionic-native/sqlite": "^4.16.0",
"@ionic-native/status-bar": "~4.16.0",
"@ionic/storage": "2.2.0",
"@ngx-translate/core": "^11.0.0",
"@ngx-translate/http-loader": "^4.0.0",
"cordova-android": "7.1.1",
"cordova-browser": "5.0.4",
"cordova-plugin-badge": "^0.8.7",
"cordova-plugin-contacts": "^3.0.1",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-globalization": "^1.11.0",
"cordova-plugin-ionic-keyboard": "^2.1.3",
"cordova-plugin-ionic-webview": "^2.2.0",
"cordova-plugin-local-notification": "^0.9.0-beta.2",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"cordova-sqlite-storage": "^2.5.0",
"ionic-angular": "3.9.2",
"ionicons": "4.4.6",
"node-sass": "^4.9.4",
"rxjs": "6.3.3",
"rxjs-compat": "^6.3.3",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.26"
 }

"devDependencies": {
"@ionic/app-scripts": "^3.2.0",
"typescript": "~3.1.5"
 },

 Android device version: 5.1

1 Ответ

0 голосов
/ 03 января 2019

Эта проблема возникает с 18 сентября 2017 года, когда команда Ionic выпустила Ionicons v4 .

enter image description here

  • Но <ion-tab> по-прежнему ведет себя на iOS, когда Ionicon, когда он находится в невыбранном состоянии, добавляет «-Outline» к имени Ionicon. Здесь мы видим добавление «-outline», когда мы щелкаем вдали от значка поиска:

enter image description here

Вместе это приводит к тому, что на невыбранных вкладках появляется исчезающий значок.

Самый простой обходной путь, который я нашел, - это явный запрос на Material Design или серию иконок "md-" . Это означает, что вы не можете использовать собственные иконки iOS, но, по крайней мере, они не исчезнут на вас. 

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="md-home">
  </ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="md-information-circle"> 
  </ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="md-contacts">
  </ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="Impostazioni" tabIcon="md-settings">
  </ion-tab>

Эта проблема также была описана на Ионных форумах .

...