使用PushModalAsync时iOS页面透明背景显示黑色的原因咨询

场景描述 #

我需要在顶部内容页中查看底层页面内容，因此使用PushModalAsync进行导航，并将导航页的BackgroundColor设为Transparent。Android平台下能正常看到底层页面，但iOS平台始终显示黑色背景，无法看到底层内容。另外，若将导航方式改为PushAsync，iOS平台会显示白屏。

预期行为 #

使用PushModalAsync导航时，背景应为透明，能看到底层页面

实际行为 #

使用PushModalAsync导航时，即便设置内容页背景为透明，iOS平台仍始终显示黑色背景

截图对比 #

• Android效果：
  
• iOS效果：
  

问题复现示例 #

可通过DemoSample复现该问题

这是因为iOS的模态导航控制器默认会添加不透明的背景视图，仅设置Xamarin.Forms页面的透明背景无法覆盖原生层的设置，需要针对iOS平台做自定义处理：

1. 创建iOS自定义导航页渲染器
   在iOS项目中添加如下代码：

using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(NavigationPage), typeof(TransparentNavigationRenderer))]
namespace YourAppNamespace.iOS.Renderers
{
    public class TransparentNavigationRenderer : NavigationRenderer
    {
        public override void ViewDidLoad()
        {
            base.ViewDidLoad();
            // 移除模态默认背景相关设置
            if (PresentationController != null)
            {
                PresentationController.DismissTransitioningDelegate = null;
            }
            // 设置导航栏透明（不需要导航栏可跳过）
            NavigationBar.BackgroundColor = UIColor.Clear;
            NavigationBar.ShadowImage = new UIImage();
            NavigationBar.Translucent = true;
        }

        public override void ViewWillAppear(bool animated)
        {
            base.ViewWillAppear(animated);
            // 设置模态视图背景透明
            if (View != null)
            {
                View.BackgroundColor = UIColor.Clear;
            }
        }
    }
}

2. 调整模态导航调用逻辑
   调用PushModalAsync时，确保页面背景设置正确，并指定iOS模态样式：

var modalPage = new NavigationPage(new YourTransparentPage())
{
    BackgroundColor = Color.Transparent
};

if (Device.RuntimePlatform == Device.iOS)
{
    modalPage.ModalPresentationStyle = UIModalPresentationStyle.FullScreen;
    modalPage.ModalTransitionStyle = UIModalTransitionStyle.CrossDissolve;
}

await Navigation.PushModalAsync(modalPage);

3. 额外注意事项

• 确保你的内容页（YourTransparentPage）的BackgroundColor也设置为Color.Transparent
• 不需要导航栏的话，可在导航页中添加属性NavigationPage.HasNavigationBar="False"
• 避免在模态页面中添加不透明的布局容器，确保所有层级背景均为透明

另外，PushAsync显示白屏的问题，本质是iOS导航栈默认页面背景为白色，同样需要针对导航页或内容页设置透明背景，并配合自定义渲染器调整原生层背景设置。

内容的提问来源于stack exchange，提问作者T.Eswaran