react-navigation标题有一条淡淡的线

Question

这变成了一次大规模的冒险，随后又变成了一个非常大而凌乱的帖子，因此，为了使您不必阅读下面我键盘发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',
  navigationOptions: {
    headerStyle: { backgroundColor: colors.background},
    headerTintColor: colors.headerTint,
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  }
});

HomeScreen.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结果提供有关隐藏标题，无法隐藏标题以及如何自定义标题的结果。有谁知道这是什么线以及我如何删除它？还是失败了，如何使的导航标题更<SafeAreaView>美观StackNavigator？

编辑：我也已经尝试过该header: null,解决方案，但是，通过删除应用程序首页上的标头，没有其他会导致怪异的副作用，<SafeAreaView>其中<SafeAreaView>的安全区域添加到已经内置于iOS标头中的区域中，标头要比它应该的要大得多，这就是为什么我选择去height: 0标头的原因，因为它使标头有效地不可见，但仍保持其安全区域。

编辑2：在使用borderColor和borderWidth的标题之后，我确定这条线不是边框...

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

编辑3：更多发现。使用CSS后，我发现设置opacity: 0导航栏后会显示一个白色层……也许比导航栏本身稍大？

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

转移它position: 'relative', top: 6似乎也不能解决问题

编辑4：由于我已经确定这行实际上并不只是出现在我将标题高度设置为0的屏幕上，而是出现在所有屏幕上，所以我认为这是有意内置到iOS中的东西区分页眉和页面内容。

编辑4a：为了证实这一理论，我创建了一个纯本机的xcode项目，并尝试通过将导航栏和视图设置为黑色来重新创建该项目，与我的预期相反，该问题并未重新创建。所以这确实是由react-native而非iOS内置的东西我再次站好了... 如何删除导航栏的边框/阴影？

Answer 1

在问题开始时从总结继续...

一旦我意识到我的Xcode测试存在缺陷，便开始在StackOverflow上搜索仅适用于iOS的帖子，并出现以下问题：

• 如何删除导航栏边框/阴影？
• 如何隐藏UINavigationBar 1px底线

由于这些都是iOS本机解决方案，所以我才开始寻找方法来重新创建它们。然后，这导致我寻找相同的iOS唯一问题，但是找到解决方案时却带有react关键字：

如何在反应导航标题下隐藏阴影？

虽然这个问题似乎是针对android的，但答案也提到了iOS：

elevation: 0, // remove shadow on Android shadowOpacity: 0, // remove shadow on iOS

资料来源：https : //stackoverflow.com/a/42709731

我试过了 它没有工作。

然后再进一步回答：

headerStyle: { elevation: 0, shadowOpacity: 0, borderBottomWidth: 0, }

尝试了一下：奏效了。

TL; DR

如果您想在使用StackNavigator现代版本的react native 时隐藏标题，而不必使用a <SafeAreaView>，请createStackNavigator({...})在Screen类的内部或内部使用以下代码static navigationOptions = {...}：

headerStyle: {
        backgroundColor: colors.background,
        borderBottomWidth: 0,
        height: 0,
    },

Answer 2

在导航 v5 中，在您的堆栈屏幕中添加您的选项对象：

 <Stack.Screen
      name="Whatever"
      component={SomeScreen}
      options={{
        title: "Whatever",
        headerTitleStyle: { fontSize: 22, color: "#fff" },
        headerStyle: { shadowColor: "transparent" } // This is the important bit
    }}
    // whatever else you need in the screen header
  />

Answer 3

UPDATE V6:

since released React Navigation V6, you can't hide header shadow using headerStyle option. instead of that you can use bolean option headerShadowVisible and set it to be false like example bellow:

<Stack.Screen
      name="Example"
      component={ExampleComponent}
      options={{headerShadowVisible: false}}
    />