这变成了一次大规模的冒险，随后又变成了一个非常大而凌乱的帖子，因此，为了使您不必阅读下面我键盘发keyboard的混乱情况，以下为摘要：

主要目标：寻找一种在我的应用程序中有选择地显示导航栏的方法，而不必也有选择地删除“安全”区域填充以防止我的内容被iPhone X槽口夹住。

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

不按标准方式进行操作的副作用：标头（与一起显示在图片中height: 0）和内容之间存在一条细线，当标头和内容颜色相同时，该行清晰可见

我试了一下：

• 使用 <SafeAreaView>
• 不使用而是<SafeAreaView>尝试header: null（也称为“推荐的方法”）

• 使用标题选项可以使标题消失而不会导致剪切的内容。作为副作用（引自下面的扩展帖子）

  我还发现header: null在功能上与headerTransparent: 'true'后来发现的结果相同，在 功能上也与相同display: 'none'。所有这些似乎都是使整个标头，安全区域填充等全部消失的有效方法。

• 使用borderColor和borderWidth确定是否是边界（事后看来，我应该更彻底地做到这一点）

• 玩“不透明”
• 使用来同时移动标题和内容 position: 'relative', top: 6
• 在Xcode中重新创建该问题以查看是否为iOS问题（后见之明：我做错了此事）

这很清楚地将答案引向了答案，因此我将在此处将其截断并在答案中继续进行。

冗长而令人困惑的原始版本

我在我的react-native项目（使用CRNA创建）中使用了react-navigation，我想我已经找到了一种样式化标头的方法，StackNavigator以便iOS为您照顾安全区域，并消除了使用<SafeAreaView>（这会干扰其他屏幕上的标题）。

我的应用程序的排列方式是，第一个屏幕有点像主屏幕，带有一个网格的按钮，最终每个按钮在都有自己的页面StackNavigator。在此主屏幕上，我想禁用标题栏，因为没有导航到的内容，它只是将内容向下移动，但是，在其他屏幕上，我希望显示标题栏以显示后退按钮。使用时，<SafeAreaView>我只能得到上面提到的两个之一，或者主屏幕被iPhone X上的缺口剪断了，或者<SafeAreaView>向下移动了其他屏幕上的导航/标题栏并占用了空间。

但是，我发现通过<SafeAreaView>完全放弃，我可以使用react-navigation中的标头样式重新创建我想要的内容：

App.js

const Navigation = createStackNavigator({
    Home: HomeScreen,
    Test: PageScreen,
},
{
  headerMode: 'screen', …

我正在使用React Navigation在ReactNative中构建基于标签栏的应用程序类型.

• "本土反应":"0.44.0",
• "react-navigation":"^ 1.0.0-beta.9",

我把导航部分固定下来并正常工作.但是关于样式,我在标签栏内的StackNavigator(导航控制器)上看到一个阴影.请参考下图.

我不习惯在本机iOS应用程序上看到这种影子(我是一个尝试RN的iOS移动开发者)

经过进一步调查,我发现在ReactNavigation 中'Card.js'中指定了' shadow'属性.所以我设法解决了该问题在一些更重要的传球cardStyle像这样

cardStyle:{shadowColor:'transparent'}

综上所述,我有两个问题

问题1 为什么这是默认的行为/样式？

为了调试这个问题,我决定在Xcode中快速查看调试,发现'shadow'没有显示在那里.

问题2 为什么会发生这种情况？由于RN应用程序本质上是一个本机应用程序(在本例中为原生iOS),是不是查看调试调试这些视图相关问题的可靠方法？