Как сделать так, чтобы панель навигации (заголовок) была такой же, как и тело, в реагирующей навигации?

Question

Я новичок в React Native, и мне было интересно, есть ли способ сделать цвет фона панели навигации таким же, как цвет фона тела?

Мне известен следующий способ изменения цвета фона путем жесткого кодирования значения, но есть ли способ получить доступ к цвету фона тела, а затем впоследствии установить для него цвет фона заголовка навигации?

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

т. в настройке backgroundColor вместо «белый», как я могу заменить его на 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)