这变成了一个巨大的冒险,随后,一个非常大和混乱的帖子,所以为了让你不必阅读下面我键盘放屁的混乱,这里有一个总结:

主要目标 :找到一种方法,在我的应用程序中有选择地显示导航栏,而不必有选择地移除安全区域填充,以防止我的内容被iphone x缺口剪切。

为什么我这么做 :我想尝试使用导航栏的内置安全区域填充,而不是react native的 <SafeAreaView> 因为 <安全区域视图> 会干扰内置的填充,并导致标题不必要的高。

不按标准方法做的副作用 :页眉之间有一条模糊的线(如图所示 height: 0 )以及当标题和内容都是同一颜色时清晰可见的内容

我试过的 以下内容:

• 使用 <安全区域视图>
• 不使用 <安全区域视图> 并试图 header: null 取而代之(又称“推荐的方法”)

• 播放标题选项,使标题消失而不会导致内容剪辑。作为一种副作用(引自下面延长的帖子)

  我还发现 标题:空 在功能上与 headerTransparent: 'true' 我后来发现 功能上与 display: 'none' .似乎都是 有效的方法使整个标题,安全区域填充和所有, 消失。

• 玩 borderColor 和 borderWidth 以确定它是否是一个边界(事后看来我应该做得更彻底)

• 玩“不透明”
• 同时移动标题和内容 position: 'relative', top: 6
• 在xcode中重新创建问题,看它是否是ios问题(事后:我做错了)

这很清楚地引出了答案,所以我在这里把它切掉,继续我的答案。

冗长,混乱,原始版本

我正在我的react原生项目(用crna创建)中使用react导航,我想我已经找到了一种方式来设计 StackNavigator 这样iOS就可以为你处理安全区域,而不必使用 <安全区域视图> (这干扰了其他屏幕上的标题)。

我的应用程序是这样安排的,第一个屏幕有点像一个主屏幕,有一个网格状的按钮,最后每个按钮都有自己的页面在 堆栈导航器 是的。在这个主屏幕上,我想禁用标题栏,因为没有什么可导航的,它只是向下移动内容,但是,在其他屏幕上,我想让标题栏可见,以显示后退按钮。使用时 <安全区域视图> 我只能得到上面提到的两个选项中的一个,要么主屏幕被iphone x上的凹口剪掉,要么 <安全区域视图> 向下移动其他屏幕上的导航/标题栏并占用空间。

但是,我发现 <安全区域视图> 完全可以使用React Navigation中的标题样式重新创建所需内容:

应用程序js

const Navigation = createStackNavigator({
    Home: HomeScreen,
    Test: PageScreen,
},
{
  headerMode: 'screen',
  navigationOptions: {
    headerStyle: { backgroundColor: colors.background},
    headerTintColor: colors.headerTint,
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  }
});

主屏幕.js

 static navigationOptions = {
    headerStyle: {
        height: 0, 
        backgroundColor: colors.background //had to re-color it here too because otherwise the header would be white???
      },
 };

这很好,因为它可以有效地从主屏幕中删除标题,但仍然保留标题创建的安全区域填充。但是,现在有一条细线将标题与主屏幕内容分开,我不确定如何使其消失。这是唯一一件让我的头欺骗和减损用户体验的事情。

以下是我要说的:

这不会影响我希望标题可见的其他屏幕: 很明显是的,颜色只是掩盖了它…

在使用expo测试应用程序时,这一行也出现在我的iphone 8上,不过由于该设备上的状态栏较小,它还没有下降那么远。

我已经试过改变 headerTintColor 在 navigationOptions 因为我认为在我设置的背景色后面可能有某种背景色,但很明显它控制了文本和后退按钮的颜色。互联网似乎也没有太多关于这一点,从我可以立即告诉作为搜索 header line react-navigation 提出有关隐藏标题、无法隐藏标题以及如何自定义标题的结果。 有人知道这条线是什么吗?还有人知道我是如何删除它的? 否则,怎么做 <安全区域视图> 和一个 堆栈导航器 的导航标题?

编辑 :我已经试过了 header: null, 然而,解决方案是删除应用程序主页上的标题,而不删除其他标题,这会导致 <安全区域视图> 其中 <安全区域视图> 's safe area添加到ios头文件中已经内置的头文件上,导致头文件比应该的要大很多,这就是为什么我选择 高度:0 取而代之的是,因为它使头实际上不可见,但仍然保持它的安全区域。

编辑2 :在玩了 边框颜色 和 边界宽度 在标题中,我确定这一行不是边框…

headerStyle: {
        height: 400,
        backgroundColor: 'green',
        borderColor: 'red',
        borderWidth: 150,
      },

编辑3 :更多发现。在使用css之后,我发现设置 opacity: 0 显示导航栏后面的白色层…也许这比导航条本身稍微大一点?

而且,看起来 标题:空 在功能上与 headerTransparent:'真' 我后来发现,在功能上也和 显示:“无” 是的。所有这些似乎都是使整个标题、安全区域填充和所有内容消失的有效方法。

移动它 位置:“相对”,顶部:6 似乎也解决不了这个问题

编辑4 以下内容: 由于我已经确定这一行实际上不仅仅出现在屏幕上,我将页眉高度设置为0,而是出现在所有屏幕上,所以我认为这是故意内置在ios中的,以便将页眉与页面内容区分开来。

编辑4a 以下内容: 为了证实这一理论,我创建了一个纯本地xcode项目,并试图通过将nav bar和view设置为black来重新创建它,与我的预期相反,这个问题并没有重新创建自己。所以这确实是react native创建的,而不是内置到ios中的 我又被纠正了… How to remove navigation bar border/shadow?