Nativescript应用在iOS模拟器中不显示顶部导航栏如何解决

1. 适配iOS 15+导航栏默认透明特性 #

iOS 15及以上版本系统默认开启了导航栏滚动边缘透明效果，当页面根容器为滚动组件（ScrollView、ListView等）且内容未顶到导航栏下方区域时，导航栏会变为全透明状态，仅保留交互能力。如果你的真机iOS版本低于15、模拟器版本高于15，就会出现两端显示不一致的问题。
在项目入口文件（app.ts/main.ts/app.js）添加全局导航栏配置即可解决：

import { isIOS, Application } from '@nativescript/core'

if (isIOS) {
  Application.on(Application.launchEvent, () => {
    const navBarAppearance = UINavigationBar.appearance()
    // 统一滚动状态和普通状态的导航栏外观
    if (navBarAppearance.scrollEdgeAppearance) {
      navBarAppearance.scrollEdgeAppearance = navBarAppearance.standardAppearance
    }
  })
}

2. 检查页面ActionBar配置 #

确认对应页面没有误配置ActionBar的隐藏属性或者异常样式，可以在页面布局中主动指定ActionBar的基础属性强制显示：

<!-- NativeScript XML布局示例 -->
<Page>
  <ActionBar 
    title="你的页面标题" 
    backgroundColor="#ffffff" 
    color="#000000" 
    visibility="visible"
  >
    <NavigationButton text="返回" />
  </ActionBar>
  <!-- 页面其余内容 -->
</Page>

3. 排查模拟器显示设置 #

• 确认模拟器缩放比例正常：点击顶部菜单栏 窗口 -> 缩放，选择100%比例查看是否恢复显示
• 确认模拟器运行的iOS系统版本和测试真机版本一致，避免系统特性差异

4. 清理缓存重新构建 #

如果以上配置都无异常，执行以下命令清理项目缓存后重新运行即可：

ns clean
ns run ios --emulator

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