Ionic thanh tab chồng chéo nút home (iPhone X - iOS 11)

Question

Với iOS 11 và iPhone X Apple specified mọi ứng dụng nên sống trong một "khu vực an toàn" (do nút home ảo):

Inset nội dung cần thiết để tránh cắt. [...] Để có kết quả tốt nhất, hãy sử dụng các phần tử giao diện tiêu chuẩn, do hệ thống cung cấp và Bố cục tự động để xây dựng giao diện của bạn. Tất cả các ứng dụng phải tuân thủ các khu vực an toàn và lề bố trí được xác định bởi UIKit, đảm bảo việc chèn phù hợp dựa trên thiết bị và ngữ cảnh. Khu vực an toàn cũng ngăn không cho nội dung bị gạch dưới thanh trạng thái, thanh điều hướng, thanh công cụ và thanh tab.

Vấn đề là một ứng dụng Ionic (v 1.) Với nắp thanh tab phần này của màn hình, do đó thanh nằm dưới nút home:

Có ai biết làm thế nào để sửa nó?

(xin lưu ý: nếu bạn chạy ứng dụng Ionic v1 mới trong trình mô phỏng iPhone X, bạn sẽ nhận được hai khoảng trắng, ở đầu và cuối cửa sổ, nhưng bạn có thể ngăn điều này thêm "viewport-fit = cover" vào thẻ meta của bạn bên trong index.html)

Answer 1

Đối với dự án Ionic1, tôi thấy rằng nhắm mục tiêu tab-nav đã thực hiện thủ thuật.

.tab-nav { 
    margin-bottom: constant(safe-area-inset-bottom); 
} 

Answer 2

bạn sẽ có thể áp dụng cùng một nguyên tắc được nêu trong this answer đến v1 chân Ionic, tức là

.bar-footer { 
    margin-bottom: constant(safe-area-inset-bottom); 
} 

(hoặc một cái gì đó tương tự - tôi đã không kiểm tra này)

Answer 3

Bạn có thể thêm ràng buộc o chế độ xem chính tabBar tùy chỉnh của bạn để kết nối nó với safeAreaLayoutGuide dưới cùng.

yourView.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor).isActive = true