iOS端NativeScript中DockLayout子元素Tap事件失效问题求助

问题场景 #

在NativeScript项目首页使用DockLayout布局，底部停靠FlexboxLayout作为导航栏，剩余区域放置page-router-outlet。Android端所有Tap事件（parentTap、childTap、navigate）均正常触发，但iOS端仅DockLayout的parentTap有效，FlexboxLayout及其子元素的Tap事件完全无响应。更换为GridLayout时iOS端无此问题。

解决方案 #

以下几种方案可解决该问题：

方案1：调整DockLayout属性并给路由出口设置底部边距

将DockLayout的stretchLastChild设为true，同时给page-router-outlet添加与底部导航栏高度一致的底部边距，避免导航栏被路由出口覆盖：

<DockLayout stretchLastChild="true"    
 (tap)="parentTap($event)"    
  class="dock-layout">        
  
      <FlexboxLayout  (tap)="childTap($event)"  
      dock="bottom" class="bottom-nav" height="75">      
             
              <FlexboxLayout   height="75"           
                  (tap)="navigate(item)"             
                *ngFor="let item of bottomNavList;let i=index"            
                 [class.active-tab]="currentTab==item.label"            
                  class="tab-item">         
  
                         <Label text="icon" textWrap="true"></Label>                
                         <Label text="text" textWrap="true"></Label>     
   
                 </FlexboxLayout>        

     </FlexboxLayout>                

    <page-router-outlet style="margin-bottom:75"></page-router-outlet>
</DockLayout>

方案2：强制开启iOS端FlexboxLayout的交互能力

给底部的FlexboxLayout添加ios:isUserInteractionEnabled="true"属性，强制iOS系统允许该视图接收触摸事件：

<FlexboxLayout  (tap)="childTap($event)"  
      dock="bottom" class="bottom-nav" ios:isUserInteractionEnabled="true">

方案3：替换DockLayout为GridLayout

如果布局逻辑允许，直接使用GridLayout构建页面结构（已验证该方案有效），GridLayout的行高分配更明确，不会出现iOS端的触摸事件拦截问题：

<GridLayout rows="*, auto" (tap)="parentTap($event)" class="dock-layout">
    <page-router-outlet row="0"></page-router-outlet>
    <FlexboxLayout row="1" (tap)="childTap($event)" class="bottom-nav">
        <FlexboxLayout height="75" (tap)="navigate(item)" *ngFor="let item of bottomNavList;let i=index" [class.active-tab]="currentTab==item.label" class="tab-item">
            <Label text="icon" textWrap="true"></Label>                
            <Label text="text" textWrap="true"></Label>     
        </FlexboxLayout>
    </FlexboxLayout>
</GridLayout>

问题原因 #

iOS与Android的触摸事件传递机制存在差异：当DockLayout设置stretchLastChild="false"时，page-router-outlet作为最后一个子元素，会在视觉层级上覆盖底部的FlexboxLayout区域，导致触摸事件被路由出口拦截，无法传递到下层的FlexboxLayout及其子元素。而GridLayout通过明确的行高分配，能避免这种层级覆盖问题。

内容的提问来源于stack exchange，提问作者Kamil Kafoor