顶部标题图像的背景颜色答案

【问题标题】：Background color of top header image顶部标题图像的背景颜色
【发布时间】：2019-06-11 09:35:45
【问题描述】：

我正在制作 react native expo 应用程序。我有标题，我将图像作为背景。我想在这张图片上加上背景颜色，但是当我写背景颜色时，它不起作用。我如何在标题中的图像上放置背景颜色代码：

  navigationOptions: {
            headerTintColor: 'white',
            headerBackground: (
              <Image
              source = {{ uri: "http://rapprogtrain.com/img/new/computer-2788918_1280.jpg" }}
                style={{resizeMode:'cover',    width: Dimensions.get('window').width,
                    height:250, backgroundColor:'#1e1e21' }}
              />
        ),
        },

【问题讨论】：

标签： react-native react-navigation expo

【解决方案1】：

你可以试试：

 navigationOptions: {
    headerStyle: {{ backgroundColor:'#1e1e21' }}
 }

【讨论】：

【解决方案2】：

您可以使用工具栏。它可以改变背景颜色。

example.js

import {ToolbarAndroid} from "react-native"
render: function() {
  return (
    <ToolbarAndroid
      style={{backgroundColor:'#1e1e21'}}
      logo={require('./app_logo.png')}
      title="AwesomeApp"
      actions={[{title: 'Settings', icon: require('./icon_settings.png'), show: 'always'}]}
      onActionSelected={this.onActionSelected} />
  )
},
onActionSelected: function(position) {
  if (position === 0) { // index of 'Settings'
    showSettings();
  }
}

【讨论】：