如何在反应导航中使导航栏（标题）的颜色与正文相同？

Question

我是React Native的新手，我想知道是否有一种方法可以使导航栏的背景颜色与主体的背景颜色相同？

我知道以下通过硬编码值来更改背景颜色的方法，但是有没有一种方法可以访问主体的背景颜色，然后将导航标题的背景颜色设置为该颜色？

defaultNavigationOptions: {
title: 'Home',
headerStyle: {
  backgroundColor: 'white', // don't want to hardcode a value
}, ... 

即。在backgroundColor设置中，而不是'white'，我一般如何将其替换为容器/应用程序的backgroundColor？在下面的图片中，我希望白色标头与蓝色相同（无需硬编码蓝色的值，因为在我的应用中，主体的颜色根据天气等而改变）。

（在我应用的其他部分，我通过执行以下操作来动态更改背景颜色：）

... backgroundColor: weather[this.state.weather].backgroundColor

不幸的是，当我在defaultNavigationOptions中尝试使用此功能时

Answer 1

我有类似的问题。我要做的是摆脱反应导航的顶部栏。将此放在构造函数之后：

  static navigationOptions = {
    header: null
  };

然后，我在顶部栏添加了自己的组件，可以轻松控制其颜色。只需查看即可，就是这么简单！剩下的是状态栏（较小的空间保持时间，电池寿命等）。您可以将其作为组件提及（记住要先导入），或者在导入后直接调用set color方法。我的操作方式：

<StatusBar  backgroundColor="#7e7e7e" barStyle="light-content" />

但这也是可能的：|

StatusBar.setBackgroundColor('#009ddc')
StatusBar.setBarStyle('light-content', true)