La barre d'onglets ionique recouvre le bouton principal (iPhone X - iOS 11)
Avec iOS 11 et iPhone X - Apple spécifiée chaque application doit vivre dans une "zone sécurisée" (grâce au bouton d'accueil virtuel):
Insère le contenu essentiel pour éviter les coupures. [...] Pour de meilleurs résultats, utilisez des éléments d'interface standard fournis par le système et la disposition automatique pour construire votre interface. Toutes les applications doivent respecter les marges de la zone de sécurité et de la présentation définies par UIKit, qui garantissent un insertion efficace en fonction du périphérique et du contexte. La zone de sécurité empêche également le contenu de se superposer à la barre d'état, à la barre de navigation, à la barre d'outils et à la barre d'onglets.
Le problème est une application ionique (v. 1) avec une barre de tabulation couvrant cette partie de l'écran. La barre se trouve donc sous le bouton d'accueil:
Est-ce que quelqu'un sait comment résoudre ce problème?
(Remarque: si vous exécutez une nouvelle application Ionic v1 dans le simulateur iPhone X, vous obtiendrez deux espaces noirs, en haut et en bas de la fenêtre, mais vous pouvez empêcher l'ajout de "viewport-fit = cover" à votre balise méta à l'intérieur index.html)
Pour un projet Ionic1, j'ai découvert que cibler l'onglet de navigation permettait de résoudre le problème.
.tab-nav {
margin-bottom: constant(safe-area-inset-bottom);
}
Vous devriez pouvoir appliquer le même principe que décrit dans cette réponse au pied de page Ionic v1, c.-à-d.
.bar-footer {
margin-bottom: constant(safe-area-inset-bottom);
}
(ou quelque chose de similaire - je n'ai pas testé cela)
Vous pouvez ajouter une contrainte à la vue principale de votre tabBar personnalisée pour la connecter à la partie inférieure safeAreaLayoutGuide.
yourView.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor).isActive = true